今天完成的事情：

         1.  完成了任务十五第一个页面的重构。

         2.  弄清楚了轮播图的原理。

         3.  整理多媒体查询，让其具有层次感。

重构之后的HTML代码：

重构后的对媒体查询如下图：

              对比        

这样层级分明的页面，显得更加美观，让用户有着更好的观看体验。

  明天计划的事情：

             尽量完成CSS任务，为开启JS做好准备。

遇到的难题：

   在任务十五的轮播图中，在定时器外是需要一个控制器来完善。

           其中这个是轮播图所需要的代码，但是我制作的简易轮播图似乎是CSS3制作的。

但是百度上面的教程大多不是单纯的CSS代码就能独立完成。

在html ，css 已经写好的情况下。最主要的就是js的功能问题了。轮播图的功能步骤如下：

     1.先让图片轮播起来。基本就是写一个 play函数里面加定时器，每次使图片的index对象加一，当index大于最大值时，设置index等于第 一张图片.这样轮播图就动起来了。

    2. 轮播图动起来基本就是只显示一张图片隐藏其他的图片。我上面使用的是opacity 。

    3. 图片下面的按钮。主要就是使下面的按钮与上面的图片一一对应。然后点击下面的按钮显示对应的图片。

     4. 左右的上一张和下一张按钮。点击左边的上一张按钮图片向前显示，实现原理就是使 index 对象减一。点击左边的下一张按钮图片向后显示，实现原理就是使 index 对象加一。 

    5. 对应上一张和下一张连续点击的问题就是给这两个按钮加上延时器。

    6. 当鼠标放在轮播图区域时停止轮播，实现原理就是清除定时器，离开开始轮播就是加上定时器。

    7.  原理我明白，但是我实现不了。

  暂时决定把这个问题先放放。

     今天在任务重构中发现了一个新的问题，每次添加的边框或者下换线其实都是有着1PX的大小，但是结构紧密的同时随着鼠标移动出发hover效果，布局就会因为这个1PX而发生改变，

当我触发阴影的同时整体布局发生改变，但是在任务八九中由于是使用栅格系统进行的布局所以没有发生这个变化，

               最后我是采用在原有DIV上面添加一个和背景颜色一样的颜色的边框来直接把内容垫起来，最后在用hover来为边框添加我想要的颜色，由于在代码中一开始添加了边框，最后的hover效果只是改变颜色，所以布局不会发生变动。

收获：

           在重构任务中，巩固了基础代码，学会了轮播图的制作原理和使用方法。