《网页设计与制作（HTML5+CSS3）》课件 项目2 科技在线

科技在线制作“科创匠心”页面CONTENTS目录盒子模型第一部分DIV标记第二部分盒子模型的组成部分第三部分CONTENTS目录CSS3设置盒子box-sizing属性第四部分盒子模型第一部分盒子模型盒子模型是CSS中的一个基本概念，它代表了HTML元素的布局方式。所有的HTML元素都可以看做是一个盒子，通过盒子模型，可以精确地控制元素的大小、位置、边距、填充和边框。盒子模型边框内边距外边距盒子模型网页中的每个元素都可以看做是一个矩形的盒子，每个盒子都由内容（content）、内边距（padding）、外边距（margin）和边框（border）组成，如图所示。这四个部分的共同作用，决定了元素在页面上的最终显示效果。DIV标记第二部分DIV标记通常网页中的元素可以分为以下两种：行内元素HTML标记块元素DIV标记大多数HTML标记都可以嵌套在DIV标记中，DIV标签中还可以嵌套多层DIV。<div>

内部相当于是一个“盒子”可以容纳段落、标题、表格、图像 等各种网页元素。</div>DIV标记DIV标记的用途布局容器：用来创建页面的布局结构内容分组：将相关的元素组合在一起，形成一个独立的部分样式应用：为DIV元素添加类或ID属性，为目标元素应用特定的样式响应式设计：在响应式网页设计中，DIV元素可以被用来创建灵活的布局盒子模型的组成部分第三部分盒子模型的组成部分一个盒子从内到外依次包括4个部分：内容（content）、内边距（padding）、边框（border）和外边距（margin）。盒子模型的组成部分其中，content是网页元素的内容。padding、border和margin是CSS属性，通过这三个属性可以控制盒子的这三部分。盒子实际所占的宽度（高度）=内容+内边距+边框+外边距盒子模型的组成部分1.内容content内容（content）是盒子模型的核心部分，也就是元素的实际内容，它包含了文本、图像等元素。内容区域是盒子模型中唯一不可或缺的部分，其他三部分都是可选的。盒子模型的组成部分2.内边距padding内边距用于控制内容与边框之间的距离。内边距进一步细化，即上、下、左、右4个内边距，对应的属性如表2-1-1所示。属性说明padding-top上内边距padding-bottom下内边距padding-left左内边距padding-right右内边距表2-1-1内边距及属性盒子模型的组成部分2.内边距paddingpadding属性值的个数3个值2个值1个值表示上、下、左、右4个内边距均为该属性值前者表示上、下内边距的属性值，后者表示左、右内边距的属性值第1个为上内边距的属性值，第2个为左、右内边距的属性值，第3个为下内边距的属性值4个值按照顺时针方向，依次是上、右、下、左内边距的属性值盒子模型的组成部分3.边框border边框（border）围绕在内边距的外围，用于定义内边距和外边距之间的界限，同时也起到了美化元素的作用。边框是占据空间的，因此在计算元素的尺寸时，要把边框也考虑进去。盒子模型的组成部分3.边框bordercolorborder-colorwidthstyleborder-widthborder-style盒子模型的组成部分3.边框borderborder-color用来设置边框的颜色，其属性值可以是颜色名称（如red、blue）、十六进制颜色值（如#FF0000、#0000FF）、RGB值（如rgb(255,0,0)）、RGBA值（rgba(255,0,0,0.5)）或HSL函数（如hsl(0,100%,50%)）等。盒子模型的组成部分3.边框borderborder-width用来设置边框的粗细程度，其属性值可以是具体的长度单位（如px、em、rem等），或者是相对单位（如thin、medium、thick）。盒子模型的组成部分3.边框borderborder-style定义了边框的外观，其常见的样式参照表2-1-2所示。属性值说明属性值说明solid实线ridge3D垄状dotted点线inset3D内嵌dashed虚线outset3D外嵌double双线none无边框groove3D凹槽hidden隐藏边框表2-1-2border-style常见属性值盒子模型的组成部分3.边框border盒子模型的组成部分3.边框border为了简化使用，可以通过一行代码来为边框同时设置宽度、颜色和样式，此时可以使用如下的代码。border:2pxredsolid;通过上述代码，就可以为4个边框同时设置其宽度为2px，颜色为红色，边框线为实线。盒子模型的组成部分3.边框border在为边框设置属性时，当有多条语句作用于同一个边框时，后面的语句代码会覆盖前面的代码。所以，我们有时为了给某条边框单独设置某个属性时，可以先通过border属性来设置整体边框属性，再单独为某一条边框设置其独有属性值。盒子模型的组成部分4.外边距margin外边距（margin）是元素之间的间隔，它决定了元素与其他元素之间的距离。通过调整外边距，我们可以控制元素之间的相互位置关系，从而影响整体布局。margin:5px;

/*设置外边距为5px*/在案例2-1-1的基础上对代码进行完善，在DIV标记选择器中为其增加外边距的属性设置。具体代码如下。盒子模型的组成部分4.外边距margin各盒子之间具有了一定间距盒子模型的组成部分5.盒子的宽和高一个完整的网页是由多个盒子经过合理排列布局形成的，每个盒子都有其特定的大小。在CSS中，使用width和height属性来控制盒子的宽度和高度。width和height的属性值可以是不同单位的数值，也可以是相对于父元素的百分比。在实际应用中，使用最多的是像素值。盒子模型的组成部分5.盒子的宽和高CSS3设置盒子背景属性第一部分CSS3设置盒子box-sizing属性第四部分CSS3设置盒子box-sizing属性box-sizing是CSS中的一个属性，它用于定义如何计算元素的总宽度和高度。这个属性对于控制元素的盒模型（包括内容、内边距、边框和外边距）非常关键。CSS3设置盒子box-sizing属性box-sizing属性值content-boxborder-boxCSS3设置盒子box-sizing属性当box-sizing设置为content-box时，元素的宽度和高度仅包括内容区域的尺寸，不包括内边距、边框和外边距。这意味着，如果你增加内边距或边框，元素的总尺寸也会相应增加。当box-sizing设置为border-box时，元素的宽度和高度包括内容区域、内边距和边框。外边距不会包含在内。这意味着，即使增加内边距或边框，元素的总尺寸也不会改变，因为这些增加的部分是从元素的宽度和高度中扣除的。CSS3设置盒子box-sizing属性科技在线制作“前沿科技”页面CONTENTS目录CSS3设置盒子背景属性第一部分CSS3设置盒子渐变属性第二部分CSS3设置盒子阴影属性第三部分CSS3设置盒子背景属性在网页设计中，背景设计是塑造视觉层次感和营造特定氛围的关键手段，而CSS背景属性为我们提供了强大的工具来细致控制网页元素的背景，包括颜色、图像、尺寸和定位。使用背景属性能够轻松地为网页元素设计出丰富而个性化的背景效果，进而显著增强网页的视觉冲击力和优化用户的互动体验。CSS3设置盒子背景属性1.背景颜色background-color属性是CSS中用于设置元素背景颜色的关键属性。通过它，我们可以为元素指定单一的纯色背景，这种颜色会覆盖元素的内容区域、内边距（padding）以及边框区域，并且会延伸到边框的外部边界。如果边框有透明部分，如虚线边框，背景颜色会透过这些透明区域显示出来。CSS3设置盒子背景属性1.背景颜色background-color属性支持多种颜色定义方式：①颜色名称关键词：使用预定义的颜色名称，如red、blue等。②十六进制值：使用十六进制颜色代码，如#fff（白色）、#000（黑色）、#6e6e6e（一种灰色）等。③RGB值：使用RGB函数定义颜色，如rgb(255,255,255)（白色）、rgb(0,0,0)（黑色）等。RGB值允许更精确的颜色定义。④RGBA值：使用RGBA函数定义颜色，允许设置透明度，如rgba(0,0,0,0.5)表示半透明的黑色。CSS3设置盒子背景属性1.背景颜色在案例中添加CSS样式代码来设置盒子的背景。div{

width:600px;}.color_one{

background-color:aqua;}.color_two{

background-color:#ff0000;}.color_three{

background-color:rgb(255,255,125);}CSS3设置盒子背景属性2.背景图像background-image属性在CSS中用于为网页元素添加背景图像，无论是整个页面还是单独的元素。这个属性允许你设置一个或多个背景图像，通过url()函数指定图像文件的路径。支持使用相对路径和绝对路径来定位图像文件。背景图像可以是任何图片格式，如JPEG、PNG、GIF或SVG。通过灵活使用background-image属性，我们可以为网页元素添加丰富的视觉效果，增强页面的吸引力和用户体验。CSS3设置盒子背景属性2.背景图像在上个案例中添加背景图像。.color_three{

background-image:url(img/2-1.jpg);

color:#fff;

}CSS3设置盒子背景属性2.背景图像——背景图像平铺在CSS中，background-repeat属性用于控制背景图像的平铺方式。该属性可以设置为以下几种值：repeatrepeat-xrepeat-yno-repeatCSS3设置盒子背景属性2.背景图像repeat背景图像在垂直和水平方向上平铺，直到填满整个元素的背景。背景图像只在水平方向上平铺。repeat-x背景图像只在垂直方向上平铺。repeat-y背景图像不进行平铺，只显示一次。no-repeatCSS3设置盒子背景属性2.背景图像——背景图像平铺背景图像平铺的应用有很多应用，比如：通过平铺小图像，可以创建复杂的图案效果；使用大图像的一小部分平铺，可以填充整个背景，而不需要加载整个大图像，有助于提高性能；在某些设计中，可能需要背景图像在特定方向上重复，以符合设计要求。通过合理设置background-repeat属性，你可以控制背景图像的显示方式，以满足不同的设计需求。CSS3设置盒子背景属性2.背景图像——背景图像大小在CSS中，background-size属性用于控制背景图像的尺寸。这个属性允许你指定背景图像的宽度和高度，或者使用特定的关键字来控制图像的显示方式。autocovercontainlengthpercentageCSS3设置盒子背景属性2.背景图像——背景图像大小背景图像大小主要是用于使用cover或contain可以创建响应式的背景图像，它们能够适应不同尺寸的屏幕；或者设置具体的尺寸或百分比，你可以控制背景图像的显示区域，实现图像的裁剪效果，确保背景图像在不同元素或不同页面上保持一致的显示效果。通过合理使用background-size属性，你可以控制背景图像的显示尺寸，以满足不同的设计需求和布局要求。CSS3设置盒子背景属性2.背景图像——背景图像大小在上个案例中设置背景图像大小。.img_size{

background-image:url(img/2-2.png);

/*设置背景平铺*/background-repeat:repeat;

/*设置背景大小*/

background-size:300px300px;

}CSS3设置盒子背景属性2.背景图像——背景图像大小在上个案例中设置背景图像平铺和大小。.img_size{

background-image:url(img/2-2.png);

/*设置背景不平铺*/background-repeat:no-repeat;

/*设置背景大小*/

background-size:300px300px;

}CSS3设置盒子背景属性2.背景图像——背景图像大小背景图像大小主要是用于使用cover或contain可以创建响应式的背景图像，它们能够适应不同尺寸的屏幕；或者设置具体的尺寸或百分比，你可以控制背景图像的显示区域，实现图像的裁剪效果，确保背景图像在不同元素或不同页面上保持一致的显示效果。通过合理使用background-size属性，你可以控制背景图像的显示尺寸，以满足不同的设计需求和布局要求。CSS3设置盒子背景属性2.背景图像——背景图像固定在CSS中，background-attachment属性用于控制背景图像是否固定或者随着页面滚动而移动。这个属性主要有以下几个值：scrollfixedlocalinheritCSS3设置盒子背景属性2.背景图像——背景图像固定scroll：这是默认值。背景图像会随着元素所在的页面滚动。fixed：背景图像固定在视口中，即使页面滚动，背景图像也不会移动。local：背景图像会随着元素内容的滚动而移动，如果内容没有溢出元素，那么背景图像的行为就像scroll。inherit：元素继承其父元素的background-attachment属性值。CSS3设置盒子背景属性2.背景图像——背景图像固定使用background-attachment属性时，需要注意它的效果可能在不同的浏览器和设备上有所差异，特别是在性能方面。在某些情况下，固定背景图像可能会导致页面滚动时的重绘问题，影响性能。因此，在使用fixed值时，需要确保它不会对用户体验产生负面影响。CSS3设置盒子背景属性2.背景图像——背景图像位置在CSS中，当我们给图片设置不平铺后，如果图像的大小小于盒子模型的大小，那么默认背景图片会显示在左上角。如果想要调整背景图片所在的位置，就要使用background-position属性，这个属性通常接收两个值，主要使用预定义好的位置关键字，常用的属性值如下。topleft：将背景图像的左上角放置在元素的左上角。topright：将背景图像的右上角放置在元素的右上角。topcenter：将背景图像的顶部中点放置在元素的顶部中心。bottomleft：将背景图像的左下角放置在元素的左下角。CSS3设置盒子背景属性2.背景图像——背景图像位置bottomright：将背景图像的右下角放置在元素的右下角。bottomcenter：将背景图像的底部中点放置在元素的底部中心。centercenter：将背景图像的中心点放置在元素的中心点。centerleft：将背景图像的左侧中点放置在元素的左侧中心。centerright：将背景图像的右侧中点放置在元素的右侧中心。centertop：将背景图像的顶部中点放置在元素的顶部中心。centerbottom：将背景图像的底部中点放置在元素的底部中心。CSS3设置盒子背景属性2.背景图像——背景图像位置在上个案例中设置背景图像平铺和大小。.img_position{

background-image:url(img/2-3.png);/*设置背景不平铺*/

background-repeat:no-repeat;

background-position:righttop;

}CSS3设置盒子背景属性2.背景图像——背景图像的裁剪区域在CSS中，background-clip属性决定了背景（包括背景颜色、背景图像和边框）的绘制区域。它指定了背景应该被裁剪到哪个盒子模型的区域。background-clip属性可以设置为以下值：border-box：这是默认值。背景延伸到边框（border）的边缘，覆盖整个边框区域。padding-box：背景延伸到内边距（padding）的边缘，但不包括边框。content-box：背景仅延伸到内容（content）区域，不包括内边距和边框。text：背景仅延伸到元素内的文本区域，不包括元素的其他部分。CSS3设置盒子背景属性2.背景图像——多重背景图像在CSS中，你可以为一个元素设置多个背景图像，这可以通过在background-image属性中用逗号分隔不同的图像来实现。每个背景图像可以有自己的重复方式、位置、尺寸和裁剪方式等，他们的属性同样也按照顺序使用逗号分隔。CSS会按照从上到下的顺序堆叠这些背景图像，即后面声明的图像会在前面声明的图像之下显示。CSS3设置盒子背景属性2.背景图像——多重背景图像在上个案例中设置背景图像平铺和大小。.double_img{

background-image:url(img/2- 5.png),url(img/2-6.png);

background-repeat:no-repeat;

background-size:200px,400px;

background-position:righttop,lefttop;

}CSS3设置盒子背景属性2.背景图像——多重背景图像使用多个背景图像可能会影响页面加载性能，尤其是在移动设备上。而且大多数现代浏览器都支持多重背景图像，但在一些旧的浏览器版本中可能存在兼容性问题，在这些环境中使用时需要进行测试，因此应当谨慎使用。CSS3设置盒子背景属性3.背景不透明度在CSS中，调整背景的不透明度可以通过几种不同的方法来实现。最直接的方法是使用RGBA颜色值或者使用CSS的opacity属性。不过，需要注意的是，opacity属性会影响元素及其所有子元素的不透明度，而不仅仅是背景。CSS3设置盒子背景属性3.背景不透明度——使用RGBA颜色值RGBA颜色值允许你指定颜色的红、绿、蓝值以及一个额外的alpha通道，用于设置颜色的不透明度。RGBA的取值范围是从0（完全透明）到1（完全不透明）。CSS3设置盒子背景属性3.背景不透明度——使用opacity属性opacity属性可以设置元素的不透明度。这个属性会影响元素及其所有子元素。如果你只想设置背景的不透明度，而不影响元素内的其他内容，你可能需要考虑使用其他方法，如在背景图像上叠加一个伪元素，并为该伪元素设置opacity。CSS3设置盒子背景属性3.背景不透明度CSS3设置盒子背景属性4.背景的显示区域background-origin属性在CSS中用于设置背景图片的定位区域。这个属性决定了background-position属性是相对于哪个区域来定位背景图像的。background-origin有三个不同的值：border-boxpadding-boxcontent-boxCSS3设置盒子背景属性4.背景的显示区域border-boxpadding-boxcontent-box背景图像相对于边框盒（borderbox）来定位。背景图像相对于内边距框（paddingbox）来定位。背景图像相对于内容框（contentbox）来定位。CSS3设置盒子背景属性4.背景的显示区域当设置多个背景图像时，可以为每个背景图像指定不同的background-origin属性值，用逗号分隔，每个图像都将与background-origin属性的相应值匹配。如果元素的background-attachment属性设置为fixed，则background-origin属性将不会产生影响，因为固定背景是相对于视口定位的。在实际应用中，background-origin可以与background-position、background-repeat等属性结合使用，以更精确地控制背景图像在元素中的位置和显示区域。CSS3设置盒子背景属性4.背景的显示区域CSS3设置盒子背景属性4.背景的显示区域添加代码background-origin:content-box;后显示效果CSS3设置盒子背景属性5.背景复合属性CSS提供了一个复合属性background，它允许你在单个声明中设置所有的背景属性。这包括背景颜色、背景图像、背景重复、背景位置、背景尺寸和背景附加等。使用这个复合属性可以使你的CSS更加简洁和易于维护。CSS3设置盒子背景属性5.背景复合属性background-color：设置元素的背景颜色。background-image：设置元素的背景图像，可以使用多个url()。background-repeat：设置背景图像的重复方式。background-attachment：设置背景图像是否固定或滚动。background-position：设置背景图像的位置。CSS3设置盒子背景属性5.背景复合属性CSS3设置盒子背景属性5.背景复合属性在使用背景复合属性的时候需注意：①顺序重要：在复合属性中，各个子属性的顺序与单独声明时相同。②简写属性：background是一个简写属性，如果省略某个子属性，CSS会使用该属性的默认值。③兼容性：大多数现代浏览器都支持background复合属性，但在一些旧的浏览器版本中可能存在兼容性问题。CSS3设置盒子渐变属性第二部分CSS3设置盒子渐变属性在CSS3中，可以使用linear-gradient或radial-gradient函数来创建渐变背景。这些函数允许你指定渐变的方向、颜色以及颜色停止点。CSS3设置盒子渐变属性1.线性渐变线性渐变（LinearGradient）是一种颜色渐变效果，它沿着一条直线从一个颜色过渡到另一个颜色。在CSS3中，可以使用linear-gradient函数来创建线性渐变背景。基本语法如下：background:linear-gradient(direction,color-stop1,color-stop2,...);CSS3设置盒子渐变属性1.线性渐变direction方向关键字的属性值：tobottom：从上到下。toright：从左到右。tobottomright：从左上到右下。totop：从下到上。

toleft：从右到左。totopleft：从右下到左上。totopright：从左下到右上。tobottomleft：从右上到左下。

CSS3设置盒子渐变属性1.线性渐变direction角度值也可以使用角度值来指定渐变的方向。角度值是从元素的正上方开始，顺时针测量的。CSS3设置盒子渐变属性1.线性渐变CSS3设置盒子渐变属性2.径向渐变径向渐变（RadialGradient）是一种颜色渐变效果，它从一个中心点向外辐射，形成一个圆形或椭圆形的渐变。在CSS3中，可以使用radial-gradient函数来创建径向渐变背景。这个函数是background-image属性的一个值。基本语法如下：background:radial-gradient(shapesizeatposition,start-color,...,last-color);CSS3设置盒子渐变属性2.径向渐变shape：可以是circle或ellipse。size：可以是closest-side、closest-corner、farthest-side、farthest-corner或具体的大小（如50px）。atposition：可以是center或具体的坐标（如topleft、20px30px）。start-color,...,last-color：定义颜色在渐变中的位置和颜色值。CSS3设置盒子渐变属性2.径向渐变shape形状关键字可以取的值有：circle：创建一个圆形渐变。ellipse：创建一个椭圆形渐变。closest-side：渐变的大小是到最接近边的距离。farthest-side：渐变的大小是到最远边的距离。closest-corner：渐变的大小是到最近角的距离。farthest-corner：渐变的大小是到最远角的距离。CSS3设置盒子渐变属性2.径向渐变渐变的中心位置可以是center等位置关键字，也可以是具体的位置值，如20px30px。CSS3设置盒子渐变属性2.径向渐变CSS3设置盒子渐变属性3.重复渐变在CSS3中，重复渐变是一种特殊的渐变类型，它允许你重复一个渐变模式，而不是让它平滑过渡到一个单一的颜色。这可以通过repeating-linear-gradient和repeating-radial-gradient属性来实现。语法格式如下：background:repeating-linear-gradient(direction,color-stop1,color-stop2,...);background:repeating-radial-gradient(shapesizeatposition,color-stop1,color-stop2,...);CSS3设置盒子渐变属性3.重复渐变CSS3设置盒子阴影属性第三部分CSS3设置盒子阴影属性在CSS3中，box-shadow属性用于在元素的框架上添加阴影效果。这个属性可以为元素添加一个或多个阴影，可以是简单的阴影，也可以是多层、不同颜色和模糊效果的复杂阴影。CSS3设置盒子阴影属性在CSS3中，box-shadow属性用于在元素的框架上添加阴影效果。这个属性可以为元素添加一个或多个阴影，可以是简单的阴影，也可以是多层、不同颜色和模糊效果的复杂阴影。box-shadow:h-shadowv-shadowblurspreadcolorinset;CSS3设置盒子阴影属性h-shadow：水平阴影的位置，正值将阴影向右移动，负值向左移动。v-shadow：垂直阴影的位置，正值将阴影向下移动，负值向上移动。blur：模糊半径，值越大阴影越模糊。spread：阴影的扩散半径，正值会使阴影扩大，负值会使阴影缩小。color：阴影的颜色。inset：可选，如果添加这个关键字，阴影会位于元素内部而不是外部。CSS3设置盒子阴影属性科技在线制作“科普课堂”页面CONTENTS目录元素的类型第一部分元素转换第二部分元素的类型第一部分元素的类型HTML标记语言提供了多样的标记，用以构建网页的结构。这些标记一般可分为行内元素和块元素。通过合理使用这些元素，我们可以更加便捷和有序地组织页面布局。掌握这些元素的属性也对于后续我们使用CSS进行样式设计和页面布局至关重要。元素的类型1.行内元素行内元素又称为内联元素或者内嵌元素，这类元素通过会与其它行内元素并排显示在同一行内，它们不会独自占据一行。行内元素通常是不允许设置高度、宽度或对齐方式等属性的，而是依赖其包含的文本或图像的尺寸来确定其大小。这类元素主要应用于控制页面中文本的样式。<strong><ins><em><del><sup><sub><a><span>元素的类型2.块元素块元素在网页中呈现为独立的区域块，它们会占据完整的一行或者多行。对于块级元素，我们可以为它们设置宽度、高度和对齐方式等属性。这类元素通常用于构建网页的整体结构和布局，使得页面显得更加灵活多样。<div><p><h1>~<h6><ul><ol>元素的类型2.块元素元素的类型2.块元素元素的类型3.<span>标记<span>标记是行内元素中最重要的行内元素，它本身没有特定的语义含义，表示“范围”，只能被作为包含文本和行内标记的容器。在<span>标记中允许嵌套多层<span>标记。元素的类型3.<span>标记当网页中某些文本内容需要以特殊方式显示时，可以使用<span>标记，配合class属性使用。常需要使用<span>标记的场景有以下几种。文本格式化：对于文本中某些需要设置特殊样式的部分，可以使用<span>标记来实现。隐藏内容：通过display:none属性，可以将<span>标记内的内容隐藏。元素的类型3.<span>标记控制间距：通过设置margin和line-height属性，可以调整<span>标记内内容的间距和对齐方式。元素的类型3.<span>标记元素的类型3.<span>标记在块级元素中可以嵌套行内元素，例如在<p>、<div>标记中可以嵌套<span>和<a>标记等，但是在行内元素中只能嵌套行内元素或行内块元素，不可以直接包含块元素。元素的类型3.<span>标记某些特殊的块级元素（如<p>、<h1>~<h6>、<dt>）内部不能嵌套任何块级元素，只能嵌套行内元素或行内块元素。元素转换第二部分元素转换HTML网页中是由多个块元素和行内元素经过有序排列布局形成的，为了灵活地控制页面布局，使不同的显示类型具有不同的样式特性，后者是为了解决元素重叠、间距不一致等页面布局的问题，通常会使用元素类型转换来实现，以此提高开发效率，开发者可以创造出更加丰富和动态的网页界面。元素转换在CSS中，通常使用display属性来实现元素类型的转换，改变元素的默认显示方式。display属性常用的属性值及含义如表2-3-1所示。属性值含义inline元素显示为行内元素（行内元素默认的display属性值）block元素显示为块元素（块元素默认的display属性值）inline-block元素显示为行内块元素。可以为元素设置宽度、高度和对齐方式等属性，但是该元素不会独占一行。none元素被隐藏，不显示也不占用页面空间。flex容器元素转换为弹性盒子grid容器元素转换为网格布局表2-3-1

display属性常用的属性值元素转换元素类型常见的应用如下。块级元素转换为行内元素<divstyle="display:inline;">/*<div>转换为行内元素*/行内元素转换为块元素<spanstyle="display:block">/*<span>转换为块元素*/元素转换行内元素转换为行内块元素/*<span>转换为行内块元素*/<spanstyle="display:inline-block">块元素转换为行内块元素/*<h1>转换为行内块元素*/<h1style="display:inline-block">元素转换案例2-3-3。元素转换运行效果如下。科技在线制作首页CONTENTS目录网页中嵌入多媒体技术概述第一部分嵌入音频和视频第二部分过渡、变形和动画第三部分网页中嵌入多媒体技术概述第一部分网页中嵌入多媒体技术概述在HTML网页中嵌入多媒体内容，如视频、音频和图片，对于提升网页的互动性和吸引力起着至关重要的作用。多媒体元素不仅能够提供视觉和听觉上的丰富体验，还能够增强信息的传达效果，使内容更加生动有趣。网页中嵌入多媒体技术概述在HTML5中，嵌入视频和音频的方式相对简单，我们只需要通过两个标记<video>和<audio>，就可以分别将视频和音频插入到页面中。网页中嵌入多媒体技术概述1.HTML5支持的视频格式HTML5并非对所有的视频和音频格式都支持，常用的视频格式有以下几种。mp4：支持H.264编码。mp4格式是最常用的视频格式之一，几乎所有的现代浏览器都支持这种格式。webm：谷歌开发的格式，使用VP8或VP9编码，可以在大多数现代浏览器中播放。ogg：开放媒体格式，使用Vorbis编码，可以在大多数现代浏览器中播放。网页中嵌入多媒体技术概述1.HTML5支持的视频格式MP4兼容性最广泛WebM文件较小、视频质量高Ogg开放性强、无专利限制网页中嵌入多媒体技术概述2.HTML5支持的音频格式HTML5常用的音频格式有以下几种。mp3：最流行的音频格式之一，几乎所有的现代浏览器都支持mp3格式。wav：波形音频格式，是一种无损音频格式，支持未压缩的音频数据，大多数浏览器都支持wav格式。ogg：一种开源的音频压缩格式，提供较高的压缩效率和音质，被一些浏览器支持。网页中嵌入多媒体技术概述2.HTML5支持的音频格式aac：高级音频编码，是一种专为声音设计的文件格式，提供比mp3更好的音质。aac格式在Safari浏览器和iOS设备上具有较好的支持。flac：自由无损音频编码器，是一种无损音频压缩格式，但并不是所有浏览器都支持这种格式。MIDI：乐器数字接口（MusicalInstrumentDigitalInterface），是一种电子乐器和计算机音乐软件之间通信的标准协议，用于音乐制作和电子音乐。嵌入音频和视频第二部分嵌入音频和视频1.在HTML5中嵌入音频在HTML5中嵌入音频很简单，通过使用<audio>标记来实现，它的基本语法格式如下。<audiosrc="音频文件路径"controls="controls"></audio>src属性用于指定音频文件的路径，controls属性会在音频播放器中添加控件，如播放、暂停按钮和音量控制等。在<audio>标记之间可以插入文字，当音频无法正常播放时，显示该文字信息。嵌入音频和视频1.在HTML5中嵌入音频嵌入音频和视频1.在HTML5中嵌入音频为了保证在不同的浏览器中，音频都可以正常播放，设计者通常需要为<audio>标记提供多个音频文件，这时可以通过使用<source>标记来实现，其基本的语法格式如下。<audiocontrols="controls">

<sourcesrc="音频文件路径1"type="媒体文件类型/格式">

<sourcesrc="音频文件路径2"type="媒体文件类型/格式">

......</audio>嵌入音频和视频1.在HTML5中嵌入音频在上述语法格式中，<source>标记用于指定音频文件的路径和类型，type属性用于指定音频文件的类型，音频文件的类型有以下几种。mp3：audio/mpegwav：audio/wavogg：audio/ogg或audio/vorbis嵌入音频和视频1.在HTML5中嵌入音频此外，我们还可以为音频设置自动播放和循环播放。其中，自动播放可以通过autoplay属性来实现，循环播放可以通过添加loop属性来实现。嵌入音频和视频1.在HTML5中嵌入音频嵌入音频和视频1.在HTML5中嵌入音频由于用户体验和浏览器安全政策的原因，某些浏览器可能会阻止自动播放音频或视频。因此，即便设置了autoplay属性，音频可能不会在所有浏览器中自动播放。此外，在使用autoplay属性时要谨慎，避免对用户造成干扰。嵌入音频和视频2.在HTML5中嵌入视频同嵌入音频类似，要在HTML5中嵌入视频，需要通过使用<video>标记来实现，它的基本语法格式如下。<videosrc="视频文件路径"controls="controls"></video>src属性用于指定视频文件的路径，controls属性会在视频播放器中添加控件，如播放、暂停按钮和音量控制等。在<video>标记之间可以插入文字，当视频无法正常播放时，显示该文字信息。嵌入音频和视频2.在HTML5中嵌入视频嵌入音频和视频2.在HTML5中嵌入视频与嵌入音频类似，为了保证浏览器能够正常播放视频，我们也需要指定多个视频文件。这时也需要通过<source>标记来实现，其基本语法格式如下。<videocontrols="controls">

<sourcesrc="视频文件路径1"type="媒体文件类型/格式">

<sourcesrc="视频文件路径2"type="媒体文件类型/格式">

......</video>嵌入音频和视频2.在HTML5中嵌入视频在上述语法格式中，<source>标记用于指定视频文件的路径和类型，type属性用于指定视频文件的类型，视频文件的类型有以下几种。mp4：video/mp4webm：video/webmogg：video/ogg嵌入音频和视频2.在HTML5中嵌入视频此外，我们还可以为视频设置自动播放、循环播放和静音播放。其中，自动播放可以通过autoplay属性来实现，循环播放可以通过添加loop属性来实现，静音播放可以通过muted属性来实现。嵌入音频和视频2.在HTML5中嵌入视频过渡、变形和动画第三部分transition-timing-functiontransition-property过渡、变形和动画1.过渡CSS3的过渡属性是一种强大的工具，它允许元素在状态变化时以平滑的方式过渡，而不是突然地跳跃。过渡的属性transition-durationtransition-delay过渡、变形和动画1.过渡transition-property：用于指定哪些CSS属性将参与过渡效果。可以设置为具体的属性名，如“width”、“height”等，也可以使用“all”来表示所有可过渡的属性都将应用过渡效果，或者使用“none”来不指定任何过渡属性。transition-delay过渡、变形和动画1.过渡transition-duration：定义过渡效果需要花费的时间，即过渡效果的持续时间。时间可以以秒（s）或毫秒（ms）为单位，且不能为0，否则过渡效果将不会显示。transition-delay过渡、变形和动画1.过渡transition-timing-function：用于设置过渡效果的时间函数，即过渡的速度曲线。它决定了过渡在其持续周期内的进度方式。常见的预定义值有“linear”（匀速）、“ease”（先快后慢）、“ease-in”（加速）、“ease-out”（减速）和“ease-in-out”（先加速后减速）。此外，还可以使用cubic-bezier()函数来自定义贝塞尔曲线，以实现更复杂的过渡效果。transition-delay过渡、变形和动画1.过渡transition-delay：指定过渡效果开始前的延迟时间。时间同样可以以秒（s）或毫秒（ms）为单位，允许你控制过渡效果的开始时间，使其与页面上的其他动画或交互同步。transition-delaytransition-timing-functiontransition-property过渡、变形和动画1.过渡CSS3的过渡属性是一种强大的工具，它允许元素在状态变化时以平滑的方式过渡，而不是突然地跳跃。transitiontransition-durationtransition-delay1234通常按照1324的顺序书写过渡、变形和动画1.过渡transition-delay将鼠标悬停在按钮上，可以看到按钮的背景颜色逐渐变的更绿，字体的颜色也由白色逐渐过渡到黄色。过渡、变形和动画2.变形CSS3的变形属性主要是transform及其相关属性，这些属性允许我们对HTML元素进行旋转、缩放、移动或倾斜等操作，实现2D或3D的转换和变形。transition-delay过渡、变形和动画2.变形使用rotate()函数，可以指定旋转的角度（单位为deg）。其中，正值表示顺时针旋转，负值表示逆时针旋转。transition-delay过渡、变形和动画2.变形使用scale()函数，可以指定元素在水平和垂直方向上的缩放比例。在scale(x,y)中，x表示水平方向的缩放比例，y表示垂直方向的缩放比例。如果只指定一个值，则两个方向上的缩放比例相同。x或y的值大于1表示放大，小于1表示缩小，等于1表示不变。transition-delay过渡、变形和动画2.变形使用skew()函数，可以指定元素在水平和垂直方向上的倾斜角度。在skew(x,y)中，x表示水平方向的倾斜角度，y表示垂直方向的倾斜角度。如果只指定一个值，则只在水平方向上倾斜。正值表示向左上角和右下角倾斜，负值表示向右上角和左下角倾斜。transition-delay过渡、变形和动画2.变形使用translate()函数，可以指定元素在水平和垂直方向上的移动距离。在translate(x,y)中，x表示水平方向的移动距离，y表示垂直方向的移动距离。如果只指定一个值，则只在水平方向上移动。取值可以是像素（px）或百分比（%）。transition-delaytransform-origintransform-styleperspectiveperspective-originbackface-visibility过渡、变形和动画2.变形与transform相关的属性transform过渡、变形和动画2.变形2D变形效果将鼠标悬停放在盒子上后，盒子经过渡后变形为菱形过渡、变形和动画2.变形2D变形效果将鼠标悬停放在盒子上后，盒子经过渡后变形为菱形过渡、变形和动画3.动画CSS3的动画属性提供了一系列强大的工具，使得开发者能够在网页上创建丰富和吸引人的动画效