定义value属性，它们决定有序列表的项目符号。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
在上节课中，我们已经学习了如何定义无序列表和有序列表。本节课将学习另一种列表——定义列表。那么，请大家讨论下什么是“定义列表”？以及如何使用“定义列表”？
答案：
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
●定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。
●定义列表使用
、和进行定义，其中，标记用于指定术语名词，标记用于对名词进行解释和描述。一对可以对应多对，即可以对一个名词进行多项解释。✧案例描述
传统的名片，往往需要手动把上面的信息存进手机，这样的录入方式繁琐且容易出错。二维码名片的出现，简化了繁琐的信息录入方式，轻轻一扫，就可读取内部包涵的文字和图片信息，极大地提高了信息的存取速度。本节将运用定义列表制作一款时尚潮流的“二维码名片”。
✧知识点讲解
总结知识点
教师和学生一起总结在案例中涉及到的知识点，主要包括“定义列表、定义列表实现图文混排、列表嵌套”等。
讲解“定义列表”
（1）、教师展示PPT对“定义列表”的概念进行讲解，并列举网页中常见的例子进行说明。
（2）、教师展示PPT，对“定义列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。
（3）、教师对比“定义列表”与“无序列表和有序列表”的显示效果，分析其区别与联系。
（4）、教师指出定义“定义列表”时需要注意的问题，并给与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
讲解“定义列表实现图文混排”
（1）、教师访问“传智播客”官方网址，展示常见的“图文混排”效果。
（2）、教师对“定义列表实现图文混排”进行讲解并通过代码进行演示。
（3）教师分析“定义列表实现图文混排”时需要注意的问题，并给与解答。
（4）、学生练习，教师巡视，对疑难问题进行解答。
讲解“列表嵌套”
（1）、教师和学生互动：在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若干子列表项，例如“淘宝网”中的导航栏效果。要想在列表项中定义子列表项就需要将列表进行嵌套，下面，将对列表的嵌套进行讲解。
（2）、教师通过PPT对“列表嵌套”在网页中的常见效果进行展示。
（3）、教师对“列表嵌套”进行讲解并通过代码进行演示。
（4）、教师指出“列表嵌套”时需要注意的问题，并给予解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
✧案例讲解
案例分析
分析“二维码名片”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。
案例实现
教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。
说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。
✧阶段小结
小结
重点：定义列表、定义列表实现图文混排、列表嵌套。
易错点：定义列表背景时，需要清除列表项的默认项目符号。
答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
✧巩固练习
巩固“二维码名片”的制作
学完知识点后，让学生再制作一次“二维码名片”案例。以此使学生更熟练地掌握如何使用定义列表及列表的嵌套，并能灵活应用定义列表实现图文混排的效果。
通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
✧布置作业
完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
预习5.3节【案例13】电商团购悬浮框。
预习5.4节【案例14】唱吧导航栏。
第三课时
（制作“电商团购悬浮框”，讲解list-style复合属性、背景图像定义列表项目符号）
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
如左上图所示效果，下列嵌套列表可以实现的是（ ）
A、有序列表嵌套有序列表
B、有序列表嵌套无序列表
C、无序列表嵌套有序列表
D、无序列表嵌套无序列表
答案：C
答案解析：咖啡前面是无序列表的项目符号，拿铁和摩卡前面的项目符号按照一定的顺序排列是有序列表。因此为无序列表嵌套有序列表。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
在网页中，我们很少看见规范的列表项目符号，而一般使用小图像来代替。这样，不仅更加美观，而且更容易控制。那么，如何使用背景图像定义列表项目符号呢？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
答案：
由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为
