亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

css:

復(fù)制代碼
代碼如下:

.listbox {
position: relative;
width: 1000px;
margin: 20px auto;
overflow: hidden;
}
.listbox ul {
float: left;
width: 240px;
margin-right: 10px;
background: #ffebf9; /*粉色背景(也可使用能重復(fù)的背景圖片)*/
padding-bottom: 9000px; /*列之間的差距,建議設(shè)大一些*/
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:


復(fù)制代碼
代碼如下:

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

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

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


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

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

相關(guān)文章

最新評論