代码：页面布局（含图片列表布局）

 一、区块布局：

<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>