楼主看看这个代码可以不
效果见图
<body style="margin: 0 auto; width: 1000px;">
<div id="div_1" style="height: 50px; background-color: Red;">
1层
</div>
<div id="div_2" style="height: 50px; background-color: Gray;">
2层
</div>
<div id="div_3" style="height: 50px;">
<div id="div_3_1" style="height: 100%; float: left; width: 300px; background-color: Yellow;">
3层左
</div>
<div id="div_3_3" style="height: 100%; float: right; width: 300px; background-color: Yellow;">
3层右</div>
<div id="div_3_2">
<div id="div_3_2_1" style="height: 50%; background-color: Blue">
3层中上
</div>
<div id="div_3_2_2">
3层中下
</div>
</div>
</div>
<div id="div_4" style="height: 50px; background-color: Green;">
4层
</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.head { width:1000px; height:100px; margin:auto; overflow:hidden; border:1px solid #666; }
.banner { width:1000px; height:150px; margin:auto; overflow:hidden; border:1px solid #666; margin-top:10px; }
.main { width:1000px; height:300px; margin:auto; overflow:hidden; border:1px solid #666; margin-top:10px; }
.main .left { width:299px; height:300px; border-right:1px solid #666; float:left; }
.main .center { width:349px; height:300px; border-right:1px solid #666; float:left; }
.main .center .mt { height:100px; border-bottom:1px solid #666;}
.main .center .mb {}
.main .right { width:350px; height:300px; float:left; }
.footer { width:1000px; height:80px; margin:auto; overflow:hidden; border:1px solid #666; margin-top:10px;}
</style>
</head>
<body>
<div class="head">
</div>
<div class="banner">
</div>
<div class="main">
<div class="left"></div>
<div class="center">
<div class="mt"></div>
<div class="mb"></div>
</div>
<div class="right"></div>
</div>
<div class="footer">
</div>
</body>
</html>
看看是不是你要的样子,有问题留言给我
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.div1{width:400px; height:100px; border:1px #333333 solid;}
.div2{width:100px; height:100px; border:1px #333 solid; float:left}
.div3{width:98px; height:46px; border:1px #666 solid;}
.clear{clear:both}
</style>
</head>
<body>
<div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1">
<div class="div2"></div>
<div class="div2">
<div class="div3"></div>
<div class="div3"></div>
</div>
<div class="div2"></div>
<div class="div1"></div>
</div>
</div>
</body>
</html>
你可以自己修改,大概意思你应该能看懂的
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
margin:0 auto;
}
#all {
margin-top:100px;
}
#top, #center, #bottom {
width:600px;
height:200px;
border-top:#000 1px solid;
}
#bottom{
border-bottom:#000 1px solid;
}
#cl, #cc, #cr {
width:198px;
height:200px;
float:left;
}
#cl,#cc
{border-right:#000 1px solid;
}
#cct {
height:50px;
border-bottom:#000 1px solid;
}
</style>
</head>
<body>
<div id="all">
<div id="top"> 123</div>
<div id="center">
<div id="cl"> 123 </div>
<div id="cc">
<div id="cct"> 123 </div>
213 </div>
<div id="cr">
123
</div>
</div>
<div id="bottom"> 123</div>
</div>
</body>
</html>
长宽高可自己修改。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#box {
height: 426px;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#top {
height: 100px;
border: 1px solid #666666;
}
#main {
height: 200px;
border: 1px solid #999999;
margin-top: 10px;
margin-bottom: 10px;
}
#left {
width: 200px;
float: left;
height: 200px;
}
#zhong {
width: 400px;
float: left;
height: 200px;
}
#zhongtop {
height: 80px;
}
#zhongdwon {
height: 100px;
}
#right {
width: 198px;
float: left;
height: 200px;
}
#down {
height: 100px;
border: 1px solid #999999;
}
-->
</style>
</head>
<body>
<div id="box">
<div id="top">sfdsdf</div>
<div id="main">
<div id="left">sdfsdf</div>
<div id="zhong">
<div id="zhongtop">aaaaa</div>
<div id="zhongdwon">aaaa</div>
</div>
<div id="right">sdfsdf</div>
</div>
<div id="down">sdfsdf</div>
</div>
</body>
</html>