鄭州網站建設,鄭州網站制作,鄭州做網站,鞏義網站建設,滎陽網站建設,偃師網站制作-全棧網絡

                              鄭州網站制作中如何用純css實現列表瀑布流布局?
                              當前位置:首頁 > 建站技巧 > 網站代碼 >

                              鄭州網站制作中如何用純css實現列表瀑布流布局?

                              時間: 2018-10-08 分類: 網站代碼 瀏覽次數:

                              在網站制作中,瀑布流布局的使用在近兩年網頁制作中使用越來越多,比如常見的app,微信小程序中經常會使用到,今天全棧網絡教大家如何僅僅通過css3來實現瀑布流列表的效果,從而...

                              在網站制作中,瀑布流布局的使用在近兩年網頁制作中使用越來越多,比如常見的app,微信小程序中經常會使用到,今天全棧網絡教大家如何僅僅通過css3來實現瀑布流列表的效果,從而避免使用大量javascript代碼來實現。

                              鄭州網站制作中如何用純css實現列表瀑布流布局?
                               
                              什么是網頁瀑布流布局?
                              瀑布流簡單來說就是網頁列表數據會根據列表內容高度自動從左到右,從上而下進行內容排列,同時瀑布流的另一個優勢就是會根據屏幕寬度自動適應寬度變化。由于傳統的浮動布局或者行內元素布局塊元素單獨成行,會導致元素上下之間出現大量留白。

                              為什么要用純css來實現瀑布流布局?
                              不同于javascript瀑布流實現中出現的大量代碼,純css可以僅僅通過幾行的樣式寫法來實現列表瀑布流布局。

                              css瀑布流具體如何實現?
                              以下html代碼就是網站制作中實現css瀑布流的文檔,大家可以直接進行模仿。

                              <!DOCTYPE html>
                              <head>
                                  <title>CSS3瀑布流</title>
                                  <style>
                                  /*大層瀑布流大盒子*/
                                  .container{width:50%;margin: 30px auto;}
                                  /*瀑布流布局樣式*/
                                  .waterfall{ column-count:2; }
                                  /*每一個列表的內容樣式*/
                                  .item{  padding: 1em;  margin:1em; break-inside: avoid;  border: 2px solid #000; }
                                  .item img{ width: 100%; }
                                  </style>
                              </head>
                              <body>
                              掌握點:
                              1、column-count 該css屬性把大盒子內的列表共分為兩列
                              2、break-inside: avoid; 避免元素內部斷行并產生新列
                                    <div class="container">
                                        <ul class="waterfall">
                                          <li class="item">
                                              <img src="http://www.ouw.tw/uploads/allimg/181008/1-1Q00P15452324.jpg">
                                              <p>我是網站制作中瀑布流布局內容,在這里使用css樣式來實現而不需要復雜的js代碼,這種瀑布流在網站制作中可是使用的很普遍</p>
                                          </li>
                                          <li class="item">
                                              <img src="http://www.ouw.tw/uploads/allimg/181008/1-1Q00P15452324.jpg">
                                              <p>我是網站制作中瀑布流布局內容,僅僅使用css樣式來實現的呦</p>
                                          </li>
                                          <li class="item">
                                              <img src="http://www.ouw.tw/uploads/allimg/181008/1-1Q00P15452324.jpg">
                                              <p>我是網站制作中瀑布流布局內容</p>
                                          </li>
                                          <li class="item">
                                              <img src="http://www.ouw.tw/uploads/allimg/181008/1-1Q00P15452324.jpg">
                                              <p> 我是網站制作中瀑布流布局內容,這里面的內容是用來填充的里面高度的</p>
                                          </li>
                                          <li class="item">
                                              <img src="http://www.ouw.tw/uploads/allimg/181008/1-1Q00P15452324.jpg">
                                              <p>我是網站制作中瀑布流布局內容,為了更直觀的顯示,大家可以直接復制上面的這些html+css代碼,放在空白文檔中進行測試,這里的文字只是為了撐起內容的高度。</p>
                                          </li>
                                        </ul>
                                      </div>
                              </body>
                              </html>


                              以上就是在鄭州網站制作中,常用的網頁瀑布流展示方式如何通過簡單的css樣式進行實現,全棧網絡專業從事鄭州網站制作,淘寶裝修,歡迎大家隨時來電咨詢。

                              本文關鍵詞: 瀑布流 未經允許不得轉載:鄭州網站建設|鄭州網站制作|滎陽網站建設|鞏義網站建設|網站優化-全棧網絡



                              Copyright ? 2017-2020 版權所有:全棧網絡工作室 備案號:豫ICP備17039206號-1 HTML網站地圖
                              鄭州網站建設|鄭州網站制作|鄭州做網站|鞏義網站制作|滎陽做網站|偃師網站制作-全棧網絡
                              彩票中奖的真实案例