一、今天完成的事情

1、完成任务7投票自适应调整，通过@media不同屏幕大小控制htmld的font-size=？的值来控制整体布局。

2、完成任务7游戏结束页面。主要通过ul、li标签及bootstrap框架的来实现。

二、明天计划的事情

   1、完成任务7的提交。

2、开始任务8：尽量完成首页的布局。

三、遇到的问题

1、在调整投票页面的自适应的时候sprites图出现错位。

解决方法：通过龚师兄的指点，把sprites的长宽通过计算换算成相应的rem值，例如：sprites图的为30px*30px，html的font-size=130%，那相应的尺寸为30/（16*130%）=1.44rem（浏览器字为16px的情况下）

2、在调试投票页面的自适应的时候，内容错位，原因；position：absolute的应用，对于文档流和脱离文档流的概念混淆：

文档流：指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

只有绝对定位absolute和浮动float才会脱离文档流。

部分无视和完全无视的区别？需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)

3、在游戏结束页面中遇到在bootstrap中如何让响应式图片水平居中？

解决方法：通过泽平师兄的指点，对于使用了通过.img-responsive 类来实现响应式图片。实现响应式图片水平居中使用 center-block 类

<img class="img-responsive center-block" src="...">

Ps：上述代码中，我们一定要注意.center-block 类的添加位置，一定要把.center-block 添加到img中，如果添加到别的地方，那么不会实现响应式图片水平居中。

四、收获

   1、掌握sprites图自适应的应用。

   2、规范了自己的布局。

   2、掌握bootstrap中如何让响应式图片水平居中。