发表于: 2017-04-03 23:54:37
4 752
一、今天完成的事情
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中如何让响应式图片水平居中。
评论