网页设计与制作教程Web前端开发（第7版）课件：CSS3的盒模型-CSS3多列属性.pptx

CSS3的多列属性可以将文本内容设计成像报纸一样的多列布局。CSS3的盒模型CSS3多列属性

目录CSS的盒模型6.1CSS盒模型的组成和大小6.2CSS盒模型的属性6.3CSS布局属性6.4CSS盒子定位属性 6.5CSS3多列属性6.6CSS基本布局样式 6.7实训——制作社区网网页6.8练习

6.5CSS3多列属性6.5.1列数属性column-count语法：column-count:integer|auto示例：styletype=text/css.newspaper{column-count:3;}/stylebodydivclass=newspaper文字…/div/body

6.5CSS3多列属性6.5.2列宽属性column-width语法：column-width:length|auto示例：.newspaper{column-width:100px;column-count:3;column-gap:40px;column-rule-style:outset;column-rule-width:1px;}

6.5CSS3多列属性6.5.3列宽属性column语法：columns:[column-width]|[column-count]示例：.newspaper{columns:100px3;}

6.5CSS3多列属性6.5.4列之间的间隔属性olumn-gap语法：column-gap:length|normal示例：.newspaper{column-count:3;column-gap:40px;}

6.5CSS3多列属性6.5.5是否横跨所有列属性column-span语法：column-span:none|all示例：.newspaper{column-count:3;}h2{column-span:all;}

6.5CSS3多列属性6.5.6列间隔样式属性column-rule-style语法：column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset示例：.newspaper{column-count:3;column-gap:40px;column-rule-style:dotted;}

6.5CSS3多列属性6.5.7列之间间隔颜色属性column-rule-color语法：column-rule-color:color.newspaper{column-count:3;column-gap:40px;column-rule-style:outset;column-rule-color:#ff0000;}

6.5CSS3多列属性6.5.8列之间宽度属性column-rule-width语法：column-rule-width:length|thin|medium|thick示例：.newspaper{column-count:3;column-gap:40px;column-rule-style:outset;column-rule-width:1px;}

6.5CSS3多列属性6.5.9列之间间隔所有属性column-rule语法：column-rule:[column-rule-width]|[column-rule-style]|[column-rule-color]示例：.newspaper{column-count:3;column-gap:40px;column-rule:4pxoutset#ff00ff;}

6.5CSS3多列属性【例6-24】多列属性示例，本例文件6-24.html在浏览器中的显示效果，如图6-34所示。

6.5CSS3多列属性!DOCTYPEhtmlhtml head metacharset=utf-8 title多列属性/title styletype=text/css .newspaper1{ column-count:4; column-width:auto; column-rule-style:dashed; column-rule-width:thick; column-rule-color:gre