3.7-CSS控制列表样式（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 CSS控制列表样式 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 使学生了解CSS控制列表样式的基本方法。 · 让学生掌握如何使用CSS修改列表的项目符号、编号、显示位置等属性。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. CSS列表样式的相关属性及其用法。 2. 如何自定义列表的项目符号和编号样式。 3. 列表样式的实际应用技巧。 教学难点 1. 如何灵活运用CSS控制列表样式的多种属性。 2. 如何根据设计需求选择合适的列表样式。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 讲授法：通过教师的讲解，传授CSS控制列表样式的基本知识。 · 案例分析法：通过分析案例，让学生理解CSS列表样式的应用方法和技巧。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾之前学过的HTML列表（如ul、ol、li）的基本用法。 2. 展示几个具有不同列表样式的网页截图，引导学生观察并思考如何实现这些效果。 2分钟 讲授新课 练习指导 CSS列表样式的相关属性及其用法： 1. list-style-type：用于设置列表项的项目符号样式。常见的取值有： - disc（默认值）：实心圆点。 - circle：空心圆点。 - square：实心方块。 - none：无项目符号。 - 其他自定义值，如“A”、“a”、“I”、“i”等，用于设置字母或罗马数字编号。 示例： ```css ul { list-style-type: circle; } ``` 2. list-style-position：用于设置列表项的项目符号位置。取值有： - outside（默认值）：项目符号位于列表项外部。 - inside：项目符号位于列表项内部。 示例： ```css ul { list-style-position: inside; } ``` 3. list-style-image：用于设置列表项的项目符号为自定义图片。取值为图片的URL。 示例： ```css ul { list-style-image: url('bullet.png'); } ``` 如何自定义列表的项目符号和编号样式： 1. 使用list-style-type属性设置列表项的项目符号样式。 2. 使用list-style-position属性设置项目符号的位置。 3. 使用list-style-image属性设置项目符号为自定义图片。 4. 使用CSS伪元素（如::before）和CSS计数器（如counter-increment和counter-reset）自定义列表的编号样式。 列表样式的实际应用技巧： 1. 根据设计需求选择合适的列表样式，如项目符号、编号、位置等。 2. 使用CSS伪元素和计数器实现复杂的编号样式，如嵌套列表的多级编号。 3. 使用CSS选择器（如:nth-child）对特定列表项进行样式调整，如改变项目符号颜色或大小。 4. 使用CSS媒体查询（如@media）适配不同设备和屏幕尺寸，优化列表样式的显示效果。 通过掌握CSS列表样式的相关属性及其用法，学生可以灵活运用这些知识点来实现各种列表样式的设计需求。在实际应用中，学生需要根据设计原则和需求，选择合适的列表样式，并结合其他CSS技巧进行优化。这将有助于提高学生的网页设计能力和审美素养。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 根据给定的HTML结构，编写相应的CSS代码，实现指定的列表样式效果。 2. 设计一个简单的网页，要求使用至少两种不同的列表样式来展示内容。 12分钟 布置作业 1. 完成课后习题练习，并提交代码和效果图。 2. 选择一个自己感兴趣的主题，设计一个包含列表样式的网页作品。 1分钟 总结回顾 1. CSS列表样式的相关属性及其用法。 2. 如何自定义列表的项目符号和编号样式。 3. 列表样式的实际应用技巧和设计原则。 通过本节课的学习，学生应该能够熟练掌握CSS控制列表样式的方法，并在实际网页设计中灵活运用所学知识。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$