一种方法是用浮动布局，另一种是用绝对定位布局。以下是浮动方法：float布局.html 文件代码清单如下： float布局
一种方法是用浮动布局，另一种是用绝对定位布局。以下是浮动方法：
float布局.html 文件代码清单如下：
<!doctype html><html lang="zh"> <head> <meta charset="utf-8"> <title>float布局</title> <link rel="stylesheet" href="floatdiv.css"> </head> <body> <div id="wrapper"> <div id="div1" class="one"></div> <div id="div2" class="one"></div> <div id="div3" class="one"></div> <div id="div4"></div> <div id="div5" class="two"></div> <div id="div6" class="two"></div> <div id="div7" class="two"></div> <div id="div8" class="two"></div> <div id="div9"></div> </div> </body></html>floatdiv.css 文件代码清单如下：
/* floatdiv.css */#wrapper {width: 100%;}div {margin-bottom: 2%;height: 100px;}.one {height: 200px;}#div1 {float: left;width: 38%;background: #990100;}#div2 {float: left;margin-right: 2%;margin-left: 2%;width: 29%;background: #3399fe;}#div3 {float: right;width: 29%;background: #00ff01;}#div4 {clear: both;width: 100%;background: #0000fe;}.two {float: left;}#div5 {margin-right: 2%;width: 18%;background: #999965;}#div6 {margin-right: 2%;width: 18%;background: #99fe00;}#div7 {margin-right: 2%;width: 29%;background: #0ff;}#div8 {float: right;width: 29%;background: #ccc;}#div9 {clear: both;width: 100%;height: 80px;background: #000;}对于ie的很多版本而言，以上CSS的代码需要调整宽度，使每行的宽度小于100%，这样就行。
2013-11-08
<style type="text/css">
.bdy{width:960px; height:860px;}
.top{margin:10px 0px; width:960px; height:100px;}
.item1{float:left; margin-right:10px; width:450px; height:100px; background-color:#CCC}
.item2{float:left; margin-right:10px; width:240px; height:100px; background-color:#CCC}
.middle{margin:10px 0px; width:950px; height:100px;}
.mid{float:left; margin-right:10px; width:950px; height:100px; background-color:#CCC}
.bottom{float:left; margin-right:10px; width:230px; height:100px; background-color:#CCC}
.foot{float:left; margin-right:10px; width:950px; height:120px; background-color:#CCC}
</style>
<body>
<div class="bdy">
<div class="top">
<div class="item1"></div>
<div class="item2"></div>
<div class="item2"></div>
</div>
<div class="middle">
<div class="mid"></div>
</div>
<div class="top">
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div>
<div class="bottom"></div></div>
<div class="middle">
<div class="foot"></div>
</div>
</div>
</body>
希望对你有帮助2013-11-08
DIV+CSS,本人菜鸟,刚开始学,很多不懂请教一个弱智的问题谢谢! 
