Home思洋影视事业部网站建设知识库
0 Comments

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

发布于：2012-12-11  |   作者：广州网站建设  |   已聚集：人围观
实验室：使用新型盒布局设计网页（1）

CSS 3发展的新型盒布局是一种全新的页面布局方式，不仅可以完全替代传统的浮动布局，而且布局出来的网页具有很强的适应性，具体的体现就是其空间弹性。下面就用刚刚学过的盒布局知识来布局网页。    广州网站设计

1. 案例简介

本节要介绍的案例是一个典型的小型网页，从上至下包括页头、主体区域和页脚三个部分。其中主体部分从左至右分为三栏，分别是导航栏、文章栏、侧边栏。而文章内容栏又可以从上至下分为：标题、内容、日期三栏。页面效果如图4-9所示，下面我们就逐步布局该网页。

（点击查看大图）图4-9  使用新型盒布局设计网页

2. 设计网页元素

下面给出网页中的HTML标签代码和基本的样式表设置。

【示例4-9】 使用新型盒布局设计网页。

广州网站设计
  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>使用新型盒布局设计网页</title> 
  6. <style type="text/css"> 
  7. h3 {  
  8.     padding:15px;  
  9.     color:#FFFFFF;  
  10.     margin:0px;  
  11. }  
  12. a {color:#fff;}  
  13. </style> 
  14. </head> 
  15. <body> 
  16. <div id="area"> 
  17.   <header id="header">页头：使用新型盒布局设计网页 </header> 
  18.   <div id="container"> 
  19.     <nav> 
  20.       <h3>导航栏</h3> 
  21.       <a href="#">盒布局</a> <a href="#">布局方向</a> <a href="#">布局顺序</a>   
  22.       </nav> 
  23.     <article> 
  24.       <header>标题：开启盒布局 </header> 
  25.       <p>内容：盒布局是CSS 3发展的新型布局方式，它比传统的浮动布局方式更加完善、更加  
  26.       灵活，而使用方法却极为简单。  
  27.         开启盒布局后，文档就会按照盒布局默认的方式，来布局子元素。</p> 
  28.       <footer> 日期：2011-10 </footer> 
  29.     </article> 
  30.     <aside> 
  31.       <h3>侧边栏</h3> 
  32.       <p>侧边栏内容</p> 
  33.     </aside> 
  34.   </div> 
  35.   <footer id="footer"> 页脚：2011&copy; </footer> 
  36. </div> 
  37. </body> 
  38. </html> 

广州网站建设

下面一步一步地给各个功能块编写样式表，并追加到示例4-9中。      广州网站建设
标签：
飞机