Web前端开发实例与实战第6 章 DIV+CSS布局.pdfVIP

编写日期：授课日期：任课教师：

课程《Web前端开发实例与授课授课

名称实战》专业班级

授课授课

周次节次第6章3学时

章DIV+CSS布局学时

1.了解框模型。

知识2.了解框模型的边框与边距。

3.了解浮动设计。

教学

1.熟知内联元素span标签。

目标

能力2.能够使用不同属性值处理内容溢出。

3.能够使用浮动让列表水平布局。

素质培养学生的实践能力和创新思维。

教学

制作网站搜索栏

重点

教学

使用relative属性值对元素的位置进行设置

难点

教学

教学环节包括课堂讲授、集体讨论、师生互动、课后答疑等

方法

教学多媒体、课件

用具

第6章DIV+CSS布局

6.1div与span

div元素和span元素是网页布局中的块级和行内盒子元素。使用它们可以将多个其

他元素进行打包排版，从而提供网页排版的效率。

教学

6.1.1块元素div标签

内容div标签属于块级元素，它类似于一个容器，可以组合其他的HTML元素。简单理解

div标签就是一个可以随意DIY的空盒子，在div元素中可以存放HTML的其他元素。

6.1.2内联元素span标签

span标签属于内联元素，也叫行内元素。该标签的作用是用以组合文档中的其他行

内元素。span标签内可以添加其他的HTML行内元素。例如，一段文本内容，包括了a

标签、b标签，但是它们合起来是一个商品的名称，它们的字号、背景色等其他样式都

是相同的，此时就可以使用span标签将a标签和b标签的内容划分为一组，从而在添

加CSS样式和管理时将十分方便。

6.1.3元素类型转换

元素类型转换是指将块级元素转换为行内元素，或将行内元素转换为块级元素。之所

以要转换，是因为块元素和行内元素可用的CSS属性不同。

6.2框模型

框模型（boxmodel）是HTML布局中最重要的一个概念。在HTML中所有的元素都被

视为一个“盒子模型”或“框模型”。通过框模型的概念可以精准地实现对元素的位置布

局。

6.2.1框模型的边框与边距

框模型由内容、边框、内边距和外边距4个部分组成，使用不同的CSS属性可以对它

们进行对应的设置。

1.边框

在表格章节中已经讲解过使用border属性统一设置边框样式的相关内容。在了解了

框模型概念后可以知道，border属性不但可以设置表格的边框，还可以设置其他所有元

素的边框。除了border属性外，border的其他分支属性也可以用来对边框的每条边的样

式进行分别设置。

2.内