网页设计项目教程（HTML5+CSS3+JavaScript）（第2版）【PPT课件】任务11.5 多列布局.pptxVIP

网页设计项目教程（HTML5+CSS3+JavaScript）模块11CSS布局任务11.5多列布局

学习目标从认识多列布局的适用场景，到掌握创建多列与修饰列的常用属性知识目标了解CSS3多列布局的适用场景；掌握column-count、column-width两个创建多列的属性；掌握column-gap、column-rule、column-span三个修饰列的属性。能力目标能够将一段文本分成多列显示；能够设置列间隙与列间边框线；能够让标题跨越多列；能够按列宽自动控制列数。素养目标培养细致认真的职业素养；体会版面编排中的审美意识；养成规范、简洁的编码习惯。

任务描述CSS3提供的多列布局，可以像报纸杂志那样把文本分成多列，提高开发效率针对类似于报纸杂志中文章的排版，使用float浮动、position定位、弹性盒子或者其他动态CSS技术，是较难实现的；因为文本内容的数量是动态的，每个div或p显示多少个文字难以精准控制。CSS3提供的多列布局可以创建多列文本布局，允许将文本按照报纸杂志排版分成多列，降低了开发难度，提高了开发效率。使用多列布局时，只需在包含文本的容器上设置列数、列宽、列间隙等属性，浏览器就会自动完成文本的分列与排列。本任务目标：掌握多列布局的常用属性，能够使用多列布局实现报纸杂志式的多列文本排版。

11.5.1基本使用：创建