思洋互动网站建设学前班

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

6. 设置主体区域中的导航栏、文章栏、侧边栏三个部分

设置主体区域中的导航栏、文章栏、侧边栏三个部分。其中，文章栏定义空间弹性，并使用盒布局和垂直方向布局。其他部分为常规样式表。

广州网站设计

1. #area #container nav {  
2.     width:170px;  
3.     background-color:#999;  
4. }  
5. #area #container article {  
6.     padding:10px;  
7.     /* 定义空间弹，使其随空间伸缩尺寸 */  
8.     -webkit-box-flex:1;  
9.     -moz-box-flex:1;  
10.     box-flex:1;  
11.     /* 开启盒布局 */  
12.     display:-webkit-box;  
13.     display:-moz-box;  
14.     display:box;  
15.     /* 布局方向设置为竖直方向 */  
16.     -webkit-box-orient:vertical;  
17.     -moz-box-orient:vertical;  
18.     box-orient:vertical;  
19. }  
20. #area #container aside {  
21.     width:170px;  
22.     background-color:#999;  
23. }  

7. 分别设置导航栏、文章栏、侧边栏的详细部分

分别设置导航栏、文章栏、侧边栏的详细部分。其中文章栏中的文章内容部分设置为空间弹性。其他部分为常规样式表。

广州网站建设

1. /* 左侧导航 */  
2. #area #container nav a:link, #area #container nav a:visited {  
3.     display:block;  
4.     border-bottom:3px solid #fff;  
5.     padding:10px;  
6.     text-decoration:none;  
7.     font-weight:bold;  
8.     margin:5px;  
9. }  
10. #area #container nav a:hover {  
11.     color:#FFFFFF;  
12.     background-color:#f47D31;  
13. }  
14. /* 中间内容 */  
15. #area #container article p {  
16.     -webkit-box-flex:1;  
17.     -moz-box-flex:1;  
18.     box-flex:1;  
19. }  
20. /* 侧边栏 */  
21. #area #container aside p {  
22.     padding:15px;  
23.     font-weight:bold;  
24.     font-style:italic;  
25.     color:#FFF;  
26. }  

广州网站建设

至此，一个典型的小型网页设计完成。该网页在改变窗口大小的情况下，能继续保持页面总体格局的完整。