<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>一列布局</title>
<style type="text/css">
body{margin:0; padding: 0}
.head{height: 80px;background-color: red;}
.main{width: 500px;height: 500px;background-color: #ccc;margin: 0 auto;}
.footer{width: 500px;height: 40px;background-color: green;margin: 0 auto;}
</style>
</head>
<body>
<div class="head"></div>
<div class="main"></div>
><div class="footer"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>两列布局</title>
<style type="text/css">
body{margin:0;padding:0;}
.left{width: 20%;height: 500px;background:#ccc;float: left;}
.right{width: 80%;height: 500px;background:#cce;float: right;}
.main{width:500px;height:500px;margin: 0 auto}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>三列布局</title>
<style type="text/css">
body{margin:0;padding:0;}
.left{width: 200px;height: 500px;background:yellow;position:absolute;top:0;left :0;}
.middle{height: 500px;background:red;float: left;margin: 0 310px 0 210px}
.right{width: 300px;height: 500px;background:green;position:absolute;top: 0; right :0}
</style>
</head>
<body>
<div class="left">200px</div>
<div class="middle">一种是设计+CSS,关键词也就是Dreamweaver+Photoshop,这种人较多,但通常计算机知识薄弱。另一种是JS+CSS,偏重浏览器内的MVC, 这种人比较少,也是业界稀缺的</div>
<div class="right">300px</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>混合布局</title>
<style type="text/css">
body{margin:0; padding: 0}
.head{height: 80px;background-color: red;}
.top{height:80px;width: 500px;background-color:grey;margin: 0 auto}
.main{width: 500px;height: 600px;background-color: #ccc;margin: 0 auto;}
.left{width: 200px;height: 600px;background-color: yellow;float: left;}
.right{width: 300px;height: 600px;background-color: pink ;float: left;}
.sub_left{width: 100PX;height: 600PX;background: black;float:left;}
.sub_right{width: 200PX;height: 600PX;background: purple;float: right;}
.footer{width: 500px;height: 40px;background-color: green;margin: 0 auto;}
</style>
</head>
<body>
<div class="head">
<div class="top"></div>
</div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="sub_left"></div>
<div class="sub_right"></div>
</div></div>
<div class="footer"></div>
</body>
</html>