欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 >建站经验 >Css&Div > CSS3 瀑布流布局演示

CSS3 瀑布流布局演示

2018-08-31 187 收藏 0 赞一个 0 真差劲 0 去评论

基于CSS3的瀑布流布局效果演示,瀑布流貌似现在比较火,最近用CSS3试着研究了一番,测试时候请使用火狐或chrome或世界之窗浏览器,若要使用IE浏览器查看本效果,请使用IE9以下版本的浏览器。

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style>
        .container{
                -webkit-column-width:160px;
                -moz-column-width:160px;
                -o-colum-width:160px;
                -webkit-column-gap:1px;
                -moz-column-gap:1px;
                -o-column-gap:1px;
        }
        div:not(.container){
                -webkit-border-radius:5px;
                -moz-border-radius:5px;
                border-radius:5px;
                background:#D9D9D9;
                border::#CCC 1px solid;
                display:inline-block;
                width:157px;
                position:relative;
                margin:2px;
        }
        .title{
                 line-height:80px; font-size:18px; color:#900;
                 text-align:center;
                 font-family:"Microsoft YaHei";
        }
</style>
</head>
<body>
<section>
        <div class="container">
            <div style="height:80px" class="title">纯CSS3瀑布布局</div>
        <div style="height:260px"></div>
        <div style="height:65px"></div>
        <div style="height:120px"></div>
        <div style="height:145px"></div>
        <div style="height:90px"></div>
        <div style="height:145px"></div>
        <div style="height:160px"></div>
        <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>
        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
              <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>
        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
        <div style="height:145px"></div>
        <div style="height:160px"></div>
        <div style="height:240px"></div>
    </div>
</section>
</body>
</html>

效果如图:

QQ截图20180831110216.jpg

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站所有资源(包括模板、素材、软件、字体等)仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论
分享是个好习惯