代码：页面布局（含图片列表布局）
一、区块布局：
<style> .box96{margin-left:2%;margin-right:2%;} .img-box{float:left;width:30%;} .txt-box{float:right:width:65%;} .p1{font-size:16px;color:#333;} .p2{font-size:14px;color:#aaa;} </style> <div class="box96"> <div class="img-box"><img src="images/_logo.png"></div> <div class="txt-box"> <p class="p1">标题</p> <p class="p2">内容</p> </div> </div>
二、页面布局：
http://blog.csdn.net/cui_angel/article/details/8306470 圣杯布局
http://www.cnblogs.com/imwtr/p/4441741.html 圣杯布局的讲解
http://www.dqqd.me/flying-wing/ 双飞翼布局
http://www.cnblogs.com/xiaohuochai/archive/2016/05/05/5459587.html 三栏式布局(所谓的圣杯和双飞翼) （圣杯布局来源于a list apart里面的In Search of the Holy Grail。双飞翼布局则是淘宝为了避免使用relative，通过增加html结构的改进版布局。） 2016-5-5
http://www.dqqd.me/avatar/fly/grids_test1.html 例1234
<style type="text/css"> html,body{margin:0;} div{border:1px solid #000;box-sizing:border-box;height:300px;} .main {position:relative;float:left;background:#ddd;width:100%;} .left {position:relative;float:left;background:#f90;width:200px;margin-left:-100%;left:-200px;} .right {position:relative;float:left;background:#09f;width:160px;margin-left:-160px;right:-160px;} #bd {padding: 0 160px 0 200px;} </style> <div id="bd"> <div class="main">123 456 789 </div> <div class="left">左</div> <div class="right">右</div> </div>
这个易于理解：
<style type="text/css"> div{border:1px solid #000;box-sizing:border-box;} .box{position:relative;} .left{position:relative;float:left;width:250px;margin-right:-250px;z-index:2;}/*左侧栏*/ .right{position:relative;float:right;width:200px;margin-left:-200px;z-index:2;}/*右侧栏*/ .main{position:relative;float:left;width:100%;padding:0 200px 0 250px;z-index:1;}/*中间列自适应布局*/ </style> <div class="box"> <div class="left"> <p>左侧定宽</p><p>左侧定宽</p><p>左侧定宽</p><p>左侧定宽</p> </div> <div class="main"> <p>中间自适应</p><p>中间自适应</p><p>中间自适应</p><p>中间自适应</p><p>中间自适应</p> </div> <div class="right"> <p>右侧定宽</p><p>右侧定宽</p><p>右侧定宽</p> </div> </div>
图片列表布局： （4列）不支持ie7 2015-11-23
<style type="text/css"> ul,li,p{list-style:none;padding:0;margin:0;font-family:\'Microsoft Yahei\';} .main{width:720px;background:#f0f0f0;} .box{width:101%;margin-right:4%;overflow:auto;} li{float:left;box-sizing:border-box;border:1px solid #999;width:24%;margin-right:1%;margin-bottom:2%;} /* .box{width:102%;margin-right:4%;overflow:auto;} li{float:left;box-sizing:border-box;border:1px solid #999;width:23%;margin-right:2%;margin-bottom:2%;} .box{width:103%;margin-right:4%;overflow:auto;} li{float:left;box-sizing:border-box;border:1px solid #999;width:22%;margin-right:3%;margin-bottom:2%;} */ .box img{width:100%;height:150px;} .box p{text-align:center;line-height:3;font-size:14px;} </style> <div class="main"> <ul class="box"> <li><img src=""><p>啊啊啊</p></li> <li><img src=""><p>啊啊啊</p></li> <li><img src=""><p>啊啊啊</p></li> <li><img src=""><p>啊啊啊</p></li> <li><img src=""><p>啊啊啊</p></li> <li><img src=""><p>啊啊啊</p></li> <li><img src=""><p>啊啊啊</p></li> <li><img src=""><p>啊啊啊</p></li> </ul> </div>
图片布局（4列），（仿天猫商品列表页）： 2015-11-23
<style type="text/css"> ul,li,p{list-style:none;padding:0;margin:0;font-family:\'Microsoft Yahei\';} .main{width:1190px;margin-left:auto;margin-right:auto;background:#f0f0f0;} .clearfix:after {content:\'\';display:block;height:0;overflow:hidden;clear:both;} /*公用*/ .product {position:relative;float:left;background:#fff;line-height:1.5;overflow:visible;z-index:1;} .product:hover{overflow:visible;z-index:3;} .product:hover .iwrap { margin:-3px; border:4px solid #f83760; -webkit-transition:border-color .2s ease-in; -moz-transition:border-color .2s ease-in; -ms-transition:border-color .2s ease-in; -o-transition:border-color .2s ease-in; transition:border-color .2s ease-in; } .iwrap {display:block;position:absolute;background:#fff;left:0;top:0;right:0;bottom:0;border:1px solid #ececec;box-sizing:content-box;} .iwrap img{width:100%;margin-bottom:10px;} .iwrap p{margin-left:10px;margin-right:10px;color:#333;text-align:center;} /*私用定制部分*/ .product{width:282px;height:333px;margin-right:20px;margin-bottom:20px;}/*图片是280x210*/ .product-box{width:1208px;margin-right:-20px;}/*宽度是4个（容器+margin-right）的宽度之和*/ .iwrap img{height:210px;} </style> <div class="main j02 clearfix"> <div class="product-box clearfix"> <div class="product"><a href="" class="iwrap"><img src=""><p>啊啊啊</p></a></div> <div class="product"><a href="" class="iwrap"><img src=""><p>啊啊啊</p></a></div> <div class="product"><a href="" class="iwrap"><img src=""><p>啊啊啊</p></a></div> <div class="product"><a href="" class="iwrap"><img src=""><p>啊啊啊</p></a></div> <div class="product"><a href="" class="iwrap"><img src=""><p>啊啊啊</p></a></div> <div class="product"><a href="" class="iwrap"><img src=""><p>啊啊啊</p></a></div> <div class="product"><a href="" class="iwrap"><img src=""><p>啊啊啊</p></a></div> <div class="product"><a href="" class="iwrap"><img src=""><p>啊啊啊</p></a></div> </div> </div>
版权声明：本文为qq21270原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。