任务4 制作学院介绍页面.pptx

任务4制作学院介绍页面Web前端开发案例教程HTML5+CSS3项目式微课版

制作学院介绍页面任务4

任务3制作的页面内容都是在浏览器中直接呈现的，实际上网页中的内容是由一个个的块组成的，这些块也叫盒子。本任务制作学院介绍页面，将介绍的内容放入盒子中，并设置盒子的各种属性。通过本任务的实现，掌握盒子模型的概念和盒子的各种属性设置。

任务效果使用盒子模型制作学院介绍页面。学院介绍页面

知识点盒子模型的概念01盒子模型的相关属性02

知识准备任务3制作学院介绍页面任务4

4.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.边框属性border

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

若将盒子box的4个边框均设置为2px、虚线、红色.box{border:2pxdashed#f00;}4.2.2盒子模型的相关属性1.边框属性border

CSS3中新增的border-radius属性可以给元素设置圆角边框。border-radius:圆角半径属性值可以是长度或百分比，表示圆角的半径4.2.2盒子模型的相关属性2.圆角边框属性border-radius

在例4-1中对盒子添加圆角半径的设置4.2.2盒子模型的相关属性2.圆角边框属性border-radius

4.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-radi