直接上代码::
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{margin: 0;padding: 0;}
.top{height: 100px; background: blue;}
.head{height: 100px; width: 800px; background: #f60; margin: 0 auto; }
.main{width: 800px; height: 600px; background: #ccc; margin: 0 auto;}
.left{width: 200px;height: 600px; background: yellow;float: left;}
.right{width: 600px; height: 600px; background: #369;float: left;}
.sub_l{width: 400px; height: 600px; background: green; float: left;}
.sub_r{width: 200px; height: 600px; background: #09F; float: right;}
.foot{width: 800px; height: 100px; background: #900; margin: 0 auto;}
</style>
</head>
<body>
<div class="top">
<div class="head"></div>
</div>
<div class="main">
<div class="left"> </div>
<div class="right">
<div class="sub_l"></div>
<div class="sub_r"></div>
</div>
</div>
<div class="foot"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{margin: 0;padding: 0;}
.top{height: 100px; background: blue;}
.head{height: 100px; width: 800px; background: #f60; margin: 0 auto; }
.main{width: 800px; height: 600px; background: #ccc; margin: 0 auto;}
.left{width: 200px;height: 600px; background: yellow;float: left;}
.right{width: 600px; height: 600px; background: #369;float: left;}
.sub_l{width: 400px; height: 600px; background: green; float: left;}
.sub_r{width: 200px; height: 600px; background: #09F; float: right;}
.foot{width: 800px; height: 100px; background: #900; margin: 0 auto;}
</style>
</head>
<body>
<div class="top">
<div class="head"></div>
</div>
<div class="main">
<div class="left"> </div>
<div class="right">
<div class="sub_l"></div>
<div class="sub_r"></div>
</div>
</div>
<div class="foot"></div>
</body>
</html>