HTML 学习笔记 CSS3 (多列)
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 (多列)的更多相关文章
- SQL反模式学习笔记8 多列属性
目标:存储多值属性 反模式:创建多个列.比如一个人具有多个电话号码.座机号码.手机号码等. 1.查询:多个列的话,查询时可能不得不用IN,或者多个OR: 2.添加.删除时确保唯一性.判断是否有值:这些 ...
- SQL反模式学习笔记11 限定列的有效值
目标:限定列的有效值,将一列的有效字段值约束在一个固定的集合中.类似于数据字典. 反模式:在列定义上指定可选值 1. 对某一列定义一个检查约束项,这个约束不允许往列中插入或者更新任何会导致约束失败的值 ...
- 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 ...
- HTML 学习笔记 CSS3(Animation)
CSS3动画: 通过CSS3 我们能够创建动画 这可以在许多网页中取代动画图片 Flash动画 以及JavaScript. CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 ...
- HTML 学习笔记 CSS3(过度 transition)
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...
- 学习笔记：MySQL列属性
列属性 a) null|not null 缺省值是null,也就是允许为空,如果是not null而又没有给该字段赋值的话,系统会首先查询该字段有没有默认值 b) de ...
- HTML 学习笔记 CSS3 (2D Matrix)
Matrix 矩阵 那么什么是矩阵呢? 矩阵可以理解为方阵,只不过 平时方阵里面站着人 矩阵中是数值: CSS3中的矩阵: css3中的矩阵指的是一个方法,书写为matrix() 和 matrix3d ...
- HTML 学习笔记 CSS3 (2D转换)
2.scaleX(<number>) : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数.scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在 ...
- HTML 学习笔记 CSS3 (文本效果)
text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...
随机推荐
- SharePoint2007:解决第二回收站大数据无法删除问题
Emptying the Second Stage Recycle Bin in SharePoint 2007 Look in your second stage recycle bin in ...
- centos初始配置
修改语言环境 [root@oracledb ~]# sudo vim /etc/sysconfig/i18n 将将zh_CH修改为"en_US.UTF-8" 搭建yum本地源 参考 ...
- Android 利用内容提供者添加联系人的操作
上文中<Android 获取系统的联系人>主要介绍了怎样获取系统联系人并实战了一下,本文将介绍如何添加一条联系人信息 添加联系人 1. 添加raw_contacts表,添加一条联系人的id ...
- iOS开发 JSonKit does not support Objective-C Automatic Reference Counting(ARC)
有使用JSonKit的朋友,如果遇到“JSonKit does not support Objective-C Automatic Reference Counting(ARC)”这种情况,可参照如下 ...
- 【代码笔记】iOS-3个section，每个都有header.
一,效果图: 二,工程目录. 三,代码 RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...
- 免费开发者证书真机调试App ID失效问题:"Unable to add App ID because the '10' App ID limit in '7' days has been exceeded."解决方案（5月5号）
免费开发者证书真机调试App ID失效问题:"Unable to add App ID because the '10' App ID limit in '7' days has been ...
- iOS 杂笔-24(常用类到NSObject的继承列表）
iOS 杂笔-24(常用类到NSObject的继承列表) NSString NSObject->NSString NSArray NSObject->NSArray ↑OC基本类都直接继承 ...
- eclipse如何优化构建的速度（Building）
小Alan在平时的开发中很喜欢做一件事,那就是盯着eclipse的状态栏,看着Build Workspace的进度条一点一点慢慢的走,小Alan坐在电脑面前默默不想说话,就是心中总是有十万匹马在奔腾, ...
- CSS之旅——第二站 如何更深入的理解各种选择器
上篇我们说了为什么要使用css,这篇我们就从选择器说起,大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成 了xml格式,否则的话就是一堆“杂乱无章”的string ...
- 简单看看这两个类 String和StringBuilder
我记得以前在园子里面讨论这两个类的文章有很多很多,并且还拿出了很多的测试报告,在什么情况下,谁比谁快,在什么情况下,该用谁 不该用谁等等这些,我这里就不比较了,我就简单看看他们里面的内部实现,那就先看 ...