思洋互动网站建设学前班

实验室：使用新型盒布局设计网页（2）

3. 从body元素开始弹性布局

把body元素定义为盒布局，并设置子元素水平居中。

广州网站建设

1. body, html {  
2.     margin:0;  
3.     padding:0;  
4.     width:100%;  
5.     height:100%;  
6.     font-family:Arial, Helvetica, sans-serif;  
7. }  
8. body {  
9.     /* 开启盒布局 */  
10.     display:-webkit-box;  
11.     display:-moz-box;  
12.     display:box;  
13.     /* 设置盒子内元素水平居中 */  
14.     -webkit-box-pack:center;  
15.     -moz-box-pack:center;  
16.     box-pack:center;  
17. }  

4. 定义网页区域

设置网页区域的空间弹性以占满整个区域。使用盒布局，并设置垂直方向布局。

广州网站设计

1. #area {  
2.     height:100%;  
3.     max-width:950px;                /* 最大宽度  */  
4.     min-width:600px;                /* 最小宽度 */  
5.     /* 定义空间弹性，使其充满页面空间，但宽度受max-width和min-width限制 */  
6.     -webkit-box-flex:1;  
7.     -moz-box-flex:1;  
8.     box-flex:1;  
9.     /* 开启盒布局 */  
10.     display:-webkit-box;  
11.     display:-moz-box;  
12.     display:box;  
13.     /* 垂直布局，实现竖直方向的三栏布局 */  
14.     -webkit-box-orient:vertical;  
15.     -moz-box-orient:vertical;  
16.     box-orient:vertical;  
17. }  

5. 设置页头、主体区域和页脚三个部分

设置页头、主体区域和页脚三个部分。其中，主体区域部分定义空间弹性，并使用盒布局及默认的水平方向。其他部分为常规样式表。

广州网站设计

1. #area header {  
2.     background-color:#ff6600;  
3.     text-align:center;  
4.     line-height:35px;  
5.     color:#FFFFFF;  
6.     font-size:24px;  
7.     font-weight:bold;  
8. }  
9. #area #header {  
10.     padding:15px;  
11. }  
12. #area #container {  
13.     /* 定义空间弹，使其随空间伸缩尺寸 */  
14.     -webkit-box-flex:1;  
15.     -moz-box-flex:1;  
16.     box-flex:1;  
17.     /* 开启盒布局 */  
18.     display:-webkit-box;  
19.     display:-moz-box;  
20.     display:box;  
21. }  
22. #area footer {  
23.     background-color:#f47D31;  
24.     text-align:center;  
25.     line-height:20px;  
26.     color:#FFFFFF;  
27. }  
28. #area #footer {  
29.     padding:10px;  
30. }