文档章节

IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

字数 1123
阅读 16
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

5f16a58a57bc47108e1c532aebeafd05.jpg

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分栏布局参数说明

 

image/20191115/874824184d83f91c2768bfa00ec12522

   

 

1  列个数和列宽度

不管想让一段文本呈多少列显示,你需要的只是两个属性:column-count和 column-width。

(1)使用column-count为某个文章设置两列,代码如下:

image/20191115/da691eed83dcd39d5f8b62885064c84c

 

这将会使文本里的内容显示成两列(首先你的浏览器要支持这种新语法,比如火狐浏览器、谷歌浏览器,IE10+等),在这里我们使用了column-count兼容浏览器,使用浏览器打开这个html文件,效果如图1所示:

image/20191115/d0fda681c92719529424fb3280362e32

图1  column-count分栏布局

 

(2)column-width属性控制列的宽度。如果你没有提供column-count属性值,那么,浏览器就是自主决定将文本分成合适的列数。将上例的CSS代码替换如下:

image/20191115/26d4471132e4b6b6b2b17cf96684292f

 

这将会使文本里的内容被分成若干列,每列的宽度为10em,分栏效果如图2所示:

image/20191115/9b3516e77108956d99c6150e803d4379

图2  column-width分栏布局

 

2  列之间的缝隙间隔宽度

两列之间会有缝隙间隔。缺省情况下这个间隔宽度是1em,但如果你使用column-gap属性,就会修改这个缺省的宽度值,将上例的分栏宽度为20em,分栏间隔为2em。将上例的CSS代码替换如下:

image/20191115/06fc4f28e551fe9958e5149694d35733

 

这将会使文本里的内容被分成若干列,每列的宽度为20em,分隔间隔为2em,效果如图3所示:

image/20191115/5db79e86e4f2f61d0d0e0e4bfce32d48

图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参数取值及描述

 

image/20191115/b4858e3daa786a25640bd9220122f343

 

其中,column-rule-style有以下可选值,它们的取值及描述如表3:

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

表3  column-rule-style参数取值及描述

 

image/20191115/02b7d9edb0d85889c07c1fb5d083a7f6

 

下面,我们将把文本分为三栏,并给出2em的缝隙间隔,每栏间隔都给一个黑色的虚线间隔符。CSS代码如下:

image/20191115/20e01b165698370782b5e4635b3e2c41

 

这将会使文本里的内容被分三列,分隔间隔为2em,分隔符为黑色虚线,效果如图4所示:

image/20191115/f58414c46e2d6108c475e37bcb7c5d13

图4 column-rule分栏符

 

CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们,特别是需要自动平衡列高度的地方。

© 著作权归作者所有

粉丝 1
博文 264
码字总数 253660
作品 0
东城
私信 提问
6 个典型的 HTML5 文字特效示例

在HTML5出现之前,网页上的文字比较单一,除了设置大小、颜色、粗细之外,没有任何出色的特效,当然优秀的文字排版也能让页面显得舒服温馨,但 是当我们需要让页面变得震撼惊奇的话,那么HTM...

tp_wire
2012/08/30
11.8K
0
8款炫酷的HTML5特效源码

HTML5的强大不仅在于可以让网页元素更加灵活多变,更在于它可以很方便的实现网页动画的特效,可以让你的网站更加富有现代化特色。今天,就给大家分享8个让人难忘的HTML5炫酷动画~ 1、HTML5 C...

牵着蜗牛去西藏
2015/02/09
4.8K
1
html5 + css3 带音效下拉菜单的实现

原文:scripts tutorials (来自脚本教程网的教程,翻译可能有些不对。。。想要试试 音效下拉菜单 在这个教程中我们将讲述如何开发酷炫的音效下拉菜单(html5 + css3)。下拉菜单有css3动画效...

phala
2015/08/06
1K
0
35个很棒的HTML5和CSS3教程

CSS3和HTML 5可以影响你设计网站的方式。CSS3提供了很多的设计上的新技术和高级功能,使创建网站变得更容易。下面的列表是今年最新的CSS3和HTML5的教程。 1. The Apple.com navigation menu...

小卒过河
2011/07/01
14.6K
6
最佳的 HTML5 和 CSS3 教程 - June 2011

Apple.com 导航菜单(只使用CSS3) 该教程将为你展示如何使用 CSS3 创建苹果风格的菜单。 使用 CSS3 的 RGBa 属性处理透明效果 一个简短的教程介绍 CSS3 的透明效果处理 Getting started with...

红薯
2011/06/17
6.8K
15

没有更多内容

加载失败,请刷新页面

加载更多

阿里巴巴的 Kubernetes 应用管理实践经验与教训

作者 | 孙健波(天元) 阿里巴巴技术专家 导读:本文整理自孙健波在 ArchSummit 大会 2019 北京站演讲稿记录。首先介绍了阿里巴巴基于 Kubernetes 项目进行大规模应用实践过程中遇到的问题;...

阿里巴巴云原生
18分钟前
3
0
pinpoint采样原理分析

使用pinpoint进行全链路监控时,支持对请求的采样,某条请求是否被采样,取决于整个链路开始的机器。该机器使用特定的采样算法。采样的标志会一直在链路中透传。比如在http里面,会在header里...

xiaomin0322
23分钟前
3
0
在IDEA开发工具中使用lombok

1. 首先我们需要安装IntelliJ IDEA中的lombok插件,打开IntelliJ IDEA后点击菜单栏中的File-->Settings,或者使用快捷键Ctrl+Alt+S进入到设置页面 我们点击设置中的Plugins进行插件的安装,在...

欧阳飘
24分钟前
3
0
爱码仕 5G生活畅想 (五) 每个人每个家庭都有一朵私有的云

30年前,微软让每个家庭都有一台电脑的理念成为了现实;而今云计算的观念已为老百姓们所熟识。数据就是能源;数据就是财富;谁生产了数据,这数据的所有权就归谁所有。随着原生云基础设施的完...

LitStone
26分钟前
3
0
嵌入式入门:嵌入式领域的职业发展方向是什么?

嵌入式入门:嵌入式领域的职业发展方向是什么? 在如今的IT市场上看,嵌入式的发展的应用都是广受欢迎的,在嵌入式入门学习中,我们可以发现嵌入式的发展方向有很多,门槛高低不一样。下面就...

xyd118
26分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部