任务进展：

       1：不使用bootstrap，用css动画模拟实现了首页轮播图效果，并加上了圆点控制播放功能。

       2：修改了原任务7中使用bootstrap的部分，显示成功。

       3：初步将任务13 css样式拆分为三部分：重置样式表，公用模块样式表，公用样式表，使用了原子类，页面显示正常。

遇到问题：

       css实现轮播图的思路是：将要轮播的模块（比如3个）各用div包裹起来，置于父div中，设置浮动向左，紧密的排成一行。为父div设置无限循环的动画：animation:slider1 5s ease-out infinite，slider1动画的关键帧@keyframes，分作3段，通过改变margin-left的值，将特定的包裹div滑动到可见区；再分别设置slider2和slider3的动画，使得鼠标点击圆点时，父div以新的动画模式运动。input--label模式中，input不仅对label标签的点击事件右反应，对其:active事件也有反应，当input处于active状态时，取消父div的动画名称，并设置其margin-left的值，显示特定的模块，由于acitve的类型为mousedown事件，用户鼠标松开时，动画名称自动添加到父div中，动画得以继续运行。写代码时要注意label和input的对应关系，注意“~”语法的准确性。

明日计划：

       1：继续分离和简化css样式。

       2：学习JS。

收获：

       通过实现轮播图的过程，理解了input与label的关系，学习了“~”（跳板）的使用。外边距重叠不仅发生在同级元素之间，父子元素之间也会发生。拆分css样式过程中，使用原子类一定程度上可以简化css代码量，提高可读性，但对于多个相同元素，需要重复书写多次，若将其单独分离出来作为一个公用组件，却又不具备扩展性，使用时还是要自己权衡用到什么程度。