一個簡單的css+div佈局實例,讓你很明瞭的瞭解怎麼佈局!

分析它的結構,有以下幾個部分:黑色的頭部,藍色的主體,拆分成紅色的變藍,和右邊的導航及主體部分,最下面的黃色是底部,結構相當簡單,現在開始寫它的css了,
定義最上面的黑色爲header:

複製代碼
  1. #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}

然後中間的藍色主體叫mainbox吧,那麼樣式表可以寫:

複製代碼
  1. #mainbox{margin:auto 0px;width:800;background:blue;height:410px;}

以此定義其他如下:

複製代碼
  1. #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;}     /*******上右下左*******/  
  2. #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
  3. #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}
  4. #footer{margin-top:0px;width:800px;height:40px;background:#fff000;}

說明:margin右邊的四個值分別對應上右下左,比如menu距下是5px,content距上是4px,所以中間有9px的間距了,而先定義了menu的高位30px,所以content若想和sidebar對齊,則應該定義高度爲400-30-4-5=361.上面完成了<style>部分的內容,下面把對應的div放到body中就可以了,

 

  1. <BODY>
  2.   <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家園中文網站長站演示文檔</FONT></div>
  3.   <div id="mainbox">
  4.      <div id="sidebar"> </div> 
  5.      <div id="menu">4323434</div> 
  6.      <div id="content"> 
  7.         <div align="left"><img src="200832420432288343.jpg" alt="家園中文"width="502" height="361"></div> 
  8.      </div>
  9.   </div>
  10.   <div id="footer">這裏是foot部分,放置版權啥的</div>
  11. </BODY> 


刷新發現,是如圖效果,但是,所有的div都是靠左邊,怎麼才能居中呢??原因是我們沒有定義body裏元素的位置,所以css里加上:

複製代碼
  1. body{text-align:center;}  

這樣就大功告成了!

完整的頁面就是:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <style tpye="text/css">
  5. <!--
  6. body{text-align:center;}           /***********這個是限定主面的居中效果,如果沒有,默認在左側顯示*********/
  7. #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}                  
  8. #mainbox{margin:auto 0px;width:800;background:blue;height:410px;}
  9. #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;}     /*******上右下左*******/  
  10. #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
  11. #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}
  12. #footer{margin-rop:0px;width:800px;height:40px;background:#fff000;}
  13. -->
  14. </style>
  15. </HEAD>
  16. <BODY>
  17.   <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家園中文網站長站演示文檔</FONT></div>
  18.   <div id="mainbox">
  19.   <div id="sidebar">
  20.   </div>
  21.   <div id="menu">4323434</div>
  22.   <div id="content">
  23.     <div align="left"><img src="200832420432288343.jpg" alt="家園中文網站長站" width="502" height="361"></div>
  24.   </div>
  25. </div>
  26. <div id="footer">這裏是foot部分,放置版權啥的</div>
  27. </BODY>
  28. </HTML>


更多div+css佈局,可以來http://www.cndorm.com/html/117/這裏交流

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章