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

  • 相关阅读:
    iOS动画(一)coreAnimation 教程(转)
    sdwebimage基本用法及原理
    iOS推送
    Objective-C中的Block
    loadView、viewDidLoad、initWithCoder、initWithNibName、awakeFromNib的调用时间及用法
    提纲挈领-我的博客内容架构(持续更新)
    读过的书籍及思考系列 (详细列表)-持续更新
    看过的影视及思考系列(详细列表)-持续更新
    自学笔记系列:《Python学习手册 第五版》 -写在开始之前
    《Python网络爬虫权威指南 第二版》 -第1章 软件及BeautifulSoup库准备
  • 原文地址:https://www.cnblogs.com/SoulCode/p/5573409.html
Copyright © 2011-2022 走看看