今天完成的事情：

调整页面一：

尝试去掉css写的三角形的右侧黑边，然而并没有找到办法，outlin:none也不管用。

布局页面二：

观察页面二的psd文件时，发现这个页面神似任务一九宫格：

就是把九宫格每个格子中间设定更大的padding值，然后把四个隐藏的图标填进去，加上header和footer就大功告成了。

于是就跑去研究假如按照九宫格的css写会不会更加简便一些，毕竟用栅格系统的话貌似要更麻烦，因为每个都要设定“offset-x”值，还要重新调整位置细节，感觉代码量反而变大了。

然后就按照盒子模型写了一遍页面出来，又用删格系统写了个大概：我勒个擦！明明不用简便方法写出来的反而更简便，应该又是那种你要学要懂但是以后不一定多大用，类似svn，囧。

学习伪元素befor和after：

• ::before::after是CSS伪元素，使用它们你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容，但这些内容能像普通内容一样显示，
• 想让插入的内容出现在其它内容前，使用::before，否者，使用::after。
• 在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上。
• 可以设定的content的值有：
• 字符串：content：“字符串”
• 图片：content:url(path/to/imge.jpg)
• 空：content:""；可以用来清除左右浮动元素
• 计数器：content：counter（li）；在列表时计算行数。

需要注意的是：不能用他们插入html

明天要做的事：

完成任务七页面二，开始页面三的编写。

遇到的问题：

如上所说，如何隐藏掉css三角形的黑边呢

收获：

其实可以设定宽度限制然后让每行水民随屏幕大小展示不同的数量，这是不是最基础的响应式呢