《HTML5+CSS3网页制作》课件-模块五 盒子模型

模块五盒子模型任务1盒子模型及应用网页制作CSSHTML知识准备——盒子模型实战演练——制作“时代楷模”网页盒子模型及应用0201进阶训练——制作“用户中心”网页03动手实践——制作“鹤壁职业技术学院校徽”网页04

1.理解盒子模型的基本概念

2.掌握盒子模型的属性设置

3.应用盒子模型进行网页布局盒子模型及应用学习目标：

1.鼓励学生运用盒子模型等设计原理，进行独特的包装设计，培养学生的创新意识和创新能力，以适应现代经济社会的发展需求。

2.要求学生注重细节，追求完美的设计效果，从而培养学生的工匠精神，即对工作的精益求精和追求卓越的态度。

3.在包装设计中融入中国传统文化元素，通过设计具有中国特色的包装作品，增强学生的文化自信和民族自豪感。4.强调职业道德和社会责任的重要性，引导学生树立正确的价值观，关注社会热点和环保问题，为社会的可持续发展做出贡献。盒子模型及应用思政目标：

1知识准备--课程引入盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型

21知识准备--课程引入1盒子模型在网页设计中的重要性盒子模型是CSS布局的核心，决定了元素如何占据空间，是网页设计的基础。

内容用content来表示，内容占有一定的页面空间，通常用它的宽度width，高度height来表示内容的外面是内边距padding内边距的外面是边框border边框的外面是外边距margin1知识准备--组成部分

3盒子的实际宽度=width+padding（左右）+border（左右）+margin（左右）盒子的实际高度=height+padding（上下）+border（上下）+margin（上下）1知识准备--尺寸计算

41知识准备--边框设置1.

边框样式border-styleborder-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式border-style：上边框样式[右边框样式

下边框样式

左边框样式]；在设置边框样式时，可以对盒子的单边进行设置，具体格式如下：border-top-style：上边框样式；border-right-style：右边框样式；border-bottom-style：下边框样式；border-left-style：左边框样式；41知识准备--边框设置1.

边框样式border-style综合设置4条边的样式当设置4个属性值时，边框样式的写法会按照上右下左的顺时针顺序排列。当省略某个属性值时，边框样式会采用值复制的原则，将省略的属性值默认为某一边的样式；当设置3个属性值时，为上，左右，下；当设置2个属性值时，为上下和左右;设置1个属性值时，为4边的公用样式；41知识准备--边框设置1.

边框样式border-style

41知识准备--边框设置2.

边框高度border-widthborder-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式border-width：上边框宽度[右边框宽度

下边框宽度

左边框宽度]；同边框样式一样，边框宽度可以针对4条边分别进行设置，具体格式如下：border-top-width：上边框宽度；border-right-width：右边框宽度；border-bottom-width：下边框宽度；border-left-width：左边框宽度；41知识准备--边框设置2.

边框高度border-width综合设置4条边的宽度边框宽度的写法会按照上右下左的顺时针顺序排列。当省略某个属性值时，边框宽度会采用值复制的原则，将省略的属性值默认为某一边的宽度；当设置3个属性值时，为上，左右，下；当设置2个属性值时，为上下和左右；当设置1个属性值时，为4边的公用宽度；41知识准备--边框设置2.

边框高度border-width

41知识准备--边框设置3

边框颜色border-colorborder-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式border-color：上边框颜色[右边框颜色

下边框颜色

左边框颜色]；在设置边框颜色时，可以对盒子的单边进行设置，具体格式如下：border-top-color：上边框颜色；border-right-color：右边框颜色；border-bottom-color：下边框颜色；border-left-color：左边框颜色；41知识准备--边框设置3

边框颜色border-color当设置4个属性值时，边框颜色的写法会按照上右下左的顺时针顺序排列。当省略某个属性值时，边框颜色会采用值复制的原则，将省略的属性值默认为某一边的宽度；当设置3个属性值时，为上，左右，下；设置2个属性值时，为上下和左右；设置1个属性值时，为4边的公用颜色；41知识准备--边框设置3

边框颜色border-color

41知识准备--边框设置4

边框的综合设置

border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式border：边框宽度

样式

颜色；注意：宽度、样式、颜色顺序任意，不分先后。CSS提供了更简单的边框设置方式如下：border-top:上边框宽度

样式

颜色；border-right:右边框宽度

样式

颜色；border-bottom:下边框宽度

样式

颜色；border-left:左边框宽度

样式

颜色；41知识准备--边框设置4

边框的综合设置

41知识准备--内边距的设置border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式padding：上内边距[右内边距

下内边距

左内边距]；内边距

padding

在设置内边距时，可以对盒子的单边进行设置，具体格式如下：padding-top:上内边距；padding-right:右内边距；padding-bottom:下内边距；padding-left:左内边距；41知识准备--内边距的设置内边距

padding

综合设置当设置4个属性值时，内边距的写法会按照上右下左的顺时针顺序排列;当省略某个属性值时，内边距会采用值复制的原则，将省略的属性值默认为某一边的样式。当设置3个属性值时，为上，左右，下；设置2个属性值时，为上下和左右;设置1个属性值时，为4边的公用内边距。41知识准备--内边距的设置内边距

padding

41知识准备--外边距的设置border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式margin：上外边距[右外边距

下外边距

左外边距]；外边距

margin

在设置外边距时，可以对盒子的单边进行设置，具体格式如下：margin-top:上外边距；margin-right:右外边距；margin-bottom:下外边距；margin-left:左外边距；41知识准备--外边距的设置外边距

margin

综合设置当设置4个属性值时，外边距的写法会按照上右下左的顺时针顺序排列;当省略某个属性值时，外边距会采用值复制的原则，将省略的属性值默认为某一边的样式。当设置3个属性值时,为上，左右，下；设置2个属性值时，为上下和左右;设置1个属性值时，为4边的公用外边距。41知识准备--外边距的设置外边距

margin

实战演练—制作“时代楷模”网页2本次任务主要是利用盒子模型的边框、内边距、外边距等知识点完成“时代楷模”网页的制作。页面顶部包含页面标题主人公姓名，中部是图片区存放照片并进行编辑处理，底部事迹采用纯文本。预览效果如下图所示。

实战演练—制作“时代楷模”网页2“时代楷模”网页制作思路为用一个h2元素作为网页的标题；一个p元素作为姓名；一个div容器嵌套一个img元素存放图片；一个div容器包含了“时代楷模”的英雄事迹。在此基础上，可以分成两步来完成：首先制作“时代楷模”的HTML结构代码；其次编写基础CSS代码。

实战演练—制作“时代楷模”网页21.制作“时代楷模”的HTML结构代码

实战演练—制作“时代楷模”网页2CSS被直接写在style标签内。样式用于控制网页的布局、颜色、字体等外观。存放标题和姓名的p元素和h2元素设置文本居中对齐。标题h2元素添加边框、高度、宽度、行高、外边距（居中）、背景色等样式。放置图片的容器top：定义顶部div的样式，包括边框、宽度、高度、外边距等，用于包含图片。img设置图片的宽度、高度和内边距，以确保图片适应其容器。#bottom：定义底部div的样式，包括宽度、外边距、背景色和边框。2.编写基础CSS代码

进阶训练—制作“用户中心”网页3本次任务主要是利用HTML5新增的结构化元素、盒子模型、圆角边框等知识点完成“用户中心”网页的制作，页面顶部包含页面LOGO和标题，中部包含用户的基本信息，下部包含联系方式和“返回主页”的链接。预览效果如图所示。

进阶训练—制作“用户中心”网页3CSS3增加了border-radius属性，可为元素添加圆润外观，增强视觉吸引力。右图是将图片的四个角设置了不同的水平半径和垂直半径。

圆角边框

border-radius

进阶训练—制作“用户中心”网页3border-radius属性提供了两个参数，每个参数均有4个参数值，若省略第二个参数，默认等于第一个参数。当设置4个属性值时，圆角半径的写法会按照上右下左的顺时针顺序排列。当省略某个属性值时，圆角半径会采用值复制的原则，将省略的属性值默认为某一边的圆角半径。

圆角边框

border-radius

进阶训练—制作“用户中心”网页3box-shadow属性用于添加元素阴影，营造立体感，提升设计层次。该属性可以设置一个或多个阴影效果，每个阴影效果由水平偏移量、垂直偏移量、模糊半径、扩展半径和颜色组成。阴影效果可以通过逗号分隔，依次应用在元素上。‌

阴影效果box-shadow

进阶训练—制作“用户中心”网页3‌box-sizing属性用于定义CSS盒模型的计算方式，影响元素的宽度和高度计算。‌‌该属性决定元素尺寸计算方式，确保布局精确无误。‌box-sizing属性的默认值为content-box，元素的宽度和高度仅包括内容区域，不包括边框和内边距（padding）。box-sizing属性的值是border-box时，元素的宽度和高度包括内容、边框和内边距，这使得布局更加直观和易于控制。

盒模型大小控制

box-sizing

进阶训练—制作“用户中心”网页31.制作“用户中心”的HTML结构代码

进阶训练—制作“用户中心”网页3‌首先设置body的字体、边距、背景色，去除<body>标签的默认外边距，以确保页面内容从浏览器窗口的左上角开始显示。设置一个宽300px、高400px的容器（#container），该容器在页面中水平居中（通过margin:0auto;实现），具有灰色边框和20px的内边距。设置.top的高度和文本对齐方式，.topimg的尺寸，.topspan的显示方式、颜色和垂直对齐。定义中间div样式，设置.middle的宽度、内边距、边框、颜色等。定义返回主页按钮样式，设置.aa的宽度、内边距、文字颜色、边框、圆角、阴影等，定义链接样式，设置a元素移除下划线。2.编写基础CSS代码

4动手实践—制作“鹤壁职业技术学院校徽”网页4

设计并制作“鹤壁职业技术学院校徽”网页，效果如图左所示。当鼠标指针移动到校徽上时，出现如图右所示的边框效果（边框颜色加深，圆角边框）。小结知识准备——盒子模型实战演练——制作“时代楷模”网页进阶训练——制作“用户中心”网页动手实践——制作“鹤壁职业技术学院校徽”网页模块五盒子模型任务2背景与渐变属性网页制作CSSHTML知识准备——背景属性实战演练——制作“红海行动影评”网页背景与渐变属性0201进阶训练——制作“女娲补天神话传说”网页03动手实践——制作“播放器图标”网页04

1.掌握CSS3中背景属性的基本用法

2.理解CSS3渐变属性的实现原理

3.能够在实际项目中设计出更加美观、富有创意的网页效果背景与渐变属性学习目标：

1.通过设计富有创意和正能量的网页作品，传播正能量，弘扬社会正气。

2.引导学生了解并欣赏中华优秀传统文化，如传统图案、色彩搭配等，增强文化自信。

3.引导学生积极参与网页设计竞赛和实践活动，提升实践能力和团队协作能力。4.通过网页设计作品传递正能量，为构建和谐社会贡献力量。背景与渐变属性思政目标：

1知识准备--背景属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型background属性CSS中的background属性是一个复合属性，可以在一个声明中设置多个与背景相关的样式属性。

41知识准备--背景属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式background-color:color-value;1.background-colorcolor-value的取值已使用颜色的英文单词、十六进制颜色值或RGB代码等。

1知识准备--背景属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型1.background-colorbackground-color属性的默认属性值为transparent，即背景透明，这时设置背景透明的子元素会透出其父元素的背景颜色。

41知识准备--背景属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式background-image:url('path/to/image.jpg');2.background-imageurl('path/to/image.jpg')是图片文件的路径。路径可以是相对路径（相对于当前网页的位置）或绝对路径（完整的网络地址）。

1知识准备--背景属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型3.background-repeat在CSS3中，background-repeat属性用于控制背景图像如何在元素的背景区域中重复。background-repeat属性决定背景图如何铺满元素，关键在于控制重复方式，包括水平、垂直或不重复。

1知识准备--背景属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型3.background-repeatbackground-repeat属性的一些常用值及其含义如下：repeat（默认值）：背景图像在水平和垂直方向上重复。repeat-x：背景图像仅在水平方向上重复。repeat-y：背景图像仅在垂直方向上重复。no-repeat：背景图像不重复，只显示一次。round：背景图像会在两个方向上重复，直到正好填满背景区域，这可能需要图像被缩放。space（CSS3新增）：背景图像在两个方向上重复，如果无法完整平铺，则在图像之间插入等间距，以适应背景区域。

41知识准备--背景属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式background-position:x-positiony-position;4.background-positionx-position控制水平位置，而y-position控制垂直位置。这些值可以是关键词（如center、top、bottom、left、right）、长度单位（如像素px、百分比%）或者组合使用。

1知识准备--背景属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型关键字：center：

图像将在水平和垂直方向上居中。top,bottom,left,right:分别将图像定位在元素的上、下、左、右边。长度和百分比值：例如，50%50%会使背景图片在元素中心显示。20px30px将图片从元素的左上角开始，向右移动20px，向下移动30px。复合值：当使用三个或四个值时，前两个值可以是关键词，后跟长度或百分比作为偏移量，例如top10pxright20px。默认值：如果只提供一个值，默认另一个值为center。如果两个值都是关键词，默认它们之间没有偏移。4.background-position

41知识准备--背景属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式background-size:length|percentage|cover|contain|auto;5.background-sizebackground-size属性的值可以是一个或组合。可以是具体的长度单位（如像素px、百分比%），关键词cover、contain，或者是auto。

1知识准备--背景属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型长度值：可以为background-size提供具体的长度值，如像素（px）、厘米（cm）等。例如，background-size:100px200px;会将背景图像设置为100px宽和200px高。百分比值：百分比值是基于元素本身的尺寸来计算的。例如，background-size:50%100%;会将背景图像的宽度设置为元素宽度的50%，高度设置为元素高度的100%。cover：这个值会缩放背景图像以完全覆盖元素。图像可能不会被完整地显示，但它的所有部分都会出现在元素中。contain：这个值会缩放背景图像以完全包含在元素中。图像可能会留有一些空白区域，但图像的所有部分都会出现在元素中，且不会被裁剪。5.background-size

1知识准备--背景属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型此外，还可以使用auto

关键字，它表示背景图像应该保持其原始尺寸（在长度或百分比值的情况下）。通过background-size属性，可以确保背景图片在不同屏幕尺寸和容器大小下都能呈现出预期的展示效果，无论是填充背景、保持内容比例还是精确控制尺寸。5.background-size

1知识准备--背景属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型6.background-clip在CSS3中，background-clip属性定义了元素的背景（包括背景颜色、背景图片等）应该被裁剪到哪里。该属性通常与border-radius、padding和border一起使用，以创建各种视觉效果。

1知识准备--背景属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型6.background-clipbackground-clip属性值有：border-box：

默认值。背景会扩展到边框的外部边缘（即使边框是透明的）。padding-box：背景只会覆盖到内边距区域，不包括边框。content-box：

背景只会覆盖到内容区域，不包括内边距和边框。

1知识准备--背景属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型7.background-attachment在CSS3中，background-attachment属性用于定义背景图像是否固定或者随着页面的其余部分滚动。该属性在网页设计中非常有用，特别是想要背景图像保持静止，而内容则随着用户滚动页面时滚动。

1知识准备--背景属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型background-attachment属性值有：scroll：默认值。背景图像会随着页面的其余部分一起滚动。fixed：背景图像不会随着页面的其余部分一起滚动。即使页面内容滚动，背景图像也会保持在视口（viewport）的相同位置。local：背景图像会随着元素内容的滚动而滚动。注意，这个值主要用在设置了overflow属性（例如overflow:auto或overflow:scroll）的元素上。7.background-attachment

41知识准备--背景属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式background:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position;8.background复合属性background是一个复合属性，可以在一个声明中同时设置多个背景相关的属性。

1知识准备--线性渐变盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型CSS3引入了渐变（gradients）这一强大的功能，背景颜色在两个或多个颜色之间创建平滑的过渡。线性渐变（LinearGradients）是在两个方向（水平或垂直）上平滑过渡颜色。可以指定渐变的方向和颜色停止点。运用CSS3中的“background-image:liner-gradient(参数值)”样式可以实现线性渐变效果。线性渐变41知识准备--线性渐变border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式background:linear-gradient(direction,color-stop1,color-stop2,...);direction

是渐变的方向，可以是角度（如

45deg）或者关键字（如

toright、tobottomright

等）。color-stop

是颜色停止点，表示在渐变中的位置以及该位置的颜色。线性渐变

1知识准备--线性渐变盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型渐变角度是指水平线和渐变线之间的夹角，可以使以deg为单位的角度数值或to加left、right、top和bottom等关键字。当未设置渐变角度时，默认值为180deg，等同于tobottom。1.渐变角度

1知识准备--线性渐变盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型颜色值用于设置渐变颜色，“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色，个颜色值用英文逗号分隔。2.颜色值

1知识准备--线性渐变盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型2.颜色值例如：background-image:linear-gradient(180deg,#AF4,#4AF);

效果如图所示。

1知识准备--线性渐变盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型2.颜色值例如：background-image:linear-gradient(30deg,#AF450%,#4AF80%);

效果如图所示。在每一个颜色后面还可以加一个百分比数值，用于标识颜色渐变的位置。

1知识准备--径向渐变盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型径向渐变CSS3中的径向渐变（RadialGradient）是起始颜色从一个中心点向外辐射开来的，可以是圆形或椭圆形。径向渐变通过“radial-gradient(参数值)”函数来定义，控制渐变的中心、形状、大小以及颜色的分布。基本格式radial-gradient(shapesizeatposition,color-stop1,color-stop2,...);41知识准备--径向渐变可定义形状、大小、位置及颜色停止点。径向渐变

1知识准备--径向渐变盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型径向渐变shape:

渐变的形状，可以是circle（圆形）或ellipse（椭圆形）。默认值是ellipse。size:

渐变的大小，可以是长度值（如20px）或百分比（如50%），也可以是关键词closest-side、farthest-side、closest-corner、farthest-corner，用来定义渐变的边界。position:

渐变中心的位置，可以使用at加关键字（如center、left、top等）或具体的长度值（包括百分比），如50%50%表示居中。默认为atcentercolor-stop:

至少需要定义两种颜色停止点，以定义颜色的过渡。

1知识准备--径向渐变盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型径向渐变例如：background-image:radial-gradient(ellipseatcenter,red,blue);效果如图所示。基本格式background-image:repeating-linear-gradient(direction,color-stop1,color-stop2,...);

1知识准备--重复渐变1.重复线性渐变（repeating-linear-gradient）参数与标准的linear-gradient相同，只是渐变模式会在达到结束色标后立即重新开始，形成一个连续的重复图案。。

1知识准备--重复渐变盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型重复渐变是CSS中的一种特性，用于创建一个模式化的渐变背景，其中渐变图案会重复以填充整个元素的背景。重复渐变让渐变图案无限循环，填充整个背景，增强视觉效果。1.重复线性渐变（repeating-linear-gradient）基本格式background-image:repeating-linear-gradient(direction,color-stop1,color-stop2,...);

1知识准备--重复渐变1.重复线性渐变（repeating-linear-gradient）参数与标准的linear-gradient相同，只是渐变模式会在达到结束色标后立即重新开始，形成一个连续的重复图案。

1知识准备--重复渐变1.重复线性渐变（repeating-linear-gradient）例如：background-image:repeating-linear-gradient(toright,red,#F4F10%,#4FB20%,#B4F40%);效果如图所示。基本格式background-image:repeating-radial-gradient(shapesizeatposition,color-stop1,color-stop2,...);1知识准备--重复渐变2.重复径向渐变（repeating-radial-gradient）参数与radial-gradient相同，同样，渐变图案在达到其自然边界后会重复出现。

1知识准备--重复渐变例如：background-image:repeating-radial-gradient(circleclosest-sideatcenter,white,white10px,black10px,black20px);效果如图所示。2.重复径向渐变（repeating-radial-gradient）

实战演练—制作“红海行动影评”网页2本次任务主要是利用HTML5新增的结构化元素、背景与渐变属性等知识点完成“红海行动影评”网页的制作。整个页面包括包含头部、主体和底部。网页头部含有标题，主体包含电影简介、影片亮点、影评精选，网页底部含有版权信息。预览效果如下图所示。

实战演练—制作“红海行动影评”网页2“红海行动影评”网页制作思路：使用结构化元素header、section、footer，分组元素main等，头部用在header元素包含h1元素作为网页标题，主体部分用在main元素包含三个section元素实现电影简介、影片亮点和影评精选，底部用在footer元素包含p元素实现版权信息。可以分成两步来完成：首先制作“红海行动影评”的HTML结构代码；其次编写CSS代码。

实战演练—制作“红海行动影评”网页21.制作“红海行动影评”的HTML结构代码

实战演练—制作“红海行动影评”网页2给body元素设置页面的全局字体、内外边距以消除浏览器默认样式的影响。为header元素设置了背景色、文字颜色、内边距和文本对齐方式。为main元素设置了外边距，为section元素设置了底部外边距以分隔不同部分的内容。为电影简介中的img元素设置宽度、最大宽度、显示方式和水平居中。为应用了类名为comment的div元素设置边框、内边距、下外边距、圆角和背景色，其内的h3设置上下外边距。为footer元素设置背景色、内边距和文本居中。2.编写基础CSS代码

进阶训练—制作“女娲补天神话传说”网页3本次任务主要是利用HTML5新增的结构化元素、盒子模型等知识点完成“女娲补天神话传说”网页的制作。头部用于展示网页的标题，即“女娲补天神话传说”。主体内容包含图片、故事简介、文化意义以及一个按钮。“了解更多”用于在点击按钮后展示更多信息，默认是隐藏的。预览效果如图所示。

进阶训练—制作“女娲补天神话传说”网页3RGBA则是在RGB色彩模式的基础上增加了一个表示不透明度的Alpha通道，使得颜色可以具有透明度属性。语法为：RGBA（R，G，B，alpha)；参数alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。需要注意的是，RGBA颜色模式只能用于设置背景颜色的不透明度，不能用于设置背景图像的不透明度。

RGBA颜色模式

进阶训练—制作“女娲补天神话传说”网页3CSS3中的opacity属性用于设置元素的整体不透明度。opacity属性会让元素及其所有子元素一起变得透明或更加不透明。语法为：element{opacity:value;}；value：指定不透明度的值，范围从0.0（完全透明）到1.0（完全不透明）。

opacity属性

进阶训练—制作“女娲补天神话传说”网页3

opacity属性

opacity:1;opacity:0.2;opacity:0.5;

进阶训练—制作“女娲补天神话传说”网页31.制作“女娲补天神话传说”的HTML结构代码

进阶训练—制作“女娲补天神话传说”网页3‌给header元素设置背景色为深蓝色，文本颜色为白色，字体大小为24px，并且文本居中显示。给应用了类名为container的div元素设置最大宽度、水平居中、内边距、外边距、背景色和带有轻微的阴影效果。给应用了类名为myth-image的img元素设置最大宽度、宽度、自动调整高度、和水平居中，并且底部和左侧有一定的外边距。2.编写基础CSS代码

进阶训练—制作“女娲补天神话传说”网页3‌通过内联JavaScript编写了一个简单的函数showMore()，用于响应按钮点击事件。该函数通过getElementById获取了id为moreContent的元素，根据其当前的显示状态（display属性），切换其显示或隐藏，实现了“了解更多”内容的简单交互逻辑。3.JavaScript实现交互功能

4动手实践—制作“播放器图标”网页4运用盒子模型的相关属性、背景属性和CSS3渐变属性制作“播放器图标”，实现多个盒子嵌套模式，不同盒子采用不同颜色渐变效果、边框效果等设置。小结知识准备——背景属性实战演练——制作“红海行动影评”网页进阶训练——制作“女娲补天神话传说”网页动手实践——制作“播放器图标”网页模块五盒子模型任务3过渡与变形属性网页制作CSSHTML知识准备——过渡与变形属性实战演练——制作“产品展示”网页过度与变形属性0201进阶训练——制作“商品评论”网页03动手实践——制作“电子相册”网页04

1.掌握过渡属性的基本概念和用法

2.掌握变形属性的基本概念和用法

3.提升实践能力和创新思维过度与变形属性学习目标：

1.要求学生对待每一个细节都要精益求精，培养出良好的工作习惯和职业素养。

2.引导学生追求精益求精、不断创新的工匠精神，通过不断学习和实践，提升自己的专业技能和综合素质。

3.鼓励学生积极参与团队合作，与团队成员共同讨论和解决问题，培养团队合作精神和沟通能力。4.引导学生关注社会热点问题和环保事业，通过设计具有社会责任感的网页作品来传递正能量和环保意识。过度与变形属性思政目标：

1知识准备--过渡与变形属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型过渡属性CSS3的transition属性，用于平滑地改变元素的样式属性值。当元素的某些CSS属性值发生变化时，transition属性可以控制这些变化以动画的形式展现出来，而不是立即跳变到新的状态。为用户界面增加流畅性和动态感。

41知识准备--过渡属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式transition-property:none|all|property-name;1.transition-property属性transition-property属性值包括none、all和property(指CSS属性名）3个。

1知识准备--过渡属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型none：没有属性会获得过渡效果。all：所有可过渡属性都将获得过渡效果。property-name：指定要过渡的具体CSS属性名，如

background-color、width、transform

等。可以指定多个属性，它们之间用逗号分隔。1.transition-property属性

1知识准备--过渡属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型transition-duration属性用于定义过渡动画的持续时间，即从一个属性值变化到另一个属性值所需的时间。transition-duration属性决定了过渡效果的速度。2.transition-duration属性

41知识准备--过渡属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式transition-duration:time;2.transition-duration属性transition-duration属性的默认值为0；time的值为指定过渡效果持续的时间，可以是秒（s）或毫秒（ms），例如

0.5s

或

500ms。

1知识准备--过渡属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型可以为不同的过渡属性指定不同的持续时间，它们之间用逗号分隔。但是，通常与

transition-property

一起使用时，会为所有指定的过渡属性设置相同的持续时间，除非有特定需求要分别为它们设置不同的值。2.transition-duration属性

1知识准备--过渡属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型3.transition-timing-function

属性transition-timing-function

属性是定义了过渡效果的时间曲线，即过渡动画的“速度”如何随时间变化。可以控制动画在开始、进行和结束时的加速或减速，从而创造出平滑或突然的过渡效果。

41知识准备--过渡属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);控制动画在开始、进行和结束时的加速或减速3.transition-timing-function

属性

1知识准备--过渡属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型transition-timing-function属性的取值具体说明如下：ease：默认值，表示动画以慢速开始，然后加快，在结束前变慢。linear：动画从头到尾的速度是相同的。ease-in：动画以慢速开始。ease-out：动画以慢速结束。ease-in-out：动画以慢速开始和结束，中间加速。cubic-bezier(n,n,n,n)：允许定义自己的贝塞尔曲线。四个值在0到1之间，定义了曲线控制点的X和Y坐标。3.transition-timing-function

属性

1知识准备--过渡属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型transition-delay属性指定在过渡效果（transitioneffect）开始之前需要等待的时间，即过渡动画开始前的一段延迟时间。4.transition-delay属性

41知识准备--过渡属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式transition-delay:time;4.transition-delay属性time：指定延迟的时间，可以是秒（s）或毫秒（ms）。默认值为0，表示没有延迟

1知识准备--过渡属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型transition属性是CSS3中的一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay这4个过渡属性。5.transition属性

41知识准备--过渡属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式transition:propertydurationtiming-functiondelay;5.transition属性各个参数值之间用空格分隔，且必须按照顺序进行定义，不能颠倒。

1知识准备--变形属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。在CSS3中，变形（transform）是指对页面元素进行旋转、缩放、倾斜、位移等视觉效果的处理。这些变形效果可以通过CSS3的transform属性及其相关的函数来实现，为网页添加了更多的动态和交互性。CSS3的变形指的是利用transform属性对元素进行以下类型的变形处理。变形属性

1知识准备--变形属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型1.平移（translate）平移（translate）是指元素在页面中位置上的变化，即沿水平（X轴）和垂直（Y轴）方向同时移动，而不影响页面上其他元素的布局。

41知识准备--变形属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式transform:translate(tx,ty);tx是沿X轴的位移量，ty是沿Y轴的位移量，tx和ty可以是像素（px）、百分比（%）或其他长度单位。如果省略ty，则默认为0，即仅沿X轴移动。1.平移（translate）

1知识准备--变形属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型在使用translate移动元素时，坐标的初识位置默认为元素的中心点，在图5-41中，①表示移动前的元素，②表示移动后的元素。1.平移（translate）

1知识准备--变形属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型2.缩放（scale）在CSS3中，缩放（scale）可以对元素进行缩放操作，即改变元素的尺寸大小，包括宽度和高度。

41知识准备--变形属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式transform:scale(x,y);x和y分别代表水平方向和垂直方向的缩放比例。如果x和y值相同，那么元素会等比例缩放；如果不同，则元素会按照指定的比例进行非等比例缩放。2.缩放（scale）

1知识准备--变形属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型当x和y的值大于1时，元素会放大。当x和y的值在0到1之间时，元素会缩小。如果只指定了一个值，那么另一个方向也会应用相同的值。2.缩放（scale）

1知识准备--变形属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型2.缩放（scale）放大1.5倍后效果初始效果

41知识准备--变形属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式transform:skew(ax,ay);3.倾斜（skew）ax是一个角度值，表示沿X轴的倾斜角度。ay是一个角度值，表示沿Y轴的倾斜角度。

1知识准备--变形属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型ax是为正值会使元素向右倾斜，为负值会使元素向左倾斜。ay是为正值会使元素向下倾斜，为负值会使元素向上倾斜。角度可以是度数（deg）、弧度（rad）、梯度（grad）或转角（turn），但最常见的是使用度数。其中如果省略ay，则默认为0，即仅沿X轴倾斜。3.倾斜（skew）

1知识准备--变形属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型transform:skew(30deg);3.倾斜（skew）41知识准备--变形属性border-style：上边框样式[右边框样式

下边框样式

左边框样式]；基本格式transform:rotate(angle);angle是旋转的角度，可以是正数或负数，表示顺时针或逆时针方向旋转。4.旋转（rotate）

1知识准备--变形属性盒子模型是网页布局的基础，每个HTML元素被视为一个矩形盒子。什么是盒子模型transform:rotate(45deg);4.旋转（r