发表于: 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.左定宽,右自适应布局

  1. float:     .left{100pxfloat:left }  .right{margin-left:100px;}
  2. float+overhidden: .left{100px; float:left}  right{overflow:hidden}



返回列表 返回列表
评论

    分享到