Web前端基础案例 4

任务4制作学院介绍页面Web前端开发案例教程（HTML5+CSS3）

（AI助学）微课版（第3版）任务3制作的页面内容都是在浏览器中直接呈现的，实际上网页中的内容是由一个个的块组成的，这些块也叫盒子。本任务制作学院介绍页面，将介绍的内容放入盒子中，并设置盒子的各种属性。通过本任务的实现，掌握盒子模型的概念和盒子的各种属性设置。使用盒子模型制作学院介绍页面，浏览效果如图所示。4.1任务描述4.2知识准备CSS常用文本属性044.2.1盒子模型的概念4.2.2

盒子模型的相关属性4.2.3背景属性4.2.1盒子模型的概念盒子模型就是把HTML页面中的元素看作一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。例4-1使用div标记定义盒子。example01.html4.2.1盒子模型的概念使用div标记定义盒子定义盒子的样式4.2.1盒子模型的概念一个盒子实际占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的例4-1中定义的盒子box的实际宽度和高度均是310px在网页排版时，要非常精确地计算盒子实际占有的宽度和高度4.2.1盒子模型的概念大部分网页元素本质上都是以盒子的形式存在的。例如，body、p、h1～h6、ul、li等元素都是盒子给盒子添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中不要求每个元素都必须定义这些属性(内边距、边框、外边距、宽和高)div标记定义的盒子默认宽度是浏览器宽度，默认高度由盒子中内容决定，默认的边框、内边距、外边距都为0body、p、h1～h6、ul、li等都有默认外边距和内边距。设计网页时，一般要将这些元素的外边距和内边距都先设为0，需要时再设置为非零的值要精确描述盒子的外观，需要设置盒子的边框属性（border）、内边距属性（padding）、外边距属性（margin）、盒子阴影属性（box-shadow）和盒子大小属性（box-sizing）等。4.2.2盒子模型的相关属性border-top：上边框宽度、样式、颜色border-right：右边框宽度、样式、颜色border-bottom：下边框宽度、样式、颜色border-left：左边框宽度、样式、颜色若将盒子box的下边框设置为2px、实线、红色，代码如下。.box{border-bottom:2pxsolid#f00;}4.2.2盒子模型的相关属性边框（border）属性若4个边框具有相同的宽度、样式和颜色，使用如下方式表示。若将盒子box的4个边框均设置为2px、实线、红色，代码如下。格式：border：边框宽度样式颜色.box{border:2pxsolid#f00;}4.2.2盒子模型的相关属性边框（border）属性border：边框宽度

样式

颜色solid：边框样式为单实线dashed：边框样式为虚线dotted：边框样式为点线double：边框样式为双实线none：没有边框4.2.2盒子模型的相关属性边框（border）属性

CSS3中新增的border-radius属性可以给元素设置圆角边框。border-radius：圆角半径属性值可以是长度或百分比，表示圆角的半径4.2.2盒子模型的相关属性圆角边框（border-radius）属性在例4-1中对盒子添加圆角半径的设置。4.2.2盒子模型的相关属性圆角边框（border-radius）属性4.2.2盒子模型的相关属性浏览效果如图所示。圆角边框（border-radius）属性设置圆角半径时，也可以分别为4个角的圆角半径设置不同的值。4.2.2盒子模型的相关属性圆角边框（border-radius）属性依次为左上、右上、右下、左下4.2.2盒子模型的相关属性圆角边框（border-radius）属性padding-top：

上内边距大小padding-right：

右内边距大小padding-bottom：下内边距大小

padding-left：

左内边距大小

用于设置盒子中内容与边框之间的距离若4个内边距具有相同的大小，则可以用一行代码设置格式：padding：内边距大小4.2.2盒子模型的相关属性内边距（padding）属性上右下左上右下左上右下左上下左右内边距均为10px有4个属性值：有3个属性值：有2个属性值：有1个属性值：4.2.2盒子模型的相关属性内边距（padding）属性margin-top：

上外边距大小margin-right：

右外边距大小margin-bottom：下外边距大小

margin-left：

左外边距大小

外边距用于设置盒子与其他盒子之间的距离margin：0auto让盒子在浏览器中水平居中若4个外边距具有相同的大小，则可以用一行代码设置格式：margin：外边距大小4.2.2盒子模型的相关属性外边距（margin）属性用于给盒子添加周边阴影效果说明：阴影水平偏移量：必选项，可以为负值，正值表示向右偏移，负值表示向左偏移。阴影垂直偏移量：必选项，可以为负值，正值表示向下偏移，负值表示向上偏移。阴影模糊半径：可选项，不能为负值，值越大阴影就越模糊，默认值为0，表示不模糊。阴影扩展半径：可选项，可以为负值。正值表示在所有方向扩展，负值表示在所有方向上消减，默认值为0。阴影颜色：可选项，省略时为黑色。阴影类型：可选项，内阴影的值为inset，省略时为外阴影。4.2.2盒子模型的相关属性语法格式：box-shadow:水平偏移量垂直偏移量模糊半径扩展半径颜色阴影类型；盒子阴影（box-shadow）属性示例4.2.2盒子模型的相关属性盒子阴影（box-shadow）属性阴影水平偏移量阴影垂直偏移量阴影模糊半径阴影颜色语法格式：box-sizing:content-box|border-box;说明：content-box（默认值）：盒子的width属性值不包括内边距和边框，盒子在页面上实际占的宽度在计算时要把内边距和边框包括进去。border-box：元素的width属性值包括内边距和边框。用于定义一个盒子的总宽度和总高度是否包含内边距和边框4.2.2盒子模型的相关属性盒子大小（box-sizing）属性设置背景颜色或背景图像时可使用综合属性background，通过该属性可以设置与背景相关的所有值。4.2.3背景属性属性

作用备注background-color设置要使用的背景颜色

background-image设置要使用的背景图像

background-repeat设置如何重复背景图像

background-position设置背景图像的位置

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动

background-size设置背景图像的大小CSS3新增加的属性background-clip设置背景的裁剪区域CSS3新增加的属性background-origin设置背景图像的参考原点CSS3新增加的属性与background属性相关的属性如下表所示4.2.3背景属性语法格式：background-color：#RRGGBB或#rgb(r,g,b)或预定义的颜色值4.2.3背景属性设置背景颜色例4-4：分别设置网页的背景颜色和标题行的背景颜色

example04.html语法格式：background-image：URL（图像来源）4.2.3背景属性设置背景图像例4-5

修改例4-4的代码，设置网页的背景图像，example05.html语法格式：

background-repeat:repeat|no-repeat|repeat-x|repeat-y|space|round4.2.3背景属性设置如何重复背景图像repeat：背景图像在横向和纵向上平铺，为默认值。no-repeat：背景图像只显示一次，不平铺。repeat-x：背景图像在横向上平铺。repeat-y：背景图像在纵向上平铺。space：背景图像以相同的间距平铺，且填充满整个容器或某个方向（CSS3新增关键字）。round：背景图像自动缩放至合适大小，且填充满整个容器（CSS3新增关键字）。语法格式：background-position:关键字|百分比|长度关键字：在水平方向上有left、center和right，垂直方向上有top、center和bottom。百分比、长度：指定两个值，分别代表水平位置和垂直位置。示例4.2.3背景属性设置背景图像位置示例语法格式：background-size：长度|百分比|auto|cover|contain长度：用长度值指定背景图像的大小，不允许为负值。百分比：用百分比值指定背景图像的大小，不允许为负值。auto：背景图像的真实大小，默认值为auto。cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。4.2.3背景属性设置背景图像大小语法格式：background-clip:border-box|padding-box|content-box;border-box：背景图像不会发生裁剪，为默认值。padding-box：超出padding区域，也就是位于border区域的背景图像将会被裁剪。content-box：从content区域（内容区域）开始向外裁剪背景，即位于border和padding区域内的背景将会被裁剪。4.2.3背景属性设置背景图像的裁剪区域语法格式：background-origin:padding-box|border-box|content-box;padding-box：在padding区域（含padding）内显示背景图像。border-box：在border区域（含border）内显示背景图像。content-box：在content区域内显示背景图像。4.2.3背景属性设置背景图像的参考原点用于指定background-image属性显示图像时的参考原点。默认情况下，背景图像以元素左上角为坐标原点显示，设置background-origin属性可以指定图像显示的参考原点。例4-6：利用背景图像的各种属性设置元素的背景颜色和背景图像example06.html4.2.3背景属性例4-6：利用背景图像的各种属性设置元素的背景颜色和背景图像example06.html4.2.3背景属性语法格式：background:背景颜色url("图像")是否重复位置大小裁剪方式参考原点;所有属性在书写时顺序任意。如果同时设置了“position”和“size”两个属性，则应该用左斜线“/”分隔，如“position/size”，而不是用空格把两个参数值隔开。设置元素的背景颜色和背景图像时，建议使用综合属性background一次性设置。4.2.3背景属性综合设置背景4.2.3背景属性综合设置背景例4-7修改例4-6，使用background属性综合设置背景颜色和图像example07.html4.2.3背景属性设置多重背景图像例4-8

使用background属性给盒子添加两个背景图像

example08.html语法格式：opacity:不透明度值;4.2.3背景属性设置不透明度不透明度值是0～1的浮点数值。其中，0表示完全透明，1表示完全不透明，0.5表示半透明。4.2.3背景属性设置不透明度例4-9：使用opacity属性设置图像的不透明度example09.html

语法：background:linear-gradient(渐变角度,颜色值1,颜色值2,…,颜色值n);渐变角度：指水平线和渐变线之间的夹角，通常是以deg为单位的角度值，角度省略时默认为180deg。颜色值：用于设置渐变颜色，其中，颜色值1表示起始颜色，颜色值