任务4 制作学院介绍页面教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版

任务4 制作学院介绍页面 Web前端开发案例教程 HTML5+CSS3 微课版 制作学院介绍页面 任务4 任 务 描 述 任务3制作的页面内容都是在浏览器中直接呈现的，实际上网页中的内容是由一个个的块组成的，这些块也叫盒子。本任务制作学院介绍页面，将介绍的内容放入盒子中，并设置盒子的各种属性。通过本任务的实现，掌握盒子模型的概念和盒子的各种属性设置。 任务导学 任务效果 使用盒子模型制作学院介绍页面，浏览效果如图4-1所示。 图4-1 学院介绍页面 知识点 盒子模型的概念 01 盒子模型的相关属性 02 知识准备 任务3 制作学院介绍页面 任务4 4.2.1 盒子模型的概念 盒子模型就是把HTML页面中的元素看作一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。 例4-1 使用div标记定义盒子。 example01.html 4.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标记定义的盒子默认宽度是浏览器宽度，默认高度由盒子中内容决定，默认的边框、内边距、外边距都为0 body、p、h1～h6、ul、li等都有默认外边距和内边距 设计网页时，一般要将这些元素的外边距和内边距都先设为0，需要时再设置为非零的值。 要精确描述盒子的外观，需要设置盒子的边框属性（border）、内边距属性（padding）、外边距属性（margin）、盒子阴影属性（box-shadow）和盒子大小属性（box-sizing）等。 4.2.2 盒子模型的相关属性 1. 边框（border）属性 border-top：上边框宽度、样式、颜色。 border-right：右边框宽度、样式、颜色。 border-bottom：下边框宽度、样式、颜色。 border-left：左边框宽度、样式、颜色。 若将盒子box的下边框设置为2px、实线、红色，代码如下： .box{border-bottom:2px solid #f00;} 4.2.2 盒子模型的相关属性 若4个边框具有相同的宽度、样式和颜色，使用如下方式表示。 若将盒子box的4个边框均设置为2px、实线、红色，代码如下： 格式：border：边框宽度 样式 颜色 .box {border:2px solid #f00;} 4.2.2 盒子模型的相关属性 border：边框宽度 样式 颜色 solid：边框样式为单实线 dashed：边框样式为虚线 dotted：边框样式为点线 double：边框样式为双实线 none：没有边框 4.2.2 盒子模型的相关属性 2. 圆角边框（border-radius）属性 CSS3中新增的border-radius属性可以给元素设置圆角边框。 border-radius:圆角半径 属性值可以是长度或百分比，表示圆角的半径 4.2.2 盒子模型的相关属性 在例4-1中对盒子添加圆角半径的设置。 4.2.2 盒子模型的相关属性 4.2.2 盒子模型的相关属性 浏览效果如图所示。 设置圆角半径时，也可以分别为4个角的圆角半径设置不同的值。 盒子的样式代码改为如下 4.2.2 盒子模型的相关属性 左上圆角半径 依次为左上、右上、右下、左下 4.2.2 盒子模型的相关属性 3. 内边距（padding）属性 padding-top：上内边距大小 padding-right：右内边距大小 padding-bottom：下内边距大小 padding-left：左内边距大小 用于设置盒子中内容与边框之间的距离。 若4个内边距具有相同的大小，则可以用一行代码设置。 格式：padding：内边距大小 4.2.2 盒子模型的相关属性 上 右