欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css實現(xiàn)瀑布流空白處背景粉色背景塊

  發(fā)布時間：2013-02-22 11:50:23   作者：佚名   我要評論
css實現(xiàn)瀑布流空白處背景粉色背景塊，需要的朋友可以參考一下

css實現(xiàn)粉色背景塊，效果如下：

css：

復制代碼
代碼如下:

.listbox {
position: relative;
width: 1000px;
margin: 20px auto;
overflow: hidden;
}
.listbox ul {
float: left;
width: 240px;
margin-right: 10px;
background: #ffebf9; /*粉色背景（也可使用能重復的背景圖片）*/
padding-bottom: 9000px; /*列之間的差距，建議設大一些*/
margin-bottom: -9010px; /*公式：padding-bottom + 塊與塊的間距 */
}
.listbox li {
background: #fff; /*覆蓋ul粉色背景*/
padding-bottom: 10px; /*塊與塊的間距*/
}
.listbox li .img {
width: 238px;
padding: 15px 0px;
text-align: center;
background: #fff;
border: 1px solid #F5EDE3;
}

html：


復制代碼
代碼如下:

<div class="listbox">
<ul>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i6/T1TY_lXoVoXXagOFbX_210x1000.jpg" width="210">
</div>
</li>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i5/T1BVH5Xc0XXXb1upjX_210x1000.jpg" width="210">
</div>
</li>
</ul>
<ul>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i8/T1_7YDXcpnXXagOFbX_210x1000.jpg" width="210">
</div>
</li>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i6/T1coXeXp0dXXb1upjX_210x1000.jpg" width="210">
</div>
</li>
</ul>
<ul>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i8/T1J_fMXnBoXXb1upjX_210x1000.jpg" width="210">
</div></p> <p> </li>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i8/T1dDvoXmhfXXagOFbX_210x1000.jpg" width="210">
</div>
</li>
</ul>
<ul>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i4/T1wR3dXgdfXXb1upjX_210x1000.jpg" width="210">
</div>
</li>
<li>
<div class="img">
<img src="http://localhost/bao/uploaded/i7/T11cPkXlJlXXagOFbX_210x1000.jpg" width="210">
</div>
</li>
</ul>
</div>

上面的方法只適合縱向布局并且背景是純色或者可重復的背景圖片。

橫向布局可以把背景切成這么一張然后平鋪（灰色為列之間的間距）：


復雜的背景塊無論縱向布局還是橫向布局都需要嵌套，需求不同嵌套的位置也可不一樣，在這就不舉例了。

大家可以根據(jù)自己的需求想一下(*^__^*) ……

相關文章

最新評論