今天完成的事情：

完成了轮播图和点击下拉框的写法

首先是轮播图

以前是用bootstrap的写的，能够实现手动轮播和自动轮播同时存在

但是好像用纯css的写法只能实现单一的轮播，不能够两者兼容

首先是手动轮播

主要是用到了checkbox和lable

流程图解释：

（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之后的兄弟元素（一定是之后，渲染关系不可逆；而且一定是兄弟，如果是子集，请加上后代选择器）。

然后是自动轮播

这个感觉要简单一点，主要是用到了css3里面的动画属性

需要注意的是，需要同步图片和下面的指示器

点击下拉框因为要考虑到响应式，所以感觉自己写的很麻烦、

写了两个导航栏，一个是响应式前的横向导航栏，一个是响应式之后的竖向导航栏

今天还学习了新的选择器

[class*="col-"]

选择所有类名中含有"col-"的元素

与此类似的还有：

[class^="col-"]

选择所有类名中以"col-"开头的元素

[class$="-col"]

选择所有类名中以"-col"结尾的元素

明天计划的事情：

提取组件库，拆分样式表

遇到的问题：

手动轮播图的图片不能成为一个循环，从最后一张到第一张的跳转，不是直接到第一张，而是通过前面的图片到第一张

收获：

轮播图的写法