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