实训

使用弹性盒布局的方式，制作图9-32所示的网页。

图9-32　弹性盒布局页面

1.训练要点

（1）页面布局结构；

（2）CSS盒模型；

（3）盒布局；

（4）自适应窗口的弹性盒布局。

2.操作提示

（1）页面主体＜div id＝＂wrapper＂＞宽度设置为80%，最大宽度为1 000 px，最小宽度为780 px；

（2）页面采用“同”字型布局，上方为页眉header和nav，左、右侧边栏为aside，中间主体内容为article；

（3）采用盒布局，用id为container的div将左、右侧边栏和主体内容包围起来；

（4）在中间主体内容上设置box-flex属性，使其随浏览器宽度的变化而变化。