一個簡單的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-rop: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">
5. </div>
6. <div id="menu">4323434</div>
7. <div id="content">
8. <div align="left"><img src="200832420432288343.jpg" alt="家園中文網站長站" width="502" height="361"></div>
9. </div>
10.</div>
11.<div id="footer">這裡是foot部分，放置著作權啥的</div>
12.</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/這裡交流
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
