上完css的第8天了;基本上进入了项目实战第阶段;本次重点分享的内容是盒子模型布局 浮动 已经定位
1 这是本次模拟考试的页面;刚拿到页面我慌了;其实本身是很简单的一个头部但是因为紧张;导致结构错乱;一直在找bug首先拿到这个页面它是有版心的;中间框起来的是版心盒子;外部是一个通然的大盒子;里面是装一张背景图片,
第二就是里面有一个左边的盒子;中间一个盒子; 右边两个盒子;而且是上下排列的;
2 在做中间a 链接的时候因为结构错了;给盒子里面的li设置浮动;一直不能在一行显示,通过debug在页面种找到了问题;然后给ul 设置了外边距;导致最外面的盒子塌下来了;
3 第三右边的盒子;上下结构也很清晰;给盒子设置了padding和margin值;但是a里面的内容;英文排练出现问题;主要是盒子浮动引起的;因为盒子没有高度所以英文文字跑到中文到前面;给盒子设置float:right;就可以了;
所有到导航其实都是一个原理;排好盒子到布局;结构分明;分别给盒子设置属性;对一个小白来讲是要重点是熟悉到;而且对于浮动到元素来讲;分为几种情况
如果父盒子没有高度;子盒子浮动是一定会影响下面的布局;记得给元素清楚浮动;
如果父盒子没有高度;父盒子有浮动;子盒子也浮动;父盒子能自己检测到高度;
所以下次在做布局的时候一定要注意结构
|
|