通过学习了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{width:800px;height:50px;background:blue;margin:0 auto} .main{width:500px;height:200px;background:green;margin:0 auto;} .footer{width: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样式可以自己思考,方法不止一种。