zoukankan      html  css  js  c++  java
  • CSS3 column属性

    css3 column属性的应用

    1、案例源码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>CSS3 columns 属性</title>
    <style>
    *{margin: 0;padding: 0}
    .container{
    1000px;
    margin: 5px auto;
    column-count: 4;-webkit-column-count: 4;-moz-column-count: 4;
    column-gap: 30px;-webkit-column-gap: 30px;-moz-column-gap: 30px;
    column-rule- 5px;-webkit-column-rule- 5px;-moz-column-rule- 5px;
    column-rule-style: outset;-webkit-column-rule-style: outset;-moz-column-rule-style: outset;
    column-rule-color: #ff0000;-webkit-column-rule-color: #ff0000;-moz-column-rule-color:#ff0000;
    }
    </style>
    </head>
    <body>
    <div class="container">
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    欢迎您欣赏我的博客,希望您能获得意想不到收获。欢迎您欣赏我的博客,希望您能获得意想不到收获。
    </div>
    </body>
    </html>

    2、案例效果

     

  • 相关阅读:
    懒人的gitlab安装
    SuperFish插件实现鼠标停留浮动的菜单栏.
    Bootstrap I
    京东首页样式分析.
    CentOs装VLC
    TI CC2541的通讯抓包.
    ffmpeg+ffserver实现摄像头直播
    arm linux上的第一个应用程序 BOA移植
    linux内核移植 I
    uboot启动参数
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/7391565.html
Copyright © 2011-2022 走看看