IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行;人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样。但是在CSS3的多列布局(columns)语法功能出现之前,人们如果想让文本呈多列显示,要么使用绝对定位,手动给文本分段落,或者使用JS脚本等,而新语法的出现,彻底改变了这样的局面。
对于一些不支持多列布局特征的浏览器,比如IE9/IE8,会把这些属性全部忽略,这样布局就呈现出传统的单块布局。为了保证浏览器最大的兼容性,我们在使用多列布局属性时,最好添加浏览器引擎前缀,最基本的要加上三种:谷歌浏览器的-webkit-,火狐浏览器的-moz-,IE浏览器的-ms-,最后,别忘了不带前缀的写法。
分栏布局有三个参数可以设定,分别为column-width、column-count、column-gap、column-rule,具体描述如表1:
表1 CSS3分栏布局参数说明
1 列个数和列宽度
不管想让一段文本呈多少列显示,你需要的只是两个属性:column-count和 column-width。
(1)使用column-count为某个文章设置两列,代码如下:
这将会使文本里的内容显示成两列(首先你的浏览器要支持这种新语法,比如火狐浏览器、谷歌浏览器,IE10+等),在这里我们使用了column-count兼容浏览器,使用浏览器打开这个html文件,效果如图1所示:
图1 column-count分栏布局
(2)column-width属性控制列的宽度。如果你没有提供column-count属性值,那么,浏览器就是自主决定将文本分成合适的列数。将上例的CSS代码替换如下:
这将会使文本里的内容被分成若干列,每列的宽度为10em,分栏效果如图2所示:
图2 column-width分栏布局
2 列之间的缝隙间隔宽度
两列之间会有缝隙间隔。缺省情况下这个间隔宽度是1em,但如果你使用column-gap属性,就会修改这个缺省的宽度值,将上例的分栏宽度为20em,分栏间隔为2em。将上例的CSS代码替换如下:
这将会使文本里的内容被分成若干列,每列的宽度为20em,分隔间隔为2em,效果如图3所示:
图3 column-gap分栏间隔
3 分栏间隔符
column-rule的语法如下:
column-rule: column-rule-width column-rule-style column-rule-color;
column-rule属性是一个简写属性,用于设置所有column-rule-* 属性。它们的参数及描述如表2:
表2 column-rule参数取值及描述
其中,column-rule-style有以下可选值,它们的取值及描述如表3:
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
表3 column-rule-style参数取值及描述
下面,我们将把文本分为三栏,并给出2em的缝隙间隔,每栏间隔都给一个黑色的虚线间隔符。CSS代码如下:
这将会使文本里的内容被分三列,分隔间隔为2em,分隔符为黑色虚线,效果如图4所示:
图4 column-rule分栏符
CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们,特别是需要自动平衡列高度的地方。
IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局的更多相关文章
- css3属性:column分栏
css3选择器中提出了分栏的属性,其浏览器支持情况为:Internet Explorer 10 和 Opera 支持 column 属性,Firefox 支持替代的 -moz-column 属性,Sa ...
- IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景
CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.backgroun ...
- IT兄弟连 HTML5教程 CSS3属性特效 小结及习题
本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...
- IT兄弟连 HTML5教程 HTML5和CSS3的关系
HTML5是第五版HTML的标准,CSS3则是第三版CSS,新增一些非常实用的选择器和样式属性,并且CSS3语言开发是朝着模块化发展的.以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为 ...
- IT兄弟连 HTML5教程 CSS3属性特效 文字描边
用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- IT兄弟连 HTML5教程 CSS3属性特效 渐变1
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性5
9 透明属性 元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果.现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行.通常我们定义颜色都是用十六 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性4
7 多列布局属性 通过CSS3,开发人员能够创建多列来对文本进行布局.在CSS2时代,对于多列布局的设计,大多采用浮动布局和绝对定位布局两种方式.浮动布局比较灵活,但是需要编写大量的附加样式代码,而 ...
随机推荐
- 【github repo自荐】码农周刊一周精选分类
以下内容节选自我的github码农周刊整理repo,欢迎大家star. 写在最前面的话 作为最初的一批码农周刊的订阅者,不能说经历了其成长,但是确实见证了他的壮大.码农周刊确实从开始第一期的基本上都是 ...
- python_编程面试题
使用递归方法对一个数组求最大值和最小值 """ 用递归算法求解一个数组的最大值和最小值 思路: 1.首先假设这个列表只有1个元素或两个元素 2.再考虑超过两个元素的情况, ...
- js递归优化
递归优化 递归在我们平时撸码中会经常用到,不过可能很多人不知道递归的弊端,就是会导致调用栈越来越深.如果没有节制的使用递归可能会导致调用栈溢出. 那什么是递归呢? 递归调用是一种特殊的嵌套调用,是某个 ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- vars()
返回一个字典,包含所有在本函数调用时存在的变量
- MyBatis开发Dao的原始Dao开发和Mapper动态代理开发
目录 咳咳...初学者看文字(Mapper接口开发四个规范)属实有点费劲,博主我就废了点劲做了如下图,方便理解: 原始Dao开发方式 1. 编写映射文件 3.编写Dao实现类 4.编写Dao测试 Ma ...
- 洛谷 题解 P4613 【[COCI2017-2018#5] Olivander】
我又双叒叕被包菜辣! P4613 [COCI2017-2018#5] Olivander 首先,不知道为什么这题无法提交翻译: 所以,我先放个翻译: 哈利波特在与伏地魔的战斗中损坏了他的魔杖.他决定在 ...
- Mysql 执行计划以及常见索引问题总结
Mysql 执行计划以及常见索引问题总结
- OSS 对象存储的那些事AmazonS3简单使用
对象存储是根据AmazonS3来做的封装,主要功能 :文件的上传下载 生成链接 对图片的处理 查看桶内对象等一系列的操作. 本文主要做的是文件的上传下载生成链接以及前期的准备工作 以springboo ...
- HDU5470 Typewriter (SAM+单调队列优化DP)
Typewriter Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Tota ...