2

HTML5

3 HTML5是构建Web内容的一种语言描述方式。
4 HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语
‐ 8 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
5 言方式，被认为是互联网的核心技术之一。HTML产生于1990年，
6 1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
7

内的字体大小为 20 像素，

字体大小为父标签的 1.5
倍，字体加粗，字体颜色为红色。CSS样式设置如下：
1
显示效果如下图所示：

一、学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤 一、教师巡视并辅导学 30 分 1、提供学
任务 独立完成任务的实施。 生完成任务 钟 生的知识迁
实施 根据前面的任务分析，我们可以按照如下方式完成任务。 移能力
1、在 D清单网页文件相同的目录下新建一个文件夹，命名为 css。 2、提高学
‐ 9 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
2、创建 index.css 文件，并将其保存在 css 文件夹，便于管理，如图 生的自学能
所示。 力和问题解
决能力
3、在阶段 1完成的 index.html 网页头部中添加标签，引
入 CSS 文件。至此完成了使用外部样式添加 D清单网页的 CSS 样式。参考
代码如下：






4、在开发实践中，CSS 文件一般可分为两个部分。第一部分是通用样
式，主要设置网页标签的通用样式效果，将对整个网页生效，以减少网页
各模块相同效果的重复设置，并且可以在其它页面中实现复用，提高开发
效率，此任务要求完成这一设置。第二部分是对各具体内容独立设置效
果，个性化强但复用性差，我们在后面的任务中进行的样式设置主要是此
种类型。
在移动端添加文本格式设置，我们一般会使用 rem 单位，该单位相对于
标签的文字大小。当文字大小改变时，整个页面的所有文字
也会相应地变大或缩小，起到快速调整页面文字的效果。
h1{font-size: 2.3rem;}
h3{font-size: 1.5rem;}
5、完成后在 D清单页面中浏览显示效果，测试样式设置是否成功。
‐ 10 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
1.完成自主评价 引导完成评价 9 分钟 建立评价机
任务
2.完成组内互评 制：自评 评价
3.完成组间互评
一、听讲 一、知识点总结 5 分钟 总结任务并
任务 二、根据教师的总结找出自己在任务完成时存在的不足。 二、根据学生任务完成 回顾教学目
总结 的情况进行总结 标的知识和
技能目标
一、课后改进或完善本节课任务内容 一、布置作业，讲明要 1分钟 加强课堂知
作业
布置 二、自主学习任务拓展内容 求 识的巩固与
迁移
一、设备恢复和整理。 一、安排值日生打扫卫 课后 5 清洁整理
清洁
二、教学场地的清洁。 生 分钟 整理
三、人走五关（关门、关窗、关灯、关风扇，关电源）。 二、清洁整理
‐ 11 ‐


‐ 1 ‐ 一体化课教案

课 程 HTML5+CSS3 网页设计与制作 授课教师
第二阶段 使用 CSS3 设置网页 任务 17 使用 CSS 动画
课 题 分课题
格式 制作下拉菜单
授课对象 ××专业××班 授课时间 ×年×月×日 课时 16
1、能够叙述 CSS3 中的过渡属性，并能够制作过渡时间、动画快慢等
常见过渡效果。
2、能够叙述 CSS3 中的变形属性，并能够制作各种转换效果。
教学目标
3、能够叙述 CSS3 中的动画属性，并能够制作网页常见的动画效果。
4、能够综合运用过渡、变形和动画样式属性，制作 D 清单页面的下拉
菜单动画。
1、 过渡属性、变形属性、动画属性设置
教学重点 2、 综合运用过渡、变形和动画样式属性，制作 D 清单页面的下拉
菜单动画
1、过渡属性、变形属性、动画属性的参数选择
教学难点
2、灵活、合理运用过渡属性、变形属性、动画属性
本次任务要求根据 D 清单网页内容，使用 CSS样式，在任务 16 基础上
任务描述
使用 CSS 动画制作 D 清单页面的酷炫下拉菜单。
在 CSS3 中，提供了对动画制作的支持，通过样式的设置，我们可以实
现动画的过渡、2D 转换、3D 转换、旋转、缩放等效果。我们可以根据
CSS3 的动画样式来制作酷炫下拉菜单。
任务分析 要使用 CSS动画制作酷炫下拉菜单，需要：
1、学习过渡属性、变形属性、动画属性的使用；
2、分析 D 清单页面中的酷炫下拉菜单内容，正确使用 CSS 样式完成 D
清单网页内容制作。
教学场地
教学场地：机房 教具：计算机
与教具
安全注意 1、提醒学生注意用电安全。
事项及相
2、提醒学生不要将食品饮料带入机房。
关备注
审阅签名： 年 月 日
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
一、提前 5分钟按照固定座位就坐。 一、严格遵守上下课时 课前 营造上课环
二、不带食品饮料进入教室（机房）。 间，上课铃响前 5分钟 5分 境，保证用
三、开机，配置好 IP 地址，确保红蜘蛛软件运行并链接教师机，同时能 进入教室。 钟 电安全
够访问英特网。 二、检查学生的仪容仪
四、注意电脑接电用电安全。 表，严禁带食品和饮料
组织
进入教室。 教学
三、检查教室线路布
置，提醒学生检查是否
将电脑接入英特网。
四、提醒学生注意用电
安全，清点人数。
一、了解任务情境 一、引入任务情境 10 分 1、明确本
本次任务要求根据 D 清单网页内容，使用 CSS 样式，在任务 16 基础上使用 CSS 动 钟 次课程要完
画制作 D 清单页面的酷炫下拉菜单。 成的任务在
项目中的位
完成后的效果图如图所示。
置
2、明确本
次课程任务
任务 要求
引入

‐ 1 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
一、学习知识点 570 边讲边练，
1、过渡效果 分钟 完成理论知
1.1 transition-property 属性 识的学习
transition-property 属性规定应用过渡效果的 CSS 属性的名称。即当
指定的 CSS 属性改变时，过渡效果将开始。
语法：transition-property：属性值； 一、讲授知识点
属性值范围如表所示。
预备
知识
1.2 transition-duration
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫
秒计）。
语法：transition-duration: time;
说明：默认值是 0，表示不会有过渡效果。
1. 3 transition-timing-function
transition-timing-function 属性规定过渡效果的速度曲线。
语法：transition-timing-function:属性值;
属性值范围如表所示。
‐ 2 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
1.4 transition-delay
transition-delay 属性规定过渡效果何时开始。transition-delay 值以
秒或毫秒计。
语法：transition-delay：time;
1.5 transition
transition 属性是一个简写属性，一般情况下，四个过渡属性：
transition-property 、 transition-duration 、 transition-timing-
function、transition-delay 经常出现，为了避免代码过于冗长，可以采用
简写的形式。
语法：transition: property duration timing-function delay;
注意：
（1）使用 transition 属性设置多个过渡效果时，必须按照严格按照
transition-property 、 transition-duration 、 transition-timing-
function、transition-delay 的顺序进行定义，顺序不能互换。
‐ 3 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
（2）务必始终设置 transition-duration 属性，否则默认时长为 0，就
不会产生过渡效果。
（3）如果同时设置多个过渡效果，需要为每个过渡属性集中指定所有的值，
并且使用逗号隔开。
二、根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代 二、演示任务关键操作
码。 步骤，引导学生完成课
【课堂练习 1‐17‐1 制作颜色区域的扩展效果】 堂练习
HTML 标签代码：
1

2

请把鼠标指针移动到红色的 div 元素上，就可以看到过渡效果。
3

CSS 标签代码：
1 div{
2 width:100px;
3 height:100px;
4 background:#f00;
5 transition-property: width;
6 transition-duration: 2s;
7 -moz-transition-property: width;
8 /* -moz-为兼容Firefox浏览器 */
9 -moz-transition-duration: 2s;
10 -webkit-transition-property: width;
11 /* -webkit-为兼容Safari and Chrome 浏览器*/
12 -webkit-transition-duration: 2s;
13 -o-transition-property: width; /* -o-为兼容Opera浏览器 */
‐ 4 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
14 -o-transition-duration: 2s;
15 }
16 div:hover{width:300px;}
显示效果如下图所示。


【课堂练习 1‐17‐2 制作颜色区域的颜色变化效果】
HTML 标签代码：
1
2

请把鼠标指针移动到红色的 div 元素上，就可以看到红色到黄色
3 的过渡效果。
4

CSS 标签代码：
1 div{
2 width:300px;
3 height:100px;
‐ 5 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
4 background:#f00;
5 transition-property:background;
6 transition-duration: 2s;
7 -moz-transition-property: background;
8 /* -moz-为兼容Firefox浏览器 */
9 -moz-transition-duration: 2s;
10 -webkit-transition-property: background;
11 /* -webkit-为兼容Safari and Chrome 浏览器*/
12 -webkit-transition-duration: 2s;
13 -o-transition-property: background;
14 /* -o-为兼容Opera浏览器 */
15 -o-transition-duration: 2s; }
16 div:hover{background:#ff0;
17 }
显示效果如图 1‐17‐4、图 1‐17‐5、图 1‐17‐6 所示。

图 1‐17‐4 过渡效果‐鼠标未经过红色区域

‐ 6 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配

图 1‐17‐5 过渡效果‐鼠标经过红色区域颜色过渡中


【课堂练习 1‐17‐3 制作区域的过渡速度效果】
HTML 标签代码：
1
2
3
4
5
6

请把鼠标指针移动到红色的 div 元素上，就可以看到过渡的不同
7 速度效果。
8

CSS 标签代码：
‐ 7 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
1 div{
2 width:100px;
3 height:50px;
4 margin: 10px;
5 background:blue;
6 color:white;
7 font-weight:bold;
8 transition-property:width;
9 -moz-transition-property:width;
10 -webkit-transition-property:width;
11 -o-transition-property:width;
12 transition-duration:2s;
13 -moz-transition-duration:2s;
14 -webkit-transition-duration:2s;
15 -o-transition-duration:2s;
16 }
17 #div1 {transition-timing-function: linear;}
18 #div2 {transition‐timing‐function: ease;}
19 #div3 {transition‐timing‐function: ease‐in;}
20 #div4 {transition‐timing‐function: ease‐out;}
21 #div5 {transition‐timing‐function: ease‐in‐out;}
22 /* ‐moz‐为兼容 Firefox 浏览器 */
23 #div1 {‐moz‐transition‐timing‐function: linear;}
24 #div2 {‐moz‐transition‐timing‐function: ease;}
25 #div3 {‐moz‐transition‐timing‐function: ease‐in;}
26 #div4 {‐moz‐transition‐timing‐function: ease‐out;}
‐ 8 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
27 #div5 {‐moz‐transition‐timing‐function: ease‐in‐out;}
28 /* ‐webkit‐为兼容 Safari and Chrome 浏览器*/
29 #div1 {‐webkit‐transition‐timing‐function: linear;}
30 #div2 {‐webkit‐transition‐timing‐function: ease;}
31 #div3 {‐webkit‐transition‐timing‐function: ease‐in;}
32 #div4 {‐webkit‐transition‐timing‐function: ease‐out;}
33 #div5 {‐webkit‐transition‐timing‐function: ease‐in‐out;}
34 /* ‐o‐为兼容 Opera 浏览器 */
35 #div1 {‐o‐transition‐timing‐function: linear;}
36 #div2 {‐o‐transition‐timing‐function: ease;}
37 #div3 {‐o‐transition‐timing‐function: ease‐in;}
38 #div4 {‐o‐transition‐timing‐function: ease‐out;}
39 #div5 {‐o‐transition‐timing‐function: ease‐in‐out;}
40 div:hover{width:300px;}
显示效果如下图所示。

‐ 9 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配

【课堂练习 1‐17‐4 采用简写属性制作过渡效果】
HTML 标签代码：
1
CSS 标签代码：
1 div{
2 transition: background-color 2s ease-in 1ms,box-shadow 2s ease-
3 in 1ms,color 2s ease-in 1ms;
4 width:100px;
5 height:20px;
6 border-radius:10px;
7 text-align:center;
8 padding:5px 0;
9 border:5px rgb(204,102,255) solid;
10 background-color: rgba(204,102,255,1);
11 box-shadow: 0 0 0 0 rgba(204,102,255,1);
‐ 10 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
12 /* 思考为什么4个参数都设置为0 */
13 color:#FFF;}
14 div:hover{
15 background-color: rgba(204,102,255,0);
16 box-shadow: 0 0 0 10px rgba(204,102,255,0);
17 color:rgb(204,102,255);
18 }
显示效果如图所示。

三、学习知识点
2、变形效果 三、讲授知识点
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，对
元素进行移动、缩放、转动、拉长或拉伸，达到变形的效果。变形效果可以
使用 2D 或 3D 转换实现。
2.1 2D 转换
代码格式：transform: 变形方式(参数);
下面介绍各种变形方式：
（1） 平移 translate
语法：transform:translate (x 轴的参数,y 轴的参数);
通过 translate（）方法，元素根据给定的 left（x 坐标） 和 top（y 坐
标） 位置参数进行移动。
（2）旋转 rotate
旋转变形可让标签旋转指定的角度，格式：rotate(角度)
语法：transform:rotate(角度)
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆
‐ 11 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
时针旋转。
（3）缩放 scale
语法：transform:scale(水平缩放，垂直缩放);
通过 scale() 方法，元素的尺寸会根据给定的宽度（X 轴）和高度（Y 轴）
参数增加或减少。
（4）倾斜 skew
语法：transform:skew(x 轴的参数,y 轴的参数);
通过 skew() 方法，元素根据给定的水平线（X 轴）和垂直线（Y 轴）参
数进行角度翻转。
2.2 3D 转换
2D 转换主要是通过 X轴和 Y轴来进行变形，而 3D 转换主要是通过 X轴、
Y 轴和 Z轴来进行对元素的格式化。
（1）rotateX()
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
四、根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代 四、演示任务关键操作
码。 步骤，引导学生完成课
【课堂练习 1‐17‐5 设置区域的平移效果】 堂练习
HTML 标签代码：
1
CSS 标签代码：
1 div{
2 width:200px;
3 height:200px;
4 margin:50px auto;
5 background:#0F0;
‐ 12 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
6 transition:all 2s;
7 }
8 div:hover{
9 transform:translate(-100px,200px);
10 }
显示效果如图所示。

【课堂练习 1‐17‐6 设置区域的旋转效果】
HTML 标签代码：
1
CSS 标签代码：
1 #main{width:500px;
2 margin:50px auto;}
‐ 13 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
3 .div1,.div2,.div3,.div4{
4 height: 200px;
5 width: 200px;
6 background:#FF0;}
7 .div1{
8 transform:rotate(30deg);
9 float:left;}
10 .div2{
11 transform:rotate(-30deg);
12 float:right;}
13 .clear{clear:both;}
14 .div3{
15 margin:100px 0 0 0;
16 transform:rotate(60deg);
17 float:left;}
18 .div4{
19 margin:100px 0 0 0;
20 transform:rotate(-60deg);
21 float:right;}
显示效果如图所示。

‐ 14 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
【课堂练习 1‐17‐7 设置区域的缩放效果】
HTML 标签代码：
1
CSS 标签代码：
1 div{
2 width:200px;
3 height:200px;
4 margin:50px auto;
5 background:#00F;
6 transition:all 2s;}
7 div:hover{transform:scale(2,0.5);
8 }
显示效果如下图所示。

缩放效果‐鼠标未经过区域

鼠标经过区域的最终缩放效果
‐ 15 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
【课堂练习 1‐17‐8 设置区域的倾斜效果】
HTML 标签代码：
1
CSS 标签代码：
1 div{
2 width:200px;
3 height:200px;
4 margin:150px auto;
5 background:#F30;
6 transition:all 2s;
7 }
8 div:hover{transform:skew(30deg,45deg);}
显示效果如图所示。

倾斜效果‐鼠标未经过区域 鼠标经过区域的最终倾斜效果
【课堂练习 1‐17‐9 设置 3D 转换效果‐X 轴】
‐ 16 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
HTML 标签代码：
1
CSS 标签代码：
1 div{
2 width:300px;
3 height:100px;
4 background-color:green;
5 border:1px solid black;}
6 div:hover{
7 transform:rotateX(135deg);
8 -webkit-transform:rotateX(135deg);
9 -moz-transform:rotateX(135deg); }
显示效果如图 1‐17‐16 和图 1‐17‐17 所示。

图 1‐17‐16设置 3D转换效果‐X 轴‐鼠标未经过区域 图 1‐17‐17设置 3D 转换效果‐X 轴‐鼠标经过
区域
（2）rotateY()
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
【课堂练习 1‐17‐10 设置 3D 转换效果‐X 轴】
‐ 17 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
HTML 标签代码：
1
CSS 标签代码：
1 div{
2 width:300px;
3 height:100px;
4 background-color:green;
5 border:1px solid black;}
6 div:hover{
7 transform:rotateY(120deg);
8 -webkit-transform:rotateY(120deg);
9 -moz-transform:rotateY(120deg); }
显示效果如图所示。

设置 3D转换效果‐Y轴‐鼠标未经过区域 设置 3D 转换效果‐Y轴‐鼠标经过区域
五、学习知识点
3、动画效果 五、讲授知识点
动画效果的代码由两部分组成，第一部分为标签声明动画效果：
语法：animation: 动画名称 执行时间 速度曲线 延迟时间 播放次数 播
放方向;
注意：以上语法中，动画名称和执行时间必须存在，否则动画不会播放。
第二部分设置动画的实际效果：
‐ 18 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
语法：@keyframes 动画名称{动画内容}

六、演示任务关键操作
六、根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。 步骤，引导学生完成课
【课堂练习 1‐17‐11 设置广州塔出场动画效果】 堂练习
‐ 19 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
HTML 标签代码：
1
CSS 标签代码：
1 div {animation: ani01 5s;
2 -webkit-animation: ani01 5s;
3 background:url(../img/gzt.jpg);
4 border-radius:50%;
5 width:300px;
6 height:300px;}
7 @keyframes ani01{
8 0% { width:100px;
9 height:100px;}
10 100% {width:300px;
11 height:300px; }
12 }
显示效果如图所示。

设置广州塔出场动画‐开始 设置广州塔出场动画‐结束
‐ 20 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
【课堂练习 1‐17‐12 设置倒计时动画效果】
HTML 标签代码：
1
CSS 标签代码：
1 div {
2 animation: ani01 6s;
3 -webkit-animation: ani01 6s;
4 background:url(../img/tiger.jpg);
5 width:300px;
6 height:300px;
7 border-radius:50%;
8 }
9 @keyframes ani01{
10 0% { background:url(../img/6.jpg) no-repeat center rgba(0,0,255,1);
11 box-shadow:0 0 0 10px rgba(51,51,51,0.5);}
12 20% { background:url(../img/5.jpg) no-repeat center rgba(0,0,255,0.5); }
13 40% { background:url(../img/4.jpg) no-repeat center rgba(0,255,0,1); }
14 50% {box-shadow:0 0 0 10px rgba(255,102,0,1);}
15 60% { background:url(../img/3.jpg) no-repeat center rgba(0,255,0,0.5); }
16 80% { background:url(../img/2.jpg) no-repeat center rgba(255,255,0,1);}
17 100% { background:url(../img/1.jpg) no-repeat center rgba(255,0,0,1); box-
18 shadow:0 0 0 10px rgba(102,255,255,0.5); }
19 }
20 /*以下兼容Chrome和Safari浏览器*/
21 @-webkit-keyframes ani01{
22 0% { background:url(../img/6.jpg) no-repeat center rgba(0,0,255,1);
‐ 21 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
23 box-shadow:0 0 0 10px rgba(51,51,51,0.5);}
24 20% { background:url(../img/5.jpg) no-repeat center rgba(0,0,255,0.5); }
25 40% { background:url(../img/4.jpg) no-repeat center rgba(0,255,0,1); }
26 50% {box-shadow:0 0 0 10px rgba(255,102,0,1);}
27 60% { background:url(../img/3.jpg) no-repeat center rgba(0,255,0,0.5); }
28 80% { background:url(../img/2.jpg) no-repeat center rgba(255,255,0,1);}
29 100% { background:url(../img/1.jpg) no-repeat center rgba(255,0,0,1); box-
30 shadow:0 0 0 10px rgba(102,255,255,0.5); }
31 }
32 /*以下兼容Firefox浏览器*/
33 @-moz-keyframes ani01{
34 0% { background:url(../img/6.jpg) no-repeat center rgba(0,0,255,1);
35 box-shadow:0 0 0 10px rgba(51,51,51,0.5);}
36 20% { background:url(../img/5.jpg) no-repeat center rgba(0,0,255,0.5); }
37 40% { background:url(../img/4.jpg) no-repeat center rgba(0,255,0,1); }
38 50% {box-shadow:0 0 0 10px rgba(255,102,0,1);}
39 60% { background:url(../img/3.jpg) no-repeat center rgba(0,255,0,0.5); }
40 80% { background:url(../img/2.jpg) no-repeat center rgba(255,255,0,1);}
41 100% { background:url(../img/1.jpg) no-repeat center rgba(255,0,0,1);
42 box-shadow:0 0 0 10px rgba(102,255,255,0.5); }
43 }
显示效果如图所示。

设置倒计时动画效果
‐ 22 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
一、学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤独 一、教师巡视并辅导学 120 1、提供学
立完成任务的实施。 生完成任务 分钟 生的知识迁
任务实施的基本思路是：在 CSS 样式设置中，为头部导航菜单添加百叶窗 移能力
的动画效果。当鼠标经过导航菜单图标时，自动展开表单列表。列表的显示 2、提高学
方式一方面是颜色由全透明到全不透明的过渡；另一方面是列表项以 X 轴 生的自学能
的 3D 旋转透视效果。其中，单数列表项以 X 轴的 3D 90 度旋转，复数列 力和问题解
表项以 X 轴的 3D 负 90 度旋转。参考代码如下： 决能力
1 header nav ul{
2 position: absolute;
3 top: 80px; /*注意该设置*/
4 left: 0;
5 width: 100%;
任务 6 font-weight: bold;
实施 7 color:#000;
8 padding: 0;
9 margin: 0;
10 z-index: -1; /*堆叠顺序为负数表示远离用户*/
11 }
12 header nav li{
13 padding: 10px;
14 margin: 0 10px;
15 list-style-type: none;
16 opacity:0;
17 background:#888;
18 transition:all 5s;
19 }
‐ 23 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
20 header nav li:nth-child(1){
21 transform:perspective(120px) rotateX(90deg);
22 margin-top:-15px;
23 }
24 header nav li:nth-child(2){
25 transform:perspective(120px) rotateX(-90deg);
26 margin-top:-20px;
27 }
28 header nav li:nth-child(3){
29 transform:perspective(120px) rotateX(90deg);
30 margin-top:-25px;
31 }
32 header nav li:nth-child(4){
33 transform:perspective(300px) rotateX(-90deg);
34 margin-top:-30px;
35 }
36 header nav li:nth-child(5){
37 transform:perspective(300px) rotateX(90deg);
38 margin-top:-35px;
39 }
40 header nav li:nth-child(6){
41 transform:perspective(300px) rotateX(-90deg);
42 margin-top:-40px;
43 }
44 header nav:hover ul{z-index: 1;} /*堆叠顺序为正数表示靠近用户*/
45 header nav:hover li{
‐ 24 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
46 opacity:1;
47 transform:perspective(0) rotatex(0);
48 margin-top:0;
49 }
效果如图所示。

导航栏动画渐变过程 导航栏动画完毕后效果
1.完成自主评价 引导完成评价 9 分 建立评价机
任务
2.完成组内互评 钟 制：自评 评价
3.完成组间互评
一、听讲 一、知识点总结 10 分 总结任务并
任务 二、根据教师的总结找出自己在任务完成时存在的不足。 二、根据学生任务完成 钟 回顾教学目
总结 的情况进行总结 标的知识和
技能目标
一、课后改进或完善本节课任务内容 一、布置作业，讲明要 1分 加强课堂知
作业
二、自主学习任务拓展内容 求 钟 识的巩固与布置
迁移
‐ 25 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
一、设备恢复和整理。 一、安排值日生打扫卫 课后 清洁整理
清洁
二、教学场地的清洁。 生 5 分整理
三、人走五关（关门、关窗、关灯、关风扇，关电源）。 二、清洁整理 钟
‐ 26 ‐ 一体化课教案

课 程 HTML5+CSS3 网页设计与制作 授课教师
课 题 第一阶段 制作网页内容 分课题 任务 8 添加留言板表单
授课对象 ××专业××班 授课时间 ×年×月×日 课时 6
1、能够叙述网页表单的作用。
教学目标 2、能够合理运用表单属性，准确定义不同的表单控件。
3、能够应用网页表单完成 D 清单网页的留言板内容制作。
1、 合理运用表单属性
教学重点
2、 网页留言板内容的制作
1、规范化书写 HTML 代码
教学难点
2、准确定义不同的表单控件
本次任务要求在任务 7 基础上添加订单表单内容以完成网页留言板的
任务描述 内容制作。

要添加留言板表单，需要：
1、学习 HTML5 表单标签的使用；
任务分析
2、分析 D 清单页面效果图中的表单，正确使用语义化标签完成 D 清
单网页内容制作。
教学场地
教学场地：机房 教具：计算机
与教具
安全注意 1、提醒学生注意用电安全。
事项及相
关备注 2、提醒学生不要将食品饮料带入机房。
审阅签名： 年 月 日
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
一、提前 5分钟按照固定座位就坐。 一、严格遵守上下课 课前 营造上课环
二、不带食品饮料进入教室（机房）。 时间，上课铃响前 5分 5分 境，保证用
三、开机，配置好 IP 地址，确保红蜘蛛软件运行并链接教师机，同时 钟进入教室。 钟 电安全
能够访问英特网。 二、检查学生的仪容
四、注意电脑接电用电安全。 仪表，严禁带食品和饮
组织
料进入教室。 教学
三、检查教室线路布
置，提醒学生检查是否
将电脑接入英特网。
四、提醒学生注意用
电安全，清点人数。
一、了解任务情境 一、引入任务情境 10 分 1、明确本
本次任务要求在任务 7 基础上添加订单表单内容以完成网页留言板的内容制作。完成 钟 次课程要完
后效果图如图所示。 成的任务在
项目中的位
任务
置
引入
2、明确本
次课程任务
要求

一、学习知识点 230 边讲边练，
1、表单的组成 分钟 完成理论知
预备 在 HTML5 中，通常用

来定义表单，通过 method 属性、action 识的学习
知识 属性和 name 属性等内容来对表单信息进行收集和传递，最终将用户提交的
信息传送给服务器。创建表单的基本语法格式如下：

一、讲授知识点
‐ 1 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
提示信息及各种表单控件内容

在上面的语法格式中，一般标签 form 后面需搭配 action、name、method
等常用属性，分别用于定义 URL 地址、表单名称、提交方式等。在提示信息
及各种表单控件内容中，由用户根据实际需要进行自定义。
2、表单属性
在 HTML5 中，表单需搭配常用的属性来使用，通过设置表单属性可以实现
定义 URL 地址、提交方式、自动完成等不同的功能。具有可用到的表单属性
如下：
1.1Action 属性
action 属性定义在提交表单时执行的动作，action 属性后面的值是提
交的地址。向服务器提交表单的通常做法是使用提交按钮，通过提交按钮，
表单会被提交到 web 服务器上的网页。其语法是：

如：
以上表示当点击提交时，表单所填写的内容会提交到 book_page.php 这
个页面进行处理。
注意：如果省略 action 属性，则 action 会被设置为当前页面。
1.2 Method 属性
method 属性规定在提交表单时所用的 HTTP 方法。它的取值有 GET 或
POST。其语法是：

当取值为 GET 时，浏览器会直接将表单的数据内容直接传输给服务器。该
传输方式的特点是传输速度快，但数据长度不能太长。GET 为 method 属性
的默认值。
当取值为 POST 时，浏览器会分两步来发送表单数据。第一步是浏览器先
和 action 属性中制定的处理表单的服务器取得联系，并得到提交允许。第
‐ 2 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
二步是浏览器通过数据和 URL 分开发送的形式，将表单数据发送给服务器。
该传输方式的特点是因传输过程数据和 URL 分开，传输速度比 GET 方式较
慢，但数据传输更安全。
1.3 name 属性
Name 属性用于表单的命名。有时候一个页面可能存在多个表单，为表单
进行命名是为了进行区分。虽然 name 属性不是必要属性，但是为了防止多
个表单数据提交到服务器引起数据混乱，最好还是为每个表单进行和相关
内容的命名。如联系我们页面的表单一般可以命名“contact”。其语法是：

1.4 autocomplete 属性
autocomplete 属性用来规定所设置的表单是否具有自动完成功能。自动
完成功能具有记忆功能，它允许浏览器对表单控件录入的内容进行保存；当
下一次需要录入时，浏览器会基于之前录入过的值，通过下拉列表的形式进
行展示，以实现快速录入从而实现自动完成功能。
autocomplete 属性有 2个，on 和 off，分别如下：
on：表示该表单开启自动完成功能
off：表示该表单关闭自动完成功能
其语法是：

1.5 target 属性
target 属性规定 action 属性中地址的目标。表单提交的信息通过
action 属性传输给服务器，服务器往往会返回提交信息，该提交信息就是
通过目标窗口来进行的。其语法是：

在该语法中，目标窗口的打开方式有四种，分别是_selt、_blank、
_parent、_top，默认的值是_selt。
1.6 novalidate 属性
‐ 3 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
在表单中，默认状态下是有验证表单录入内容的有效性的， novalidate
属性规定表单提交时取消对表单进行有效性的检查。如果表单设置了该属
性，则关闭了表单的验证，表单内所有的控件都不被验证。
二、根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代
码。
【课堂练习 1‐8‐1 为表单的控件设置取消表单验证】
打开 Visual Studio Code 软件，打开 index.html，在中
输入以下代码： 二、演示任务关键操作
步骤，引导学生完成课
1
堂练习
2 请输入您的EMAIL
3
4

通过浏览器进行调试，效果如图 1‐8‐4 所示。

【课堂练习 1‐8‐2 创建表单】
创建一个名为：student 的表单，要求：
（1）表单需提交到地址：www./book.php
（2）表单数据和 URL 分开发送
（3）目标窗口打开方式为在新窗口打开
（4）开启自动完成功能
打开 Visual Studio Code 软件，打开 index.html，在中
输入以下代码：

method="post" target="_blank" autocomplete=”on” >
‐ 4 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配

三、学习知识点
3、使用 input 元素创建表单控件
3.1 文本框（text）
网页中最常见的是文本框，文本框常用于输入简短的文字信息，如用户
名、账号、身份证号码、学号等，常见搭配的属性有 name、value、
三、讲授知识点
maxlength。
其语法形式如下：
placeholder="提示信息">
3.2 密码域（password）
在网页表单信息录入中，往往会录入到一些私密的信息，如密码等，这
时候可以采用密码域 password 创建一个密码文本框。它在网页中的效果
和文本框（text）是一样的，只不过在录入时，录入的信息由“*”代
替。
其语法格式如下：
maxlength="允许最多的字符数" value="该文本的默认值"
placeholder="提示信息">
3.3 单选按钮（radio）
表单中的单选按钮一般用于内容只选择一个的情况。在页面中，以圆圈
表示每个选择项。单选按钮的属性中，value 属性是必须设置的。特别注
意的是每个单选按钮项中的 name 属性值必须一致。
其语法格式如下：

‐ 5 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
3.4 复选框（checkbox）
表单中的复选框一般用于内容可多种选择的情况。在页面中，以方形表
示每个选择项。复选框的属性中，value 属性是必须设置的。同样需要注
意的是每个复选框项中的 name 属性值必须一致。
其语法格式如下：

3.5 普通按钮（button）
在表单中，type 属性的值为 button 时，就创建了一个普通按钮。普通
按钮经常会搭配 JavaScript 来一次使用。
其语法格式如下：
onclick="点击按钮时的处理程序">
3.6 重置按钮（reset）
重置按钮在表单中的作用是重置已经录入的表单内容。当我们录入的表
单信息有误时，可点击重置按钮，重新录入。
其语法格式如下：

3.7 提交按钮（submit）
通过提交按钮，可以将表单录入的全部数据提交到服务器。服务器的地
址为事先设置好的 form 属性 action 值中的地址。
其语法格式如下：

说明：一般需要手动录入信息的表单中都包含提交按钮。
3.8 图像域（image）
‐ 6 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
图像域也叫插入图像按钮，用于将图像文件作为按钮来使用。
其语法格式如下：

该语法中，src 后面的图像地址也是链接本地图像的相对路径，也可以
是链接外部 URL 的绝对路径。
3.9 文件域(file)
文件域也叫上传文件，它可以将本地的某个文件作为表单数据进行上
传。
其语法格式如下：

四、根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试
代码。
【课堂练习 1‐8‐3 为表单添加文本框】
打开 Visual Studio Code 软件，打开 index.html，在 中
输入以下代码：
1

四、演示任务关键操作
2

姓名

步骤，引导学生完成课
3

昵称

5

个人主页6 autocomplete="on"

7

效果如图所示：
‐ 7 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配

【课堂练习 1‐8‐4 为表单添加密码域】
打开 Visual Studio Code 软件，打开 index.html，在中
输入以下代码：
1

2

原始密码3 maxlength="3" value="123">

4

重设密码5 placeholder="请重新设置密码">

6

再次输入密码7 placeholder="请再次输入密码">

8

效果图如图所示。
【课堂练习 1‐8‐5 为表单添加单选按钮】
打开 Visual Studio Code 软件，打开 index.html ，在 中
输入以下代码：
‐ 8 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
1

你最喜欢的水果是？

2

3

苹果

4

草莓

5

橙子

6

效果图如图所示：
【课堂练习 1‐8‐6 为表单添加复选框】
打开 Visual Studio Code 软件，打开 index.html，在中
输入以下代码：
1

你经常吃的水果是？

2

3

4 苹果

5

草莓

6

7 橙子

8

‐ 9 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
效果如图所示：
【课堂练习 1‐8‐7 为表单添加普通按钮】
打开 Visual Studio Code 软件，打开 index.html，在
中输入以下代码：
1

几个不同效果的普通按钮

2

3

4

5 onclick="window.open()">

6

7 onclick="window.close()">

8

效果如图所示：
‐ 10 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
【课堂练习 1‐8‐8 为表单添加重置按钮和提交按钮】
打开 Visual Studio Code 软件，打开 index.html，在 中
输入以下代码：
1

重置按钮和提交按钮

2

3

姓名：

4

密码：

5

6

7

效果如图所示：
【课堂练习 1‐8‐9 表单控件的综合应用】
打开 Visual Studio Code 软件，打开 index.html ，在中
输入以下代码：
1

注册信息

2

3

姓名：

4

密码：

‐ 11 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
5

性别：男
6 女

7

兴趣爱好：运动
8 阅读
9 艺术
10

11

请上传你的照片

12

13

14

效果图如图所示。
五、学习知识点
4、使用 select 元素创建表单控件
一般来说，标签用于需要用户输入的控件，而标签用于 五、讲授知识点
需要用户选择的控件。
（1）下拉菜单
下拉菜单是表单中一种由用户进行选择的录入方式，在正常状态下只看
到一个选项，点击旁边的三角形箭头时，会展开全部的选项。需搭配
‐ 12 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
标签来使用。
其语法格式如下：

选项显示内容
选项显示内容
选项显示内容

（2）列表项
列表项的设置和下拉列表类似，区别是列表项没有下拉列表的三角形箭
头，它可以同时显示多个选项。一旦选项数量超出信息量长度，在列表的
右方就会出现滚动条。
其语法格式如下：

选项显示内容
选项显示内容
选项显示内容

5、创建文本域
除了和外，还有一种特殊的文本样式，称为文本域。文
本域和文本框的区别是：文本框一般只用于录入少量的文字信息，而文本
域可以录入更多的文字。文本域在网页中常用于表单的留言信息。
其语法格式如下：
六、演示任务关键操作<br/> 步骤，引导学生完成课
六、根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试 堂练习
代码。
‐ 13 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
【课堂练习 1‐8‐10 为表单添加下拉菜单】
打开 Visual Studio Code 软件，打开 index.html，在中
输入以下代码：
1

下拉菜单

2

3 籍贯：

4 广州
5 深圳
6 珠海
7 中山
8
9
效果图如图所示。

【课堂练习 1‐8‐11 为表单添加列表项】
打开 Visual Studio Code 软件，打开 index.html，在中
输入以下代码：
1

列表项

2

3 关注的新闻分类：
4 政治
‐ 14 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
5 军事
6 体育
7 娱乐
8
9

效果图如图所示。
【课堂练习 1‐8‐12 为表单添加文本域】
打开 Visual Studio Code 软件，打开 index.html，在中
输入以下代码：
1

反馈建议：

2

3 <br/>5
6

效果图如图所示。
‐ 15 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配


一、学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤 一、教师巡视并辅导学 15 分 1、提供学
独立完成任务的实施。 生完成任务 钟 生的知识迁
（1）使用 Visual Studio Code 软件打开任务 7完成的网页文件 移能力
index.html。 2、提高学
（2）找到对应的网页位置，根据任务分析和前面的知识学习，完成 生的自学能
“给我留言”表单的添加。参考代码如下： 力和问题解

决能力

给我留言

任务

实施

‐ 16 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
1.完成自主评价 引导完成评价 9 分 建立评价机
任务
2.完成组内互评 钟 制：自评 评价
3.完成组间互评
一、听讲 一、知识点总结 5 分 总结任务并
任务 二、根据教师的总结找出自己在任务完成时存在的不足。 二、根据学生任务完成 钟 回顾教学目
总结 的情况进行总结 标的知识和
技能目标
一、课后改进或完善本节课任务内容 一、布置作业，讲明要 1分 加强课堂知
作业
二、自主学习任务拓展内容 求 钟 识的巩固与布置
迁移
一、设备恢复和整理。 一、安排值日生打扫卫 课后 清洁整理
清洁
二、教学场地的清洁。 生 5 分整理
三、人走五关（关门、关窗、关灯、关风扇，关电源）。 二、清洁整理 钟
‐ 17 ‐ 一体化课教案

课 程 HTML5+CSS3 网页设计与制作 授课教师
Bootstrap 任务 3 使用 Bootstrap使用 开源框架快速搭
课 题 分课题 组件和 JS 插件制作网页建响应式网页
导航条
授课对象 ××专业××班 授课时间 ×年×月×日 课时 4
1、能够学习 Bootstrap 的导航条组件，利用 Bootstrap 导航条组件相关
内容，完成不同样式导航条的制作；
教学目标
2、能够利用 Bootstrap 的 JavaScript 插件，对导航条进行移动化（响应
式）改造。
1、 利用 Bootstrap 导航条组件相关内容，完成不同样式导航条的
制作
教学重点
2、 利用 Bootstrap 的 JavaScript 插件，对导航条进行移动化（响应
式）改造
教学难点 不同样式导航条的制作
本次任务要求通过学习 Bootstrap 的导航条及相关组件，完成项目网页
任务描述
的导航条制作。
在上一任务的基础上，完成 D 清单页面导航条制作，需要。
1、学习 Bootstrap 的菜单框架、菜单样式、字体图标等知识；
任务分析 2、学习 Bootstrap 的响应式菜单、下拉菜单等 JavaScript 插件知识；
3、综合运用 Bootstrap 相关知识，完成 D 清单页面响应式导航条制
作。
教学场地
教学场地：机房 教具：计算机
与教具
安全注意 1、提醒学生注意用电安全。
事项及相
关备注 2、提醒学生不要将食品饮料带入机房。
审阅签名： 年 月 日
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
一、提前 5分钟按照固定座位就坐。 一、严格遵守上下课时 课前 营造上课环
二、不带食品饮料进入教室（机房）。 间，上课铃响前 5分钟 5分 境，保证用
三、开机，配置好 IP 地址，确保红蜘蛛软件运行并链接教师机，同时 进入教室。 钟 电安全
能够访问英特网。 二、检查学生的仪容仪
四、注意电脑接电用电安全。 表，严禁带食品和饮料
组织
进入教室。 教学
三、检查教室线路布
置，提醒学生检查是否
将电脑接入英特网。
四、提醒学生注意用电
安全，清点人数。
一、了解任务情境 一、引入任务情境 10 分 1、明确本
本次任务要求通过学习 Bootstrap 的导航条及相关组件，完成项目网页 钟 次课程要完
的导航条制作。完成后的导航条如图所示。 成的任务在
项目中的位
置
2、明确本
次课程任务
任务 要求
引入

‐ 1 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
一、学习知识点 65 分 边讲边练，
1、导航条的框架样式 钟 完成理论知
导航条框架包括创建一个导航条栏底色和布局容器，Bootstrap 为导航 识的学习
条设置了.navbar 和.navbar‐default 类预定义样式来设置导航条的高宽、边
框、边距和导航项背景色等格式，.container 布局容器则已经在任务 2 中学
习了。其基本框架样式如下： 一、讲授知识点
1 .navbar {
2 position: relative;
3 min-height: 50px;
4 margin-bottom: 20px;
5 border: 1px solid transparent;
6 }/*在平板以上设备增加了border-radius: 4px;*/
7 .navbar-default {
预备 8 background-color: #f8f8f8;
9 border-color: #e7e7e7;
知识
10 }/*设置导航条底色，反色样式为.navbar-inverse，你也可以自
11 己设置*/
12 .container-fluid > .navbar-collapse,
13 .container-fluid > .navbar-header,
14 .container > .navbar-collapse,
15 .container > .navbar-header {
16 margin-right: -15px;
17 margin-left: -15px;
18 }/*用于抵消.container和.container-fluid布局容器设置的两个边
19 距，一般用于导航条的左右两端*/
应用时可以参考如下代码：
1
完成后的效果图如下：

导航条框架效果图
2 、导航条内容优化样式
在搭建好框架后，我们需要在导航条中创建各种内容。
2.1 列表导航
使用

列表来创建导航是行业的习惯，为此，Bootstrap 也为使用

创建导航条创建了各种样式，主要以.nav 和.navbar‐bar 类为主，且一
般会同时使用，相关样式如下：
1 .nav {
2 padding-left: 0;
3 margin-bottom: 0;
4 list-style: none;
5 }
6 .nav > li {
7 position: relative;
8 display: block;
9 }
10 .nav > li > a {
11 position: relative;
12 display: block;
13 padding: 10px 15px;
14 }
15 .nav > li > a:hover,
16 .nav > li > a:focus {
17 text-decoration: none;
‐ 3 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
18 background-color: #eee;
19 }
20 .navbar-nav {
21 float: left;
22 margin: 0;
23 }
24 .navbar-nav> li {
25 float: left;
26 }
27 .navbar-nav> li> a {
28 padding-top: 15px;
29 padding-bottom: 15px;
30 }
应用时，可以在框架代码的基础上添加，可参考如下代码：
1

2
• list1

3
• list2

4
• list3

5

完成后效果图如下：

常规导航条
2.2 常用格式优化
为了保证导航容器内的相关内容有正确的行距和颜色等格式，
Bootstrap 预设了一些常用的样式格式。
常用格式样式如下：
1 .navbar-default .navbar-nav > .active > a,
2 .navbar-default .navbar-nav > .active > a:hover,
‐ 4 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
3 .navbar-default .navbar-nav > .active > a:focus {
4 color: #555;
5 background-color: #e7e7e7;
6 }/*用于设置选中的列表*/
7 .navbar-brand {
8 float: left;
9 height: 50px;
10 padding: 15px 15px;
11 font-size: 18px;
12 line-height: 20px;
13 }/*一般用于导航的标题类内容*/
14 .navbar-text {
15 margin-top: 15px;
16 margin-bottom: 15px;
17 }/*一般用于导航的非超链接类文本*/
18 .navbar-left {
19 float: left !important;
20 }/*组件左排列*/
21 .navbar-right {
22 float: right !important;
23 margin-right: -15px;
24 }/*组件右排列*/
25 .navbar-form {
26 padding: 10px 15px;
27 margin-top: 8px;
28 margin-right: -15px;
29 margin-bottom: 8px;
30 margin-left: -15px;
31 border-top: 1px solid transparent;
32 border-bottom: 1px solid transparent;
‐ 5 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
33 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0
34 rgba(255, 255, 255, .1);
35 }/*用于设置导航内的表单组件*/
利用上面的格式优化样式，我们可以做出比较完美的导航条了。
3、字体图标或品牌图片
3.1 字体图标
在配置环境的时候，也许你已经留意到了 Bootstrap 存放字体的文件
夹， Bootstrap 提供了 Glyphicons 字体图标，包括 250 多个来自 Glyphicon
Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者
允许 Bootstrap 免费使用。部分图标样式可以看下图，你也可以在
http:///components 查看所有的图标样式。
二、演示任务关键操作
步骤，引导学生完成课

Bootstrap 提供的字体图标 堂练习
每一个图标都有一个独立的类，图标类不能和其它组件直接联合使
用，它们不能在同一个元素上与其他类共同存在。
所以，要使用图标必须创建一个嵌套的 标签，并将图标类应
用到这个 标签上。
为了有正确的 padding 值，务必在图标和文本之间添加一个空格。


‐ 6 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
可参考如下代码：
1 2 hidden="true">
aria‐hidden="true"为无障碍属性，我们会在项目 5 中介绍。
3.2 品牌图片
将导航条内放置品牌标志的地方（头部）替换为 元素即可展
示自己的品牌图标。由于.navbar‐brand 已经被设置了内补（padding）和高
度（height），所以在使用时需要设置自己的 CSS 代码来替换默认的样式。
可参考如下 CSS 样式代码：
1 .navbar-brand {
2 padding: 5px !important;
3 }
4 .navbar-brand > img {
5 height: 40px;
6 }
4、为手机端创建菜单图标
将课堂练习 2‐3‐2 中完成的导航条在手机端（<768px），我们会发现导
航条全部垂直排列了，如下图：

移动端导航条初始化效果
很明显，这个并不是我们要的效果。
‐ 7 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
Bootstrap 已经为我们想好了一切，为此，你只需要添加适当的 HTML
代码即可得到你要的结果：
（1）在 navbar‐header 类的
标签中添加按钮，并为其添
加 navbar‐toggle 和 collapsed 类；
（2）用
将要隐藏的列表包裹，并为其添加 collapse 和 navbar‐
collapse 类；
（3）Bootstrap 采用的是通过单击鼠标按钮来显示和隐藏的下拉菜
单，所以其依赖于 jquery.js 和 bootstrap.js 文件。为此，我们需要在

中添加如下参数：
data‐toggle="collapse"：触发事件
data‐target="#bs‐example‐navbar‐collapse‐1"：触发事件的目标
aria‐expanded="false"：用于无障碍设备检查切换动作的扩张属性
data 属性是 Bootstrap 的 API，是我们使用 Bootstrap JS 的首选方式，
你可以仅仅通过 data属性 API 就能使用所有 Bootstrap 中的插件，而不用
写一行 JavaScript 代码，此处应用了 Bootstrap JS 的 collapse 插件。
aria‐expanded 是 W3C WAI‐ARIA（无障碍）的一个扩展属性，目前还是
草案，可查看 W3C 文档 https://www.w3.org/WAI/GL/wiki/Using_aria‐
expanded_to_indicate_the_state_of_a_collapsible_element了解详细，如果
你的网页不针对网页无障碍进行设计的，则可省略此属性。
在 navbar‐collapse 类的
标签中添加 id 属性，并对应 data‐target 的
值：
id="bs‐example‐navbar‐collapse‐1"
当然你也可以自己定义属性值，只需要与 data‐target 的属性对应即可。
5、滚动监听
滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。当
滚动导航条项对应的内容区域时该导航条项目会高亮显示。
该插件依赖于 Bootstrap 的 scrollspy.js，该 js 文件已经集成在了
‐ 8 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
bootstrap.js 中。
在完成 ID 属性来实现页面内链接的导航方式后，通过调用 data 属
性，即可完成对内相对定位元素的滚动监听。
为此，你需要将设置为相对定位，同时为该标签添加 data‐
spy="scroll"和 data‐target="#navbar‐example"两个属性（#navbar‐example 可
以根据具体情况修改，并与 id 值对应）。
二、根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。
【课堂练习 2‐3‐1 使用 Bootstrap制作如下导航条】
某网站导航条效果图如图所示，请使用 Bootstrap 导航条组件完成其网
页效果的实现。

课堂练习 2‐3‐1 效果图
可参考如下方式实现：
（1）搭建导航框架；
（2）创建列表，并输入相应内容；
（3）利用 Bootstrap 的导航条格式优化样式来设置内容样式。
可参考如下 HTML 代码：
1
【课堂练习 2‐3‐2 在导航条添加图标和品牌图片】
在上一个课堂练习的基础上，完成如下效果图：在 Login 前面添加字
体图标，在 Olimpia Trucks 前面添加品牌图片。

带 logo 和图标的导航条
可参考如下方式实现：
（1）添加品牌图片
删除原有的文字品牌标志，添加标签，图片文件在 4.3‐2 文件夹
中；
修改的格式，让其在导航条上有正确的大小和边距，CSS 代码可
参考上面品牌图片内容中涉及的代码；
（2）添加字体图标
参考字体图标内容中的标签代码，修改相应的样式即可。
可参考如下 HTML 代码：
1
【课堂练习 2‐3‐3 导航条的移动化】
将课堂练习 2‐3‐2 的导航条进行响应式处理，让其在移动端时按下图
效果显示，且在单击图标时能够按下拉的方式显示隐藏的导航条。

移动端导航条
可参考如下代码：
1
2
3 toggle="collapse" data-target="#bs-example-navbar-
4 collapse-1" aria-expanded="false">
5
6
7
8

1
‐ 11 ‐
任 务 实 施 过 程

教学 时间
学生活动 教师活动 备注说明
环节 分配
2

4
5

【课堂练习 2‐3‐4 在练习 2.3‐2 的基础上，为导航条制作滚动监听效果】
（测试内容部分可以只写标题，以添加高度的方式来占位）
（1）添加样式，将设置为相对定位：
1 body{
2 position: relative;
3 }
（2）为标签添加两个 data 属性：
1
（3）将 data‐target="#navbar‐example"属性与滚动监听对象——导航
条组件进行关联，即在