![](_script:Site.hoverQrCode("//28118246.s21i.faiusr.com/2/ABUIABACGAAg6ujAlQYo_NfwIzCUATiTAQ.jpg",this,{"tips":"請(qǐng)使用微信掃一掃"});)
企業(yè)網(wǎng)站制作中如何實(shí)現(xiàn)圖文瀑布流的展現(xiàn)樣式發(fā)表時(shí)間：2023-01-11 09:06 什么是網(wǎng)頁(yè)瀑布流布局？在企業(yè)網(wǎng)站制作時(shí)，瀑布流簡(jiǎn)單來(lái)說(shuō)就是網(wǎng)頁(yè)列表數(shù)據(jù)會(huì)根據(jù)列表內(nèi)容高度自動(dòng)從左到右，從上而下進(jìn)行內(nèi)容排列，同時(shí)瀑布流的另一個(gè)優(yōu)勢(shì)就是會(huì)根據(jù)屏幕寬度自動(dòng)適應(yīng)寬度變化。由于傳統(tǒng)的浮動(dòng)布局或者行內(nèi)元素布局塊元素單獨(dú)成行，會(huì)導(dǎo)致元素上下之間出現(xiàn)大量留白。而且如果用純css來(lái)實(shí)現(xiàn)瀑布流布局不需要大量的代碼，使用css僅僅幾行的樣式就可以實(shí)現(xiàn)網(wǎng)頁(yè)的瀑布流布局。 以下html代碼就是網(wǎng)站制作中實(shí)現(xiàn)css瀑布流的文檔，大家可以直接進(jìn)行模仿。 <!DOCTYPE html> <head> <title>CSS3瀑布流</title> <style> /*大層瀑布流大盒子*/ .container{width:50%;margin: 30px auto;} /*瀑布流布局樣式*/ .waterfall{ column-count:2; } /*每一個(gè)列表的內(nèi)容樣式*/ .item{ padding: 1em; margin:1em; break-inside: avoid; border: 2px solid #000; } .item img{ width: 100%; } </style> </head> <body> 掌握點(diǎn)： 1、column-count 該css屬性把大盒子內(nèi)的列表共分為兩列 2、break-inside: avoid; 避免元素內(nèi)部斷行并產(chǎn)生新列 <div class="container"> <ul class="waterfall"> <li class="item"> <img src="https://www.up7.com.cn/static/upload/image/20191206/1575621441196155.jpg"> <p>我是網(wǎng)站制作中瀑布流布局內(nèi)容，在這里使用css樣式來(lái)實(shí)現(xiàn)而不需要復(fù)雜的js代碼，這種瀑布流在網(wǎng)站制作中可是使用的很普遍</p> </li> <li class="item"> <img src="https://www.up7.com.cn/static/upload/image/20191206/1575621264885111.jpg"> <p>我是網(wǎng)站制作中瀑布流布局內(nèi)容，僅僅使用css樣式來(lái)實(shí)現(xiàn)的呦</p> </li> <li class="item"> <img src="https://www.up7.com.cn/static/upload/image/20191206/1575621441196155.jpg"> <p>我是網(wǎng)站制作中瀑布流布局內(nèi)容</p> </li> <li class="item"> <img src="https://www.up7.com.cn/static/upload/image/20191206/1575621264885111.jpg"> <p> 我是網(wǎng)站制作中瀑布流布局內(nèi)容，這里面的內(nèi)容是用來(lái)填充的里面高度的</p> </li> <li class="item"> <img src="https://www.up7.com.cn/static/upload/image/20191206/1575621441196155.jpg"> <p>我是網(wǎng)站制作中瀑布流布局內(nèi)容，為了更直觀的顯示，大家可以直接復(fù)制上面的這些html+css代碼，放在空白文檔中進(jìn)行測(cè)試，這里的文字只是為了撐起內(nèi)容的高度。</p> </li> </ul> </div> </body> </html> 做公司網(wǎng)站時(shí)，常用的網(wǎng)頁(yè)瀑布流展示方式就是這樣通過(guò)簡(jiǎn)單的css樣式來(lái)進(jìn)行實(shí)現(xiàn)的。
文章分類：
優(yōu)化知識(shí)
|
