zoukankan      html  css  js  c++  java
  • CSS动画-多列

      1.CSS3中可以创建多列来对文本或者区域进行布局

      2.属性:

        column-count 文本列

        column-gap 文本宽度

        column-rule 文本线条

      3.下面是个例子:

       在.html文件中:

      

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>动画</title>
     6     <link rel="stylesheet" type="text/css" href="style05.css">
     7 </head>
     8 <body>
     9     <div class="div1">
    10         大家好,欢迎来到人间地狱
    11         大家好,欢迎来到人间地狱
    12         大家好,欢迎来到人间地狱
    13         大家好,欢迎来到人间地狱
    14         大家好,欢迎来到人间地狱
    15         大家好,欢迎来到人间地狱
    16         大家好,欢迎来到人间地狱
    17         大家好,欢迎来到人间地狱
    18         大家好,欢迎来到人间地狱
    19         大家好,欢迎来到人间地狱
    20         大家好,欢迎来到人间地狱
    21         大家好,欢迎来到人间地狱
    22         大家好,欢迎来到人间地狱
    23         大家好,欢迎来到人间地狱
    24         大家好,欢迎来到人间地狱
    25         大家好,欢迎来到人间地狱
    26         大家好,欢迎来到人间地狱
    27         大家好,欢迎来到人间地狱
    28         大家好,欢迎来到人间地狱
    29         大家好,欢迎来到人间地狱
    30         大家好,欢迎来到人间地狱
    31         大家好,欢迎来到人间地狱
    32         大家好,欢迎来到人间地狱
    33         大家好,欢迎来到人间地狱
    34         大家好,欢迎来到人间地狱
    35         大家好,欢迎来到人间地狱
    36         大家好,欢迎来到人间地狱
    37         大家好,欢迎来到人间地狱
    38         大家好,欢迎来到人间地狱
    39         大家好,欢迎来到人间地狱
    40         大家好,欢迎来到人间地狱
    41         大家好,欢迎来到人间地狱
    42         大家好,欢迎来到人间地狱
    43         大家好,欢迎来到人间地狱
    44         大家好,欢迎来到人间地狱
    45         大家好,欢迎来到人间地狱
    46         大家好,欢迎来到人间地狱
    47         大家好,欢迎来到人间地狱
    48         大家好,欢迎来到人间地狱
    49         大家好,欢迎来到人间地狱
    50         大家好,欢迎来到人间地狱
    51         大家好,欢迎来到人间地狱
    52         大家好,欢迎来到人间地狱
    53         大家好,欢迎来到人间地狱
    54         大家好,欢迎来到人间地狱
    55         大家好,欢迎来到人间地狱
    56         大家好,欢迎来到人间地狱
    57         大家好,欢迎来到人间地狱
    58         大家好,欢迎来到人间地狱
    59         大家好,欢迎来到人间地狱
    60         大家好,欢迎来到人间地狱
    61         大家好,欢迎来到人间地狱
    62         大家好,欢迎来到人间地狱
    63         大家好,欢迎来到人间地狱
    64         大家好,欢迎来到人间地狱
    65         大家好,欢迎来到人间地狱
    66         大家好,欢迎来到人间地狱
    67         大家好,欢迎来到人间地狱
    68         大家好,欢迎来到人间地狱
    69         大家好,欢迎来到人间地狱
    70         大家好,欢迎来到人间地狱
    71         大家好,欢迎来到人间地狱
    72         大家好,欢迎来到人间地狱
    73         大家好,欢迎来到人间地狱
    74         大家好,欢迎来到人间地狱
    75         大家好,欢迎来到人间地狱
    76         大家好,欢迎来到人间地狱
    77         大家好,欢迎来到人间地狱
    78         大家好,欢迎来到人间地狱
    79         大家好,欢迎来到人间地狱
    80         大家好,欢迎来到人间地狱
    81         大家好,欢迎来到人间地狱
    82         大家好,欢迎来到人间地狱
    83         大家好,欢迎来到人间地狱
    84         大家好,欢迎来到人间地狱
    85         大家好,欢迎来到人间地狱
    86         大家好,欢迎来到人间地狱
    87         大家好,欢迎来到人间地狱
    88         大家好,欢迎来到人间地狱
    89         大家好,欢迎来到人间地狱
    90     </div>
    91 </body>
    92 <html/>

    在.css文件中:

     1 .div1{
     2     -webkit-column-count:4;
     3     -moz-column-count:4;
     4     column-count:4;
     5     -webkit-column-gap: 50px;
     6     -moz-column-gap: 50px;
     7     column-gap: 50px;
     8     column-rule:5px outset #FF0000;  /**/
     9     -webkit-column-rule:5px outset #FF0000;
    10 }

      运行结果:

      

    注意:column-rule 效果没有出现,不知道什么原因,各位知道请指点指点!

  • 相关阅读:
    12 Source Code Profilers for C & C++
    HttpWebRequest的使用方法
    MSDN Windows 下载
    Qt 4.7 在VS2010环境下的编译
    [转].NET Logging Tools and Libraries
    硬盘崩溃之后
    .net core 下使用 logdashboard 日志面板
    工具收藏 年终工作总结必备工具之ppt利器
    Dapper 的应用和Dapper.Contrib 的方法封装(一)
    Dapper 的应用和Dapper.Contrib 的方法封装(二)
  • 原文地址:https://www.cnblogs.com/SoulCode/p/5573409.html
Copyright © 2011-2022 走看看