《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 17.多列布局

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍多列布局多列布局指的就是用户可以将文本内容分成多块，然后让这些块并列显示，类似于报纸、杂志那样的排版形式，也可以理解为word排版中的分栏认识多列布局多列布局属性属性描述column-count指定元素应该分为几列column-fill指定如何填充每个列column-gap指定列与列之间的间隙column-rule所有

column-rule-*属性的简写形式column-rule-color指定列与列之间边框的颜色column-rule-style指定列与列之间边框的样式column-rule-width指定列与列之间边框的宽度column-span指定元素应该横跨多少列column-width指定列的宽度columnscolumn-width与column-count属性的简写属性column-count列数column-count属性用来设置将元素分为几列值描述number使用具体数值将元素划分为指定的列数auto默认值，由其他属性决定具体的列数，比如

column-widthcolumn-count列数HTML代码CSS样式<divclass="newspaper">

<h3>人生感悟</h3>

<p>“当我年轻的时候，我梦想改变这个世界；...”

</p></div>

div{

column-count:4;

}

column-gap列间距column-gap属性用来设置列与列之间的间隙值描述length将列与列之间的间隔设置为指定的宽度normal将列与列之间的间隔设置为与

font-size属性相同的大小，即1emcolumn-gap列间距HTML代码CSS样式<divclass="newspaper">

<h3>人生感悟</h3>

<p>“当我年轻的时候，我梦想改变这个世界；...”</p></div>

div{column-count:4;column-gap:50px;}column-rule列边框column-rule属性是一个简写属性，它与border属性非常相似，用来设置列与列之间边框的宽度、样式和颜色。column-rule:column-rule-widthcolumn-rule-stylecolumn-rule-color;column-rule:

边框的宽度

边框的样式

边框的颜色;column-rule列边框HTML代码CSS样式<divclass="newspaper">

<h3>人生感悟</h3>

<p>“当我年轻的时候，我梦想改变这个世界；...”</p></div>

p{column-count:4;column-rule:3pxdashedred;}column-span是否跨越列column-span属性用来设置元素应该跨越多少列值描述none默认值，表示元素不跨越列all表示元素横跨所有列column-span是否跨越列HTML代码CSS样式<divclass="newspaper">

<h3>人生感悟</h3>

<p>“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；...”

</p></div>

p{column-count:4;column-rule:3pxdashedred;}

h3{

column-span:all;}column-width列宽度column-width属性用来设置每个列的宽度值描述auto由浏览器决定列的宽度length为每个列指定具体的宽度column-width列宽度HTML代码CSS样式<divclass="newspaper">

<h3>人生感悟</h3>

<p>“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；...”

</p></div>

p{

column-width:150px;}

h3{

column-span:all;}columns多列复合属性columns属性是一个简写属性，用来同时设置列的宽度和列的数量，语法格式如下：columns:column-widthcolumn-count;columns：

列的宽度

列的数量；任务实践

（1）在VSCode中，创建站点文件夹，准备好素材资源文件夹，新建803.html。（2）设置容器盒子宽度为80%，水平居中，背景颜色为灰色。（3）参考图8.3.1写一个子元素的样式