今天完成的事情：

1.第一个页面写了header/footer/轮播图

2.修改完善了栅格系统

明天计划的事情：

1.完成第一个页面。

2.第二个页面写一部分。

遇到的问题：

1.昨天写的栅格系统非常垃圾，调试了一早上。

收获：

1.用雪碧图完成了轮播图。

轮播图放了3张，但是雪碧图做了4张图，第一张和最后一张是同一张图。并且将雪碧图按照left-right制作。

动画效果设置改变背景图片的position来实现。

由于轮播图宽度占满100vw，所以每次改变的position也是100vw。其中

0-27是第一张图展示的时间，27-33是第一张图到第二张图的过渡。以此类推。

重点在于93-99是第三张图过渡到第四张图（也是第一张）然后100的瞬间动画恢复到初始状态

position：0 0；就实现了自然过渡。

这种方法的缺点是不可以给图片套a标签，就没办法点击跳转页面了。而且会有1%的误差。

另外

底下的三个小点设置的悬浮效果，在离开的瞬间就会恢复到原来的状态。因为css没有办法抓取现在是在第几张图。目前丑也没办法了...

注意~选择器只能选取文档中~之后的内容，所以carousel在html中应当在pic123的后面，而且必须拥有相同的父元素。如图

记得最后给轮播图设置 infinite，永久循环轮播图（默认1次）

2. 这种写法看上去没毛病。父元素hover的状态下伪类after出现。

但是是失效的。查阅资料后，我估计是after/before这样的伪类不算是原元素的子元素，还算是同一个个体。

  这样写就对了。

3.

下拉菜单height还没有到位的时候，子元素li的内容已经出现了。

父元素设置overflow：hidden解决。

4.模拟下拉菜单用过渡transition要比动画效果好。

transition可以在下拉和上拉时都有高度渐变的效果。动画效果在input的控制下渐变只能实现一次。