zoukankan      html  css  js  c++  java
  • css3瀑布流

    css3瀑布流

    <!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>  
  • 相关阅读:
    Running APP 使用说明
    Android 控件八 WebView 控件
    Android 控件七 ImageView 控件
    Android 控件六 CheckBox 控件
    Android 控件五 RadioButton 控件
    Android 控件四 EditText 控件
    Android 控件三 TextView 控件实现 Button
    Android 控件二 Button
    Android 基础控件演示实例
    Android 控件一 TextView
  • 原文地址:https://www.cnblogs.com/wzzl/p/5216124.html
Copyright © 2011-2022 走看看