HTML5+CSS3分栏效果.docx

《HTML5+CSS3分栏效果.docx》由会员分享，可在线阅读，更多相关《HTML5+CSS3分栏效果.docx（3页珍藏版）》请在三一办公上搜索。

1、HTML5+CSS3 分栏效果HTML5+CSS3 分栏效果 在很多刊物、报纸、网页中，都会看到将文本内容分成几栏的效果。而columns属性就可以同时定义多栏的数目和每栏宽度等。 语法： columns：宽度 栏目数 通过上述语法中，中文参数的含义，即可理解“宽度”代表着每栏的宽度。而“栏目数”代表着所要分隔的栏数。 1column-width属性 该属性主要用来定义每栏的宽度。 语法： column-width： auto 其中，auto属性值取计算机值，而属性值由浮点数字和单位标识符组成的长度值。不可为负值。 2column-span属性 该属性定义元素可以在栏目上定位显示。 语法： c

2、olumn-span：1 | all 其中，“column-span：1;”表示只在本栏中显示。而“column-span：all;”表示横跨所有栏目并定位在栏目的Z轴之上。 3column-rule属性 该属性定义每栏之间边框的宽度、样式和颜色。 语法： column-rule： 其中，参数定义栏边框宽度；参数定义边框的样式；参数定义边框的颜色。 4column-gap属性 该属性主要定义两栏之间的间距距离。 语法： column-gap：normal 其中，normal参数值为1em，而参数值由浮点数字和单位标识符组成的长度值。不可为负值。 5column-fill属性 该属性定义栏目的高

3、度是否统一。 语法： column-fill：auto balance 其中，auto参数值定义各栏目的高度随着其内容的多少而自动变化。而balance参数值各栏目的高度将会根据内容最多的那一栏的高度进行统一。 6column-count属性 该属性主要用来定义栏目的数目。 语法： column-count：auto 整数 其中，auto参数值取计算机值，而“整数”表示由浮点数字和单位标识符组成的长度值。不可为负值。 7column-break-before属性 该属性定义元素之前是否断行。 语法： column-break-before：auto 其中，auto参数为指定颜色。 8column-break-after属性 该属性定义元素之后是否断行。 语法： column-break-after：auto 其中，auto参数为指定颜色。 示例：16-5 column.html 多栏显示 p 祥子本来生活在农村，18岁时，不幸失去了父母和几亩薄田，便跑到北平城来赚钱谋生 column-rule-color:#FF9966; column-rule-style:double; column-width:120px; 执行上述代码，在浏览器中可以看到所有文本将分成了4栏。 内容被分成四栏