<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>圣杯布局</title> <style> body{margin:0;} .center{height:600px;background:#f60;margin:0 200px;} .left{200px;background:#fc0;height:600px; position:absolute;left:0;top:0;} .right{200px;background:#fcc;height:600px;position:absolute;right:0;top:0;} </style> </head> <body> <div class="center"></div> <div class="left"></div> <div class="right"></div> </body> </html>
圣杯布局(目的就是为了实现自适应分辨率)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>等高布局(目的就是实现左右两边的高度等高,并且高度由内容撑开)</title> <style> body{margin:0;} .wrap{ 900px;margin:0 auto;overflow:hidden;} .left{200px;background:Red;float:left;padding-bottom:10000px;margin-bottom:-10000px;} .right{700px;background:blue;float:right;padding-bottom:10000px;margin-bottom:-10000px;} </style> </head> <body> <div class="wrap"> <div class="left"> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> </div> <div class="right"> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> 页面内容<br/> </div> </div> </body> </html>
等高布局(目的就是实现左右两边的高度等高,并且高度有内容撑开)
2、css三层嵌套(宽高自适应)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .btn{width:100px;background:url(img/btn.png) repeat-x;} 8 .btnL{background:url(img/btnL.png) no-repeat;} 9 .btnR{height:31px; background:url(img/btnR.png) no-repeat right 0; text-align:center; line-height:31px;} 10 </style> 11 </head> 12 <body> 13 <div class="btn"> 14 <div class="btnL"> 15 <div class="btnR">测试测试</div> 16 </div> 17 </div> 18 </body> 19 </html>
3、两层嵌套(宽自适应)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .btn{width:200px;background:url(img/btn2.png) no-repeat;} 8 .btnR{height:31px; background:url(img/btnR.png) no-repeat right 0;} 9 /* 10 扩展要求高,图片比较大的 用三层嵌套 11 扩展要求不高,图片比较小的 用两层嵌套 12 */ 13 </style> 14 </head> 15 <body> 16 <div class="btn"> 17 <div class="btnR">猜猜猜测试</div> 18 </div> 19 </body> 20 </html>
4、背景透明的三层嵌套(宽高自适应) 2种实现方式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body{ background:#000;} .btn{width:100px;margin:0 auto;background:url(img3/btn.gif) repeat-x;} .btnL{background:url(img3/btnL.gif) no-repeat; position:relative;left:-9px;} .btnR{ background:url(img3/btnR.gif) no-repeat right 0;height:25px; position:relative; right:-18px;} </style> </head> <body> <div class="btn"> <div class="btnL"> <div class="btnR"></div> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body{ background:#000;} .btnL{width:100px;margin:0 auto;background:url(img3/btnL.gif) no-repeat;} .btnR{ background:url(img3/btnR.gif) no-repeat right 0;} .btn{height:25px;background:url(img3/btn.gif) repeat-x;margin:0 9px;} </style> </head> <body> <div class="btnL"> <div class="btnR"> <div class="btn"></div> </div> </div> </body> </html>
这2种方式,1是通过背景定位方式实现。2是通过margin实现。