HTML5+CSS3 Web前端开发项目化教程 课件 项目3 图文混排页面制作.pptx

《HTML5+CSS3Web前端开发项目化教程》项目3图文混排页面制作

任务3.3制作“中华文化网”导航菜单03目录Contents任务3.2设置“中华文化网”页面背景02任务3.1制作“中华文化网”琴棋书画模块01

教学目标熟悉盒子模型的概念及相关属性掌握背景属性的设置方法理解渐变背景属性掌握元素类型特点及转换方法1.知识目标能够熟练应用盒子模型的相关属性能够使用背景属性设置元素背景能够区分元素类型并进行元素类型转换2.技能目标?传承中华优秀传统文化，培养审美意识培养不断探索、敢于实践的精神培养代码规范意识，养成良好的代码编写习惯3.素养目标

1任务3.1制作“中华文化网”琴棋书画模块

效果展示

知识储备盒子模型相关属性2盒子模型的概念1目录Contents

知识储备1.盒子模型的概念生活中的盒子

知识储备1.盒子模型的概念展览馆墙上整齐的排列着四幅画，那么画面本身就是内容，每幅画都有一个边框，英文称为“border”，画与画框之间都会有一定的留白，称为内边距，英文称为“padding”；每幅画之间通常也会一定的距离，这个距离称为“外边距”，英文称为“margin”。

知识储备1.盒子模型的概念什么是盒子模型？所谓盒子模型，网页其实也是由一个个矩形区域通过排版组合而成，这些矩形区域可以看成是承装HTML内容的容器，称为盒子。网页盒子可以通过调整每个盒子的宽度、高度、距离等参数，来调节盒子的大小和位置。

知识储备1.盒子模型的概念内容（content）内容是盒子模型的中心，它呈现了盒子的主要信息内容边框（border）边框（border）是盒子的边界外边距（margin）盒子的最外围，是添加在边框外周围的空间每个盒子模型都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。内边距（padding）内容区和边框之间的距离

知识储备1.盒子模型的概念页面中的任何元素都可以看成盒子，常见的有div、h1到h6标题、列表ul、li，甚至行内元素a、span、img等等。正是因为这些盒子的排版，因此网页的内容虽然零散，但在版式排列上依然清晰有条理。

知识储备2.盒子模型相关属性为了分割页面中不同的盒子，常常需要给元素设置边框效果。在CSS中，我们可以设置单侧边框（上边框、下边框、左边框、右边框）的样式属性、宽度属性、颜色属性，也可以综合设置边框的这些属性。边框设置border020304border-top：上边框;border-right：右边框;border-bottom：下边框;01border-left：左边框

知识储备内边距属性2外边距属性3边框属性1box-sizing属性5阴影属性42.盒子模型相关属性透明6

知识储备2.盒子模型相关属性边框属性边框样式border-style:上边[右边下边左边];边框宽度border-width:上边[右边下边左边];综合设置边框边框颜色border-color:上边[右边下边左边];border:四边宽度四边样式四边颜色;none（无）、dotted（点线）、dashed（虚线）、solid（实线）等以像素为单位用于定义页面中边框的风格red、#ff0000、rgb(0,255,0注意：边框三个属性，必须设置边框样式，如果未设置样式或设置为none，则宽度、颜色都无效。1.边框属性

知识储备2.盒子模型相关属性border:border-width?border-style?border-color;border-top:上边框宽度样式颜色;border-right:右边框宽度样式颜色;border-bottom:下边框宽度样式颜色;border-left:左边框宽度样式颜色;border:四边宽度样式颜色;例如：border:1pxdashedred;/*设置边框样式，各个值不分顺序*/border综合设置边框，语法格式如下：注意：border-width、border-style?border-color顺序任意，不分先后，可以只需设置指定的属性，省略的部分将取默认值（border-style不能省略）1.边框属性

知识储备2.盒子模型相关属性border-top:上边框宽度样式颜色;border-right:右边框宽度样式颜色;border-bottom:下边框宽度样式颜色;border-left:左边框宽度样式颜色;border:四边宽度样式颜色;像border、border-top等，能够用一个属性定义元素的多种样式，这种属性在CSS中称之为复合属性。常用的复合属性有font、b