当前位置:文档之家› css-盒模型-布局练习

css-盒模型-布局练习

布局练习1:左右两列,左侧固定宽度200px,右侧自适应占满,效果如下图。

布局练习2:左中右三列,左右个200px固定,中间自适应占满。

小提示:实现过程中可能出现的错误效果
布局练习3:上中下三行,头部200px高,底部200px高,中间自适应占满
布局练习4:上下两部分,底下这个固定高度200px,如果上面的内容少,那么这个footer就固定在底部,如果内容多,就把footer往下挤。

操作提示:在第一个div里加入100个br标签看效果。

技能提示:把footer固定在底部,把foorter往下挤着走都比较容易实现,但是合到一起,必要的设置就是html要有高度,body要有最小高度,footer依照body进行绝对定位。

布局练习5:分析校园网页面,用CSS+DIV进行布局。

(只实现布局,不做内容)
参考效果图:
202*300。

相关主题