今天完成的事情：

优化了任务8的代码。将三个页面css相同的首部和尾部抽离出来共用，根据情况对具有同样的样式值的css选择器进行提取共用。

了解了css reset(重置)。一直在任务中都在根元素上设置了margin:0;和padding:0;，但不知道是css reset。

不同核心的浏览器，默认样式是不一样的。通过reset重置样式，使同样代码在不同浏览器显示出一致的效果。

除了css reset，还有更轻松的方式：normalize.css。

用这个重置样式时只对部分必要的样式进行设置，它会保留有用的样式。

建议优先使用normalize.css。

明天的计划：

如果没事，就按照任务9将任务8的第一个页面改为响应式。

遇到的问题：

在chrome下正常显示背景图大小，Firefox和ie下会变

解决方法：css hack，根据不同核心浏览器匹配。

1. /*ie11 css hack*/
2. @media all and (-ms-high-contrast:none) {
3.    *::-ms-backdrop, .class名字 { 里面的样式:样式值;}
4. }
5. /*ie11注意里面的标点符号*/
7. /*ie10 css hack*/
8. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
9.    .class名字 { 里面的样式:样式值;}
10. }
12. /*ie 6 7 8 9*/
13. select {
14.    background-color:red\0; /* ie 8/9*/
15.    background-color:blue\9\0; /* ie 9*/
16.    *background-color:#dddd00; /* ie 7*/
17.    _background-color:#CDCDCD; /* ie 6*/
18. }
20. /*火狐 css hack*/
21. @-moz-document url-prefix() {
22.    .selector {
23.        attribute: value;
24.    }
25. }

收获：

学到了css重置。

初步了解了如何重构代码，任务中用到了css样式的书写顺序的规则。

css命名时要通俗易懂，尽量简短，能让人轻松看出含义。