教案《HTML5-CSS3项目开发案例教程》----第8课-使用CSS3美化列表.pdf

使用CSS3美化列表第8课

课题使用CSS3美化列表2

课时2课时（90min）

知识技能目标：

（1）学习使用CSS3设置列表项目符号

教学目标（2）掌握使用CSS3制作导航条、图文列表、排行榜的方法1

思政育人目标：

（1）培养学生严谨、细心的工作态度

（2）在学习中开拓自己的眼界，提升自己的辩证思维能力

教学重难点教学重点：CSS3设置列表项目符号和制作导航条等的操作方法2

教学难点：熟练操作CSS3制作导航条、图文列表、排行榜

教学方讲授法、启发法、问答法、演示法、讨论法、练习法

教学用具电脑、投影仪、多媒体课件、教材

第1节课：考勤（2min）→导入新知（4min）→知识讲解（24min）→知识竞赛（15

min）

教学设计

第2节课：案例分析（4min）→知识讲解（20min）→课堂练习（12min）→课堂小

结（7min）→作业布置（2min）

教学过程主要教学内容及步骤设计意图

第一节课

【教师】清点上课人数，记录好考勤培养学生的组

考勤织纪律性，掌握学

（2min）【学生】班干部报请假人员及原因生的出勤情况

【教师】概述CSS3在美化列表上的优势，引出新知识点

只使用HTML5制作的列表比较简单，想要制作图文列表、排

行榜等比较美观、实用的效果就要用到CSS3，CSS3提供了大量处通过问答的方

导入新知理列表的标签，丰富了列表美化的操作式，介绍CSS3美

（4min）【学生】聆听、思考化列表的方法，引

出本节课的内容

【教师】提出问题

同学们对CSS3美化列表的方法了解多少呢？自己常用的，

1

第8课使用CSS3美化列表的基基本本

最常见的美化列表的方法是哪个呢？

2【学生】思考、讨论、发言

【教师】讲述设置项目符号

1．项目符号类型

1在CSS3中，使用list-style-type属性设置列表项的符号类型，

其属性值及说明如表4-1所示。

表4-1list-style-type的属性值及说明

属性值说明属性值说明