分析它的結構,有以下幾個部分:黑色的頭部,藍色的主體,拆分成紅色的變藍,和右邊的導航及主體部分,最下面的黃色是底部,結構相當簡單,現在開始寫它的css了,
定義最上面的黑色爲header:
複製代碼
|
然後中間的藍色主體叫mainbox吧,那麼樣式表可以寫:
複製代碼
|
以此定義其他如下:
複製代碼
|
說明:margin右邊的四個值分別對應上右下左,比如menu距下是5px,content距上是4px,所以中間有9px的間距了,而先定義了menu的高位30px,所以content若想和sidebar對齊,則應該定義高度爲400-30-4-5=361.上面完成了<style>部分的內容,下面把對應的div放到body中就可以了,
- <BODY>
- <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家園中文網站長站演示文檔</FONT></div>
- <div id="mainbox">
- <div id="sidebar"> </div>
- <div id="menu">4323434</div>
- <div id="content">
- <div align="left"><img src="200832420432288343.jpg" alt="家園中文"width="502" height="361"></div>
- </div>
- </div>
- <div id="footer">這裏是foot部分,放置版權啥的</div>
- </BODY>
刷新發現,是如圖效果,但是,所有的div都是靠左邊,怎麼才能居中呢??原因是我們沒有定義body裏元素的位置,所以css里加上:
複製代碼
|
這樣就大功告成了!
完整的頁面就是:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <style tpye="text/css">
- <!--
- body{text-align:center;} /***********這個是限定主面的居中效果,如果沒有,默認在左側顯示*********/
- #header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}
- #mainbox{margin:auto 0px;width:800;background:blue;height:410px;}
- #sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;} /*******上右下左*******/
- #menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
- #content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px;}
- #footer{margin-rop:0px;width:800px;height:40px;background:#fff000;}
- -->
- </style>
- </HEAD>
- <BODY>
- <div id="header"><FONT SIZE="3" COLOR="#FFFF33">家園中文網站長站演示文檔</FONT></div>
- <div id="mainbox">
- <div id="sidebar">
- </div>
- <div id="menu">4323434</div>
- <div id="content">
- <div align="left"><img src="200832420432288343.jpg" alt="家園中文網站長站" width="502" height="361"></div>
- </div>
- </div>
- <div id="footer">這裏是foot部分,放置版權啥的</div>
- </BODY>
- </HTML>
更多div+css佈局,可以來http://www.cndorm.com/html/117/這裏交流