今天完成的事情：

完成折叠导航栏和轮播图

折叠导航栏在768px宽度转换；折叠之后，下拉导航栏设置absolute，脱离文档流，遮挡后面的页面

轮播图的思路是把图片排成一行，屏幕只显示当前图片，其余隐藏overflow：hidden；箭头导航和底部导航使用同时和input关联的label保证状态同时改变，图片和input关联，箭头导航和底部导航都可以浏览图片。存在一个问题：所有的图片都在一行，在首尾图片变换时速度很快，影响观看。

明天计划的事情：

完成页面1

准备小课堂

遇到的问题：

#1 导航栏的两种hover效果：水平时出现底部白边，垂直时背景变色

折叠时设置a的hover，水平时应该是li，刚开始能错了

#2 轮播图首尾变换时

本来可以写成这样 input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0)，

但是这样没有通用性，后来想到first、last，最后写成这样

input:first-of-type:checked ~ .arrows label:last-of-type

收获：

通过使用css完成折叠导航栏和轮播图，发现css还是能做很多事情，这些需要深入研究，目前只能简单尝试。label和input的关联可以完成状态的改变，今天在折叠导航栏和轮播图中感到它们的巧妙运用。

还有一个小事没有完成，导航栏水平时小空白没有消除。

任务14

开始时间：5.27

预计结束时间：6.3

http://task.jnshu.com/zentao/project-task-629.html