今天完成的事情：

1.基本完成了任务七。

2.初步理解伪元素。

明天计划的事情：

1.完善任务七。

2.下载了解bootstrap。

3.不急着开任务八，大致总结任务一至七的内容。

遇到的问题：

1.看了一早上伪元素，但是没有应用上。伪元素功能很好很强大，但目前应用的不熟练。

2.

投票页的九宫格一开始想用flex写。

由于一个item宽度为21.25vw；一行可以放得下4个item，而我们一行只需要三个item。也就是说，flex在设置自动换行的情况下，一行的剩余活动宽度是小于一个item的宽度的。第一反应是查找如何设置一行item的个数。（shrink和grow不行，在viewwidth不变时item宽度是确定的不能放大缩小）然而并没有。第二是给item加margin将第四个item挤下去。那还不如直接用display写好了。

这时候已经觉得用flex不好做了，但是我是一个顽固的人，说用flex就用flex。原先是一个flex布局12个item，现在分为4个flex布局，一个flex只放3个item。问题是解决了，但是代码量巨大。也是通过本次任务学到了灵活布局的重要性。（几乎用了一下午写这个flex）

收获：

1.伪元素实际上是不在文档中的。他只是在原内容元素的前后插入额外的元素，他们外部可见，但是在源代码中无迹可寻，因此叫做伪元素。一般尽量不给伪元素添加实际内容。

伪元素必须有content属性否则无法工作（content：“#”都可以）

一般伪元素用来写一些图形，给原内容元素添加一些效果，用after清除浮动。伪元素为行内元素，要设置宽高得display：inline-block。

2.父元素不设置border的情况下，子元素的margin会超出父元素。因此要给父元素戴好border-top这个帽子。

3.h5的audio样式无法调节。师兄告诉我了一个黑科技完成了播放功能。。就是把它旋转。。。虽然是灵活运用。。但是总觉得太不严谨了吧。。百度到的内容大多是用js写一个按钮然后添加播放功能。突然对js期待起来了。

4.父元素ul。子元素li。设置lifloat：left，li的位置是从父元素的content左边开始的，而不是margin-left的左边。

要精确设置li的宽度时需要注意。

5.设置background半透明时，不要使用background-color：#c8a6s9然后opity：0.5 。父元素设置opity会让子元素全部跟着变透明。如果只要父元素background背景颜色透明则这样设置

用16进制写颜色，最后用0-1调节透明度。