今天完成的事情:

               1.完成任务十五的大部分重构

               2. 优化轮播图效果。

明天计划的事情：

               彻底完成CSS阶段的任务。

 遇到的问题：

  1.【solved】完成导航栏

借助checkbox的checked状态，因为复选按钮可以反复选择。根据checked的状态，才确认下拉列表框是否能够显示隐藏。

制作点击按钮

用媒体查询把768px以上的分辨率显示屏把按钮隐藏

最后再用hover属性制作鼠标经过时的不同样式

      2.【solved】css轮播图

先给父元素盒子相对定位，宽度100%沾满整个屏幕，溢出部分隐藏，

存放图片的盒子用绝对定位，宽度300vw，因为图片是横向排列，所以要设置的宽度是父元素的图像的倍数，

在利用white-space：nowra；不换行属性防止图片换行。

【方法一】通过animation绑定图片实现自动轮播的动画效果。

（7）animation-play-state： 规定动画是否正在运行或暂停。默认是 "running"。

通过animation: loop 10s linear infinite;绑定图片的动画效果。时间是十秒

然后创建一个动画规则，总共轮播三张图片，总共耗时10秒钟，一张图片大约3.3秒

一张图片切换耗时800ms（0.8秒），停留2600ms （2.6秒）

红色部分

0%---26%图片停留时间，停留2600ms （2.6秒）

26%---34%图片切换播放时间，图片切换耗时800ms（0.8秒）

黄色部分

设置图片在切换时的位置

第一张图片位置0   0

第二张图片位置-33.33% 0

第三张图片位置66.7% 0

最后一行为0  0 一共播放了三张图片耗时十秒，播放完位置在跳转到第一张也就是回到了起点从新播放，

流程图解释：

（1）把input[type="radio"]的一组按钮用设置相同name属性的方向进行关联，使得这组input可以切换。

（2）用label标签可单向绑定input，点击label即可使相应的input被：checked。

（3）多个label标签可绑定同一个input，分别为左右切换按钮和底部指示器设置一组label。

（4）当input被：checked后，通过选择器可控制图片或label标签的样式（模拟JS的点击事件）。

（5）input：nth-of-type（n）是选择input的父元素的第n个子元素，也可以给input加上id来代替。

（6）input ~选择input之后的兄弟元素（一定是之后，渲染关系不可逆；而且一定是兄弟，如果是子集，请加上后代选择器）。

收获：

           巩固了自身知识。