分析它的结构，有以下几个部分：黑色的头部，蓝色的主体，拆分成红色的变蓝，和右边的导航及主体部分，最下面的黄色是底部，结构相当简单，现在开始写它的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/这里交流