• css3多列显示


    columen-定义单列显示的宽度。初始值是auto,适用于不可替代的块级元素,行内块元素和单元格,表格元素除外。

                          目前Webkit引擎支持-webkit-column-width,Mozilla Gecko引擎支持 -moz-column-width;

                         作用:如果页面内容能够在单列显示就在单列显示,如果页面宽度足够宽,就多列显示。

    column-count:

                          定义单列显示列数。初始值是auto,适用于不可替代的块级元素,行内块元素和单元格,表格元素除外。

                          目前Webkit引擎支持-webkit-column-count,Mozilla Gecko引擎支持 -moz-column-count;

                         作用:无论浏览器页面宽度是多少,始终都按照定义的列数显示。

    column-gap:

                          定义列的间距。初始值是normal(1em),适用于不可替代的块级元素,行内块元素和单元格,表格元素除外。

                          目前Webkit引擎支持-webkit-column-gap,Mozilla Gecko引擎支持 -moz-column-gap;

                         作用:定义列之间的距离。

    column-rule:<length>|<style>|<color>|<transparent>(边框透明度)

                           定义列边框的样式。适用于不可替代的块级元素,行内块元素和单元格,表格元素除外。

                          目前Webkit引擎支持-webkit-column-rule,Mozilla Gecko引擎支持 -moz-column-rule;

                         作用:定义列边框的样式。

                例如:虚线灰色边框

                      -webkit-column-rule:dashed 1px gray;
                       -moz-column-rule:dashed 1px gray;
                        column-rule:dashed 1px gray;

    column-span:定义跨列显示  初始值1 适用于静态的、飞浮动元素。all 值横跨所有列,并定位在列Z轴上。

                        目前Webkit引擎支持-webkit-column-span,Mozilla Gecko引擎支持 -moz-column-span;

    column-fill:定义列高 初始值balance:适用于多列布局元素,各列的高度会根据内容最多的那一行的高度进行统一。

                      auto:各列的高度随其内容的变化而自动变化。

                      目前Webkit引擎支持-webkit-column-fill,Mozilla Gecko引擎支持 -moz-column-fill;

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>css3多列显示</title>
    <style type="text/css" media="screen">
    body{
    /*定义列宽为300像素,则网页中每个栏目的最大宽度为300px*/
    -webkit-column- 300px;
    -moz-column-300px;
    column-300px;
    }

    h1{color:#333333;padding:5px 8px;font-size:20px;text-align:center;padding:12px;

    /*跨列显示*/
    -webkit-column-span:all;
    -moz-column-span:all;
    column-span:all;
    }
    h2{font-size:16px;text-align:center;
    /*跨列显示*/
    -webkit-column-span:all;
    -moz-column-span:all;
    column-span:all;
    }


    p{color:#333333;font-size:14px;line-height:180%;text-indent:2em;}
    </style>
    </head>
    <body>
    <h1>《管道的故事》</h1>
    <h2>贝克.哈吉斯</h2>
    <p>
    在新经济里,如何让一个人都可以建立一个持续世袭收入的管道?你可以成为邻家的百万富
    翁!
    亲爱的读者:
    一百年前,普通人几乎不可能成为百万富翁。来看看这份在20世纪所做的生活水平状况调查
    统计:在1900年,美国的平均薪水是每小时0。22美元,一般工人的年收入在200美元至多400
    美元之间,处于当时的贫困线下。那时全美只有6%的高中毕业,平均寿命47岁。只有14%的家
    庭拥有浴缸。全美只有8000部汽车,铺好的路面也只有144英里。直到第一次世界大战时,美
    国普通家庭将收入的80%用在食物、住房、穿衣等基本需求上。
    总的来说,100年前基本上只有两个经济阶层:富有阶层和其他阶层。10个家庭中只有一个
    是富有阶层。他就是说,在1900年美国有90%的人被划分为贫困阶层。
    中产阶级依然靠工资生活
    现将镜头从百年前转向2001年。
    现在,一般家庭的收入为47000美元。小汽车的数目超过了人口数目。大多数家庭至少拥有
    二部电视。寿命长至75岁。现在,一般人有比以前更多可支配的收入,有更多的空余时间,有
    更多的职业选择。
    然而全美约7200万家庭的大部份依然靠工资生活。
    除去家里住房、车及家具,一般的家庭资产为零。零!当收入增加时,家庭负债在增加,工
    作时间也在增加。
    哪里出了错?
    你是否加入了一个错误的系统?
    问题在于许多人加入了一个错误的计划当中。他们进入了一个错误的系统,缺乏如何建立和
    积累财富的基本知识。
    今天我要做一个或许会让你震惊的大胆声明。但这是绝对真实,且豪不含糊的。准备好了吗?
    简单的、无须修饰的事实就是,今天,成为一名百万富翁是一种选择,而非机会。
    是真的——今天,任何一个有中产阶级收入的人都可以成为一名百万富翁。不可能?不。事实上,
    它很简单。
    如果你今天想成为一名百万富翁,你所需要做的只是跟随以下三个步骤:
    1. 明白财富是如何建立和积累的;
    2. 复制已经被认实的建立财富的系统;
    3. 在一段时间内持续不懈;
    就这么多。这就是普通人积累百万资产所需要做的:认识、复制、坚持。
    </p>
    </body>
    </html>

  • 相关阅读:
    关于研发核心团队建设的一些思考
    无法打开物理文件xxx.mdf操作系统错误 5:“5(拒绝访问。)” (Microsoft SQL Server,错误: 5120)的解决方法
    自适应网页设计(Responsive Web Design)
    css浮动与绝对定位小记
    WEB进度条控件
    GitHub上整理的一些工具
    雾里看花般的迷茫--货运APP
    揭秘史上最完美一步到位的搭建Andoriod开发环境
    我是如何在SQLServer中处理每天四亿三千万记录的
    货运APP产品魔力=卓越功能×情感诉求
  • 原文地址:https://www.cnblogs.com/jalja/p/4205709.html
Copyright © 2020-2023  润新知