发表于: 2017-04-05 21:42:06
2 529
今天完成的事情:
1.完成8.1 header 和 booter布局,写在public.css文件样式文件中
2.学习学习资料:常见布局
明天计划的事情:
1.完成页面8.1定宽布局;
2.学习css 媒体查询
3.修改8.1页面我自适应,可在移动端正常访问.
遇到的问题:
1.在布局上面位置的时候,由于图片大小不同,单图片又是底对齐的;为了实现这种效果,需要在外面加上一次包裹层,层层嵌套,导致布局非常复杂。
解决方法:更改图片大小是最直接的方法,在ps中将图片画布大小调整为大小相同,图片图层靠底端对齐即可。修改的图片覆盖保存时候,由于webstorm有自己的文件库,会导致图片更新不及时,这时候需要关闭浏览器标签,从webstorm再次打开,图片才能正常显示。
2.定主体宽度的时候使用rem为单位,在body中设置font-size:62.5%,发现当主体宽度设置为110rem时,主体的宽度我132px,并不是110px;
解决方法:经师兄指点,查阅资料发现,rem 的全称是:font size of the root element,也就是说font-size是设置在跟元素下的,也就是说,font-size:62.5%要设置在html里面才会起作用。
收获:
1.左定宽,右自适应布局
- float: .left{100px;float:left } .right{margin-left:100px;}
- float+overhidden: .left{100px; float:left} right{overflow:hidden}
评论