今天完成：

原计划一天完成任务八的第一个页面，然后用了bootstrap的栅格系统，发现这玩意儿很好用，就是改起式样什么的花的时间太长，差不多一个模块要个吧小时，果然一个官网首页还是比较麻烦的，再次感谢师兄的指点。

栅格系统在任务八第一个页面用的比较多的就是简单的分块，详细贴一下相关知识点：

下二图是一个最普通的栅格实例，最外面的盒子class.container的作用就是在分辨率低于1170px的时候提供两边一个15px的空隙，超过1170的时候整体的宽度就不会变了，防止太大屏幕内容间隔太大。class.row里面包裹的就是栅格，下图中有很详细列出不同分辨率的时候用不同的前缀加数字可以把栅格每层的个数相应分好。这样在不同分辨率的时候比如电脑和手机的时候就可以用同一个网页，他就会根据不同的设备做出不同的响应。

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>   
    <div class="col-md-4">.col-md-4</div>   
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

然后其他都是大量的重复劳动，特别媒体查询，用的很熟练了。

这里贴下今天还未解决的bug，找空详细研究下：

在下图main4-box父元素设置了：hover伪类，设置了鼠标滑过显示盒子阴影的事件，但是莫名其妙其子元素两个盒子也同时出现了该效果，按道理讲这个是不会继承的，然后至今未解决。另外，师兄使用的是同样的方法，未出现这种情况，在另外的测试用也未发现问题。

<div class="col-xs-12  col-sm-12 col-md-5 main4-box">
    <div class="main4-icobox">
        <div class="main4-ico1 main4-clearhover"></div>
    </div>
</div>
.main4-box :hover {
box-shadow: 0 0 1px #9E9E9E;
}

明天计划：

加快速度把后面两个页面完成，然后回头把这个bug处理了。