最簡(jiǎn)單的cssdiv布局

1、樓主 發(fā)表于: 2009-08-01 20:38 只看樓主 | 小 中 大 0 一個(gè)簡(jiǎn)單的css+div布局實(shí)例，讓你很明了的了解怎么布局！ 分析它的結(jié)構(gòu)，有以下幾個(gè)部分：黑色的頭部，藍(lán)色的主體，拆分成紅色的變藍(lán)，和右邊的導(dǎo)航及主體部分，最下面的黃色是底部，結(jié)構(gòu)相當(dāng)簡(jiǎn)單，現(xiàn)在開(kāi)始寫它的css了，定義最上面的黑色為header： 復(fù)制代碼 1. #headermargin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px; 然后中間的藍(lán)色主體叫mainbox吧，那

2、么樣式表可以寫： 復(fù)制代碼 1. #mainboxmargin:auto 0px;width:800;background:blue;height:410px;以此定義其他如下：復(fù)制代碼 1. #sidebarmargin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right; /*上右下左*/ 2. #menumargin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px; 3. #contentf

3、loat:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px; 4. #footermargin-rop:0px;width:800px;height:40px;background:#fff000;說(shuō)明：margin右邊的四個(gè)值分別對(duì)應(yīng)上右下左，比如menu距下是5px，content距上是4px，所以中間有9px的間距了，而先定義了menu的高位30px，所以content若想和sidebar對(duì)齊，則應(yīng)該定義高度為400-30-4-5=361.上面完成了部分的內(nèi)容，下面把對(duì)應(yīng)的div放到body中就可以了， 復(fù)制代碼 1. 2. 家園中文網(wǎng)站長(zhǎng)站演示文檔 3. 4. 5. 6. 4323434 7. 8. 9. 10. 11. 這里是foot部分，放置版權(quán)啥的 12. 刷新發(fā)現(xiàn)，是如圖效果，但是，所有的div都是靠左邊，怎么才能居中呢？原因是我們沒(méi)有定義body里元素的位置，所以css里加上： 復(fù)制代碼 1. bodytext-align:center;這樣就大功告成了！完整的頁(yè)面就是：復(fù)制代碼 1. 2. 3. 4. 5. 14. 15. 16. 17. 家園中文網(wǎng)站長(zhǎng)站演示文檔 18. 19.