CSS3多列

通过CSS3 我们能够创建多个列来对文本进行布局。

在这篇文章中 你将了解到如下多列属性：

column-count

column-gap

column-rule

浏览器支持：

多列的属性：

实例：

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .newspaper {

                /*要分成的列数*/

                column-count: 3;

                /*每列之间的艰巨*/

                column-gap: 40px;

                column-rule: 4px outset red;

            }

            .newspaper {

                animation: ruleAnimation 2s linear 0s infinite;

            }

            @keyframes ruleAnimation{

                from{column-rule-color:red;}

                to{column-rule-color: blue;}

            }

        </style>

    </head>

    <body>

        <div class="newspaper">

            人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日

            零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全

            国平均）每升零售价格分别提高0.22元和0.25元。

            此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，

            根据国际市场油价变化情况确定的。去年11月16日国内成品油价格

            调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡

            等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期

            货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，

            但国内油价挂钩的国际市场三种原油连续22个工作

            日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。

            通知指出，这次成品油调价后，国家将按照已建立的补贴机

            制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公

            交、农村道路客运（含岛际和农村水路客运）等给予补贴。

            同时，为保证市场物价基本稳定，防止连锁涨价，对与居民

            生活密切相关的铁路客运、城市公交、农村道路客运（

            含岛际和农村水路客运）价格不作调整。

            通知要求，中石油、中石化、中海油三大公司要组织好成品

            持合理库存，加强综合协调和应急调度，保障成品油供应。

            各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政

            策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正

            常市场秩序。

        </div>

    </body>

</html>

HTML 学习笔记 CSS3 (多列)的更多相关文章

  1. SQL反模式学习笔记8 多列属性

    目标:存储多值属性 反模式:创建多个列.比如一个人具有多个电话号码.座机号码.手机号码等. 1.查询:多个列的话,查询时可能不得不用IN,或者多个OR: 2.添加.删除时确保唯一性.判断是否有值:这些 ...

  2. SQL反模式学习笔记11 限定列的有效值

    目标:限定列的有效值,将一列的有效字段值约束在一个固定的集合中.类似于数据字典. 反模式:在列定义上指定可选值 1. 对某一列定义一个检查约束项,这个约束不允许往列中插入或者更新任何会导致约束失败的值 ...

  3. css3学习笔记之多列

    CSS3 创建多列 column-count 属性指定了需要分割的列数. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!D ...

  4. HTML 学习笔记 CSS3(Animation)

    CSS3动画: 通过CSS3 我们能够创建动画 这可以在许多网页中取代动画图片 Flash动画 以及JavaScript. CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 ...

  5. HTML 学习笔记 CSS3(过度 transition)

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...

  6. 学习笔记：MySQL列属性

    列属性 a)         null|not null 缺省值是null,也就是允许为空,如果是not null而又没有给该字段赋值的话,系统会首先查询该字段有没有默认值 b)         de ...

  7. HTML 学习笔记 CSS3 (2D Matrix)

    Matrix 矩阵 那么什么是矩阵呢? 矩阵可以理解为方阵,只不过 平时方阵里面站着人 矩阵中是数值: CSS3中的矩阵: css3中的矩阵指的是一个方法,书写为matrix() 和 matrix3d ...

  8. HTML 学习笔记 CSS3 (2D转换)

    2.scaleX(<number>) : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数.scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在 ...

  9. HTML 学习笔记 CSS3 (文本效果)

    text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...

随机推荐

  1. Android+PHP服务器+MySQL实现安卓端的登录

    时隔已久的一个任务,今天终于可以画上一个句号了.心情是万分的激动,虽然这份小成就来的有点迟但还是按捺不住心情的澎湃.下面我就先上几张图片来展示一下我的成绩 android源代码: 首先最重要的一件事是 ...

  2. Android 获取图片exif信息

    使用android api读取图片的exif信息 布局代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...

  3. Android 常用抓包工具介绍之Charles

    ➠更多技术干货请戳:听云博客 Charles是一款抓包修改工具,相比起TcpDump,charles具有界面简单直观,易于上手,数据请求控制容易,修改简单,抓取数据的开始暂停方便等等优势!前面介绍了如 ...

  4. Swift开发第八篇——方法嵌套&命名空间

    本篇分为两部分: 一.Swift中的方法嵌套 二.Swift中的命名空间 一.Swift中的方法嵌套 在 swift 中我们可以让方法嵌套方法,如: func appendQuery(var url: ...

  5. 【转】超实用的JavaScript技巧及最佳实践

    众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现 ...

  6. 跨域iframe的高度自适应

    If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ...

  7. Fourth glance in Go

    在Go里面的结构体和方法是很有意思的内容.它即和OO有点像,但又不完全一样.为什么这么说呢?当你把结构体映射为OO里面的类的时候,你给结构体添加方法,你就会发现其实方法与结构体并没有严格意义上的关系. ...

  8. 使用 xtrabackup 进行MySQL数据库物理备份

    0. xtrabackup的功能 能实现的功能: 非阻塞备份innodb等事务引擎数据库. 备份myisam表会阻塞(需要锁). 支持全备.增量备份.压缩备份. 快速增量备份(xtradb,原理类似于 ...

  9. MySQL基础学习（一） 命令行命令

    1. 命令行登录 mysql -uroot -p 按照提示输入密码 常用登录选项 -u 指定用户 -p 密码 -h 数据库所在主机 -P 端口 -D 指定数据库 2.命令行退出 exit quit \ ...

  10. pl/sql developer——instant-client 简单配置

    instant-client(数据库即时客户端) 官方说明:即时客户端在一个单独的针对 Instant Client 的 OTN 开发和分发许可下提供,它允许大多数许可下载.重新分发和部署到生产环境中 ...