一、今天完成的任务：

  任务八代码的响应式修改，以及任务十psd切图

二、遇到的问题：

 1，如图所示：

   通过Chrome开发者工具检测是因为在轮播图用了float，所以造成下方logo有了很高的height值。

解决方法：使用clear：both，清除浮动效果。

 2，如图所示：

   在并排四个的时候。第四个内容后面是没有箭头的。按道理说是应该有的，不过为了还原原图，只是在栅格布局变成col-sm-6的时候使用了媒体查询设置插入背景图

3，如图所示部分的布局：因为栅格布局不能使用12除以5不能整除。所以刚开始是选择弃用栅格布局，使用float布局，但是做完之后发现，当分辨率处于col-md-3也就是每排只能排列四个时，被挤出第一排的图标因为使用了float的原因无论设置text-align：center，还是margin：0 auto都是无用。

解决方法：参照雪峰师兄的日报，采用栅格和float共用的方式进行布局，涉及知识点媒体查询，栅格布局，以及float布局。

首先使用栅格<div class="col-xs-12 col-sm-6 col-md-6 col-lg-2-5">，如此设置的话在大于1200像素时是没有任何效果的。所以要给col-lg-2-5设置一个媒体查询

使其在大于1200px的时候，每个盒子的宽度设为20%，五个正好100%。然后使用浮动五个盒子并排排列。padding根据自己的需要进行设置。此时就形成了在大于1200px时，float进行布局，小于1200px的时候就是栅格布局了。

4，如图所示：

使用空盒子插背景图的方式，因为栅格布局自带padding和margin值，如果使背景图居中的话，左右间距不同显得不伦不类，所以我设置背景图的负margin值，土豆logo和字体的布局。刚开始也是使用的float：left。但是用过之后也出现了问题，缩小分辨率之后，字体因为空间的不足，会有一部分跑到图片下面。虽然雅观但是不符合实际。

  解决方法：参考雪峰师兄的日报，使用display：inline-block表格进行布局，给logo和文字同时设置display：inline-block，然后设置文字float：right。

5，如图所示：

因为是用空盒子做出来的圆，所以在设置了text-align：center之后，虽然居中，但是并不齐整。

解决方法：参考雪峰师兄的日报里使用margin值把字体固定到同一位置的方法。（固定了字体的高度和宽度以及位置，在经过断点的之后，因为字体不是固定值的缘故，把字体挤成了两行）

   因为我的断点只有一个，要么3 9 布局  要么66布局。  所以只需要在断点的像素设置两个媒体查询，虽然同样是固定了字体的位置，但是并不会因为字体的变大从而使字体挤成两行。

二、未解决的问题：

 1，如下图所示：  看着不美观，但是因为栅格布局的缘故，也没法调试。不知道是直接让他们变为12，还是变成6之后再变成12。

2，如图所示：

在分辨率处于col-xs-12时，字体因为使用float的脱离了文档流，从而覆盖了盒子的下划线。

解决方法：使用媒体查询让其变成了上下结构。（不知道这样做是不是正确的，请师兄指点）

3，如图所示：

里面的布局都是px固定布局，在分辨率低于368之后因为空间的不足，从而把盒子撑开了。

解决方法：设置了min-width：368px（不知道这样解决是否合理）

三、收获：

1，更为熟练的使用栅格布局，float布局，以及相对比较少用的display表格布局。

2，如下：

 1）布局不能写死

 2）布局不能写死

 3）布局不能写死

 注：重要的事情说三遍

四、明天的计划：

 这几天因为任务九的响应式，有关小课堂“如何去除inline-block间距有哪几种方法？”的内容并没有搜集多少，明天准备大部分时间放到小课堂上。如果时间充足，把任务十的要求了解一下，并把任务十的切图做完

五、成果展示：

https://fan911025.github.io/task9/task8.html

https://fan911025.github.io/task9/task8-2.html

https://fan911025.github.io/task9/task8-3.html