上一講是關于CSS，這次DIV+CSS了解完了之後，就可以開始開發網站咯！我覺得在開始開發網站之前，就算無法設計一個漂亮的網頁，但起碼要了解好DIV+CSS進行布局和樣式控制。這樣至少還知道怎麼修改别人的模闆，知道怎樣靈活輸出對應的内容到對應的區域。
我的微薄：http://weibo.com/u/2448939884 歡迎程式員互粉。
<style type="text/css">
*{
/* 全局标簽 */
margin:0px 0px; /* 未設定的區域，全部緊貼臨近區域 */
}
#container{
background-color:#0066FF;
width:70%;
height:500px;
margin:0px auto;/* 水準居中 */
}
#container #header{
background-color:#990066;
height:100px;
}
#container #body{
background-color:#00FF66;
height:400px;
}
#container #body #l-img{
float:left; /* 設定左浮動，成為下個要浮動的區域的停靠點（如果這裡不設定為浮動，那content區域将浮動在body，而不是跟在l-img後面） */
background-color:#00FF00;
width:30%;
height:100%;
}
#container #body #content{
float:left; /* 設定左浮動，預設左浮動到父區域 */
background-color:#CC9900;
width:70%;
height:100%
}
#container #footer{
background-color:#666666;
height:100px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">頭部Logo、導航等</div>
<div id="body">
<div id="l-img">左方圖檔區</div>
<div id="content">右方内容區</div>
</div>
<div style="clear:both"></div> <!--清除浮動-->
<div id="footer">底部</div>
</div>
</body> ![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)