一、今天完成的任务：

   因为一上午都在审核师弟日报、任务，以及进行任务一到三的修改，所以下午才开始进行任务八第二个页面的编写。基本上完成了布局，还差一些细微的地方需要修改。

主题页面布局：

   继续使用boostrap栅格布局，使用三九分的栅格布局模式，然后给栅格布局的盒子内嵌套块级元素div盒子，同时给div盒子内容添加text-align：center，以及padding值使盒子内的文字水平垂直居中。

二、遇到的问题：

  1，如下图所示：

   切出的图片和任务资源psd显示的不同。

解决方法：根据z-index的特性，利用定位position覆盖不具有定位元素的特性使“首页：合作企业”所在的盒子（设置背景颜色）覆盖掉不需要的部分。

  2，如下图所示：因为给图片所在的盒子设置了float，所以在缩小分辨率的时候，图片因为脱离了文档流所以会覆盖到边框线。

解决方法：

   方法一：把图片和文字内容嵌套在一个盒子内，并给盒子设定padding值，但是这个值因为页面要适应手机端页面大小，会设置的很大，这样页面就变得不协调，不美观了。（不建议使用）

   方法二：给图片所在的位置设置一个空盒子，然后把插入图片改为这个空盒子的背景图，这样就不需要考虑图片的高度问题了，只需要通过控制空盒子使图片的内容显示出来就可以了，需要把握的只有宽度。然后再给文字部分的div盒子设置padding值，使其撑起来的padding值超过图片所在盒子的高度值（或者给包含图片和文字的div设置padding值也行，此时就不需要太大的padding值了，需求多大就使用多大就行），这样无论再怎么缩小分辨率，也不会出现图片覆盖边框的问题了。如图所示：

三、收获：

  更为熟练的运用栅格布局，以及媒体查询，还有就是背景图的应用，发现可以通过设置空盒子，再设置空盒子的边角值，然后再添加背景图片的方式来实现，而不是利用切图工具把圆和图片一起切下来。

四、明天的计划：

  编写任务八的第三个页面，之后使用Chrome调试代码，调试细节方面的内容，如果在时间充足的情况下，可以研究下自适应和响应式的区别。