html瀑布流

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title>qdabc.cn</title>
        <style type="text/css">
            *{
                /*padding: 0;*/
                /*margin: 0;*/
                /*border: none;*/
                
                /*box的内外边距不影响正常的box 的width*/
                /*可以达到设置宽度是多少,盒模型就是多少是效果*/
                box-sizing: border-box;
            }
            h1{
                width: 100%;
                height: 60px;
                margin: 0;
                line-height: 60px;
                background-color: whitesmoke;
                box-shadow: 0 2px 2px 0 lightblue;
                position: fixed;
                top: 0;
                left: 0;
                /*文本居中*/
                text-align: center;
            }
            .pic{
                margin: 70px auto;
                column-count: 3;
                /*-moz 火狐浏览器*/
                -moz-column-count: 3;
                /*-web 谷歌*/
                -webkit-column-count: 3;
                
                column-gap: 10px;
                -moz-column-gap: 10px;
                -webkit-column-gap: 10px;
            }
            
            .pic li{
                list-style: none;
                margin-top: 5px;
            }
            .pic li img{
                width: 100%;
                height: 800px;
            }
        </style>
    </head>
    <body>
        <!--ul.pic>(li>img[src=img/$.jpg])*29-->
        <h1>图片瀑布流</h1>
        <ul class="pic">
            <li><img src="img/1.jpg" alt="" /></li>
            <li><img src="img/2.jpg" alt="" /></li>
            <li><img src="img/3.jpg" alt="" /></li>
            <li><img src="img/4.jpg" alt="" /></li>
            <li><img src="img/5.jpg" alt="" /></li>
            <li><img src="img/6.jpg" alt="" /></li>
            <li><img src="img/7.jpg" alt="" /></li>
            <li><img src="img/8.jpg" alt="" /></li>
            <li><img src="img/9.jpg" alt="" /></li>
            <li><img src="img/10.jpg" alt="" /></li>
            <li><img src="img/11.jpg" alt="" /></li>
            <li><img src="img/12.jpg" alt="" /></li>
            <li><img src="img/13.jpg" alt="" /></li>
            <li><img src="img/14.jpg" alt="" /></li>
            <li><img src="img/15.jpg" alt="" /></li>
            <li><img src="img/16.jpg" alt="" /></li>
            <li><img src="img/17.jpg" alt="" /></li>
            <li><img src="img/18.jpg" alt="" /></li>
            <li><img src="img/19.jpg" alt="" /></li>
            <li><img src="img/20.jpg" alt="" /></li>
            <li><img src="img/21.jpg" alt="" /></li>
            <li><img src="img/22.jpg" alt="" /></li>
            <li><img src="img/23.jpg" alt="" /></li>
            <li><img src="img/24.jpg" alt="" /></li>
            <li><img src="img/25.jpg" alt="" /></li>
            <li><img src="img/26.jpg" alt="" /></li>
            <li><img src="img/27.jpg" alt="" /></li>
            <li><img src="img/28.jpg" alt="" /></li>
            <li><img src="img/29.jpg" alt="" /></li>
        </ul>
    </body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » html瀑布流

赞 (2)
分享到:更多 ()

发表评论 0