通过学习了div和css，下面来实现简单的一列，二列，三列布局，欢迎交流，指正！
1：一列居中布局
<!doctype html>
<html>
<head>
<title>一列布局</title>
<meta charset="utf-8">
<style type="text/css">
*{padding:0;margin:0;font-size:14px;}
.top{800px;height:50px;background:blue;margin:0 auto}
.main{500px;height:200px;background:green;margin:0 auto;}
.footer{500px;height:50px;background:#000;margin:0 auto;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
2：二列自适应布局
1 <!doctype html> 2 <html> 3 <head> 4 <title>二列自适应布局</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 *{padding:0;margin:0;font-size:14px;} 8 .left{width:20%;height:200px;background:blue;float:left} 9 .right{width:80%;height:200px;background:green;float:right;} 10 </style> 11 </head> 12 <body> 13 <div class="left">left</div> 14 <div class="right">right</div> 15 </body> 16 </html>
二列固定布局
1 <!doctype html> 2 <html> 3 <head> 4 <title>二列固定布局</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 *{padding:0;margin:0;font-size:14px;} 8 .content{width:800px;background:blue;margin:0 auto} 9 .left{width:500px;height:200px;background:green;float:left;} 10 .footer{width:300px;height:200px;background:green;float:right;} 11 </style> 12 </head> 13 <body> 14 <div class="content"> 15 <div class="left">left</div> 16 <div class="right">right</div> 17 </div> 18 </body> 19 </html>
3：三列布局
左右二列宽度固定，中间一列宽度自适应，使用了定位position:absolute来使左右分别固定在左上角和右上角，然后中间那列利用margin来设置
<!doctype html> <html> <head> <title>三列布局</title> <meta charset="utf-8"> <style type="text/css"> *{padding:0;margin:0;font-size:14px;} .left{width:300px;height:200px;background:blue;position:absolute;left:0;top:0;} .main {height:200px;background:green;margin:0 300px 0 300px;} .right{width:300px;height:200px;background:green;position:absolute;right:0;top:0;} </style> </head> <body> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div> </body> </html>
总结：平时所看到页面，大多数都是混合布局。三列布局和面试所说圣杯布局类似，圣杯布局它的目标是左右两栏定宽，中间那一行流式
<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>
css样式可以自己思考，方法不止一种。