CSS3布局Multi-column layout的效果怎么样?

html-css08

CSS3布局Multi-column layout的效果怎么样?,第1张

多列布局,可以实现如传统报刊一样的分栏排版方式。

多列布局有3个主要属性: column \column-gap\column-rule.

Column是column-count和column-width的简写属性。

column-count指定列数,column-width指定列宽。

如果同时指定了列数和列宽,则以较宽的一项为准。

Column-gap指定列间距,默认值为normal,即1em的间隙;

还可以用通过Column-rules指定列分隔线,此属性接受与 border 属性相同的值。

多列布局还能实现指定分列、跨列、平衡列内容等特性。

利用分栏还可以实现很多效果。

想直观的看到效果,你可以多看看相关的教程,比如说现在有个视频的系列名称叫做 《Buid New World》,里面有一集专门讲 CSS3 复杂布局形式

CSS3 新特性

包括

CSS3 选择器(Selector)

@Font-face 特性、

Word-wrap &Text-overflow 样式

Text-decoration

多列布局(multi-column layout)

边框和颜色,颜色支持透明度(color, border)

渐变效果(Gradient)

阴影(Shadow)和反射(Reflect)效果

盒子模型

Transitions, Transforms 和 Animation

比如:@Font-face 特性

@font-face {

font-family: BorderWeb

src:url(BORDERW0.eot)

}

@font-face {

font-family: Runic

src:url(RUNICMT0.eot)

}

.border { FONT-SIZE: 35pxCOLOR: blackFONT-FAMILY: "BorderWeb" }

.event { FONT-SIZE: 110pxCOLOR: blackFONT-FAMILY: "Runic" }

更多参考:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/