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 效果没有出现,不知道什么原因,各位知道请指点指点!

  • 相关阅读:
    Win7 64位系统上Hadoop单机模式的安装及开发环境搭建
    HBase配置文件设置
    YARN HA 配置文件设置
    Hadoop的配置文件设置(HDFS HA)
    记一次java heap space的解决办法
    记一次sql优化——left join不走索引问题
    js黑魔法
    css坑了我一下下之line-height
    target-densitydpi=device-dpi会使其他ui插件布局变小
    redis缓存过期key优化-缓存不释放
  • 原文地址:https://www.cnblogs.com/SoulCode/p/5573409.html
Copyright © 2011-2022 走看看