任务4 制作学院介绍页面

任务4制作学院介绍页面Web前端开发案例教程HTML5+CSS3项目式微课版制作学院介绍页面任务4任务3制作的页面内容都是在浏览器中直接呈现的，实际上网页中的内容是由一个个的块组成的，这些块也叫盒子。本任务制作学院介绍页面，将介绍的内容放入盒子中，并设置盒子的各种属性。通过本任务的实现，掌握盒子模型的概念和盒子的各种属性设置。任务效果使用盒子模型制作学院介绍页面。

学院介绍页面知识点盒子模型的概念01盒子模型的相关属性02知识准备任务3制作学院介绍页面任务44.2.1盒子模型的概念

盒子模型就是把HTML页面中的元素看作一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。例4-1使用div标记定义盒子。example01.html4.2.1盒子模型的概念div标记是区块容器标记，简称块标记，块通称为盒子块标记可以容纳段落、标题、表格、图像等各种网页元素div标记中还可以包含多层div标记DIV+CSS布局网页就是将网页内容放入若干div标记中，并使用CSS设置这些块的属性4.2.1盒子模型的概念4.2.1盒子模型的概念一个盒子实际占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的例4-1中定义的盒子box的实际宽度和高度均是310px在网页排版时，要非常精确地计算盒子实际占有的宽度和高度4.2.1盒子模型的概念大部分网页元素本质上都是以盒子的形式存在的。例如，body、p、h1～h6、ul、li等元素都是盒子给盒子添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中4.2.1盒子模型的概念不要求每个元素都必须定义这些属性(内边距、边框、外边距、宽和高)div标记定义的盒子默认宽度是浏览器宽度，默认高度由盒子中内容决定，默认的边框、内边距、外边距都为0body、p、h1～h6、ul、li等都有默认外边距和内边距设计网页时，一般要将这些元素的外边距和内边距都先设为0，需要时再设置为非零的值。要精确描述盒子的外观，需要设置盒子的边框属性（border）、内边距属性（padding）、外边距属性（margin）、盒子阴影属性（box-shadow）等。4.2.2盒子模型的相关属性1.边框属性border边框（border）属性设置方式如下：border-top：上边框宽度、样式、颜色。border-right：右边框宽度、样式、颜色。border-bottom：下边框宽度、样式、颜色。border-left：左边框宽度、样式、颜色。4.2.2盒子模型的相关属性将背景颜色为灰色的盒子下边框设置为2px、实线、红色border-bottom:2pxsolid#f00;4.2.2盒子模型的相关属性1.边框属性border若4个边框具有相同的宽度、样式和颜色，使用如下方式表示。若将盒子box的4个边框均设置为5px、实线、红色格式：border：边框宽度样式颜色border:5pxsolid#f00;4.2.2盒子模型的相关属性1.边框属性borderborder：边框宽度样式颜色solid：边框样式为单实线dashed：边框样式为虚线dotted：边框样式为点线double：边框样式为双实线none：没有边框4.2.2盒子模型的相关属性1.边框属性border若将盒子box的4个边框均设置为2px、虚线、红色.box{border:2pxdashed#f00;}4.2.2盒子模型的相关属性1.边框属性borderCSS3中新增的border-radius属性可以给元素设置圆角边框。border-radius:圆角半径属性值可以是长度或百分比，表示圆角的半径4.2.2盒子模型的相关属性2.圆角边框属性border-radius在例4-1中对盒子添加圆角半径的设置4.2.2盒子模型的相关属性2.圆角边框属性border-radius4.2.2盒子模型的相关属性2.圆角边框属性border-radius设置圆角半径时，也可以分别为4个角的圆角半径设置不同的值。盒子的样式代码改为如下4.2.2盒子模型的相关属性2.圆角边框属性border-radius左上圆角半径依次为左上、右上、右下、左下4.2.2盒子模型的相关属性2.圆角边框属性border-radius

若盒子设置了背景颜色或背景图像，那么在不设置边框时，也可以使用border-radius属性显示出圆角的效果4.2.2盒子模型的相关属性2.圆角边框属性border-radiuspadding-top：上内边距大小padding-right：右内边距大小padding-bottom：下内边距大小

padding-left：左内边距大小

内边距用于设置盒子中内容与边框之间的距离，也常常称为内填充。内边距（padding）属性设置方式如下：若4个内边距具有相同的大小，则可以用一行代码设置。格式：padding：内边距大小4.2.2盒子模型的相关属性3.内边距属性padding内边距属性padding上右下左上右下左上右下左上下左右内边距均为10px3.内边距属性paddingmargin-top：上外边距大小margin-right：右外边距大小margin-bottom：下外边距大小

margin-left：左外边距大小

外边距用于设置盒子与其他盒子之间的距离。外边距（margin）属性设置方式如下：4.2.2盒子模型的相关属性4.外边距属性marginmargin：0auto水平居中若4个外边距具有相同的大小，则可以用一行代码设置。格式：margin：外边距大小4.2.2盒子模型的相关属性4.外边距属性marginbox-shadow用于给盒子添加周边阴影效果。语法格式：box-shadow:水平偏移量垂直偏移量模糊半径扩展半径颜色阴影类型；说明阴影水平偏移量：必选项，可以为负值，正值表示向右偏移，负值表示向左偏移。阴影垂直偏移量：必选项，可以为负值，正值表示向下偏移，负值表示向上偏移。阴影模糊半径：可选项，不能为负值，值越大阴影就越模糊，默认值为0，表示不模糊。阴影扩展半径：可选项，可以为负值。正值表示在所有方向扩展，负值表示在所有方向上消减，默认值为0。阴影颜色：可选项，省略时为黑色。阴影类型：可选项，内阴影的值为inset，省略时为外阴影。4.2.2盒子模型的相关属性5.盒子阴影属性box-shadow阴影水平偏移量阴影垂直偏移量阴影模糊半径阴影颜色示例4.2.2盒子模型的相关属性5.盒子阴影属性box-shadow例4-2在项目chapter04中新建一个网页文件，定义一个盒子，盒子中包括图像和文本等，盒子和图像都设置了阴影效果，文件名为example02.html。4.2.2盒子模型的相关属性5.盒子阴影属性box-shadow网页能通过背景颜色或背景图像给人留下深刻的第一印象，如节日题材的网站一般采用应景的图片来营造节日氛围，所以在网页设计中，控制背景颜色和背景图像是很重要的。设置背景颜色或背景图像时可使用综合属性background，通过该属性可以设置与背景相关的所有值。4.2.3背景属性属性

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

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

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

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

与background属性相关的属性如下表所示。4.2.3背景属性语法格式：background-color：#RRGGBB或#rgb(r,g,b)或预定义的颜色值示例1.背景颜色（background-color）属性4.2.3背景属性语法格式：background-image：URL（图像来源）示例4.2.3背景属性1.背景图像（background-image）属性语法格式：

background-repeat:repeat|no-repeat|repeat-x|repeat-y|space|round3.背景图像平铺(background-repeat)属性repeatno-repeatrepeat-xrepeat-yspaceround4.2.3背景属性语法格式：background-position:关键字|百分比|长度4.背景图像位置（background-position）属性关键字：在水平方向上有left、center和right，垂直方向上有top、center和bottom。百分比、长度：指定两个值，分别代表水平位置和垂直位置。示例4.2.3背景属性4.2.3背景属性例4-5

利用背景图像的各种属性设置元素的背景颜色和背景图像。5.综合设置背景（background）属性

语法格式：background:背景颜色url("图像")是否重复位置是否固定大小裁剪方式参考原点;所有属性在书写时顺序任意。如果同时设置了“position”和“size”两个属性，应该用左斜杠“/”分隔，如“position/size”，而不是用空格把两个参数值隔开。设置元素的背景颜色和背景图像时建议使用综合属性background一次性设置。4.2.3背景属性4.2.3背景属性例4-6修改例4-5，使用background综合设置背景颜色和图像。5.综合设置背景（background）属性

background:#cccurl(images/logo.png)no-repeatleftcenter;background:url(images/binhai.jpg)no-repeatcenterbottom;background-image:url(images/binhai.jpg); background-repeat:no-repeat;

background-position:centerbottom;background-color:#ccc; background-image:url(images/logo.png); background-repeat:no-repeat; background-position:leftcenter;4.2.4不透明度属性

颜色的不透明度可以使用rgba(r,g,b,alpha)模式设置。也可以使用元素的opacity属性为任何元素设置不透明效果。格式如下。格式：opacity:不透明度值;不透明值是0-1间的浮点数值。其中，0表示完全透明，1表示完全不透明，0.5表示半透明。4.2.4不透明度属性例4-7：在项目chapter04中新建一个网页文件，使用opacity属性设置图像的不透明度，文件名为example07.html。图像的不透明度为0.3鼠标指针移动到图像上图像的不透明度为1任务实现任务3