上一讲是关于CSS，这次DIV+CSS理解完了之后，就可以开始开发网站咯！我觉得在开始开发网站之前，就算无法设计一个漂亮的网页，但起码要理解好DIV+CSS进行布局和样式控制。这样至少还知道怎么修改别人的模板，知道怎样灵活输出对应的内容到对应的区域。
我的微薄：http://weibo.com/u/2448939884 欢迎程序员互粉。
<style type="text/css">
*{
/* 全局标签 */
margin:0px 0px; /* 未设置的区域，全部紧贴临近区域 */
}
#container{
background-color:#0066FF;
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;
30%;
height:100%;
}
#container #body #content{
float:left; /* 设置左浮动，默认左浮动到父区域 */
background-color:#CC9900;
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>
在这里我无法详细去说明CSS标签选择器的各个规则，但这些规则适用于以后要将的jQuery，到时再一起讲述。