HTML5+CSS3网页设计实战 教案 7.3 伪类选择器-2

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。27.3掌握更多的CSS选择器该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）:first-child选择器与:last-child选择器的区别。（2）:nth-child(n)和:nth-last-child(n)选择器的区别。（3）理解last字眼在选择器中所起的作用。能力目标：（1）具备应用:first-child选择器与:last-child选择器完成对应案例的能力。（2）具备应用:nth-child(n)和:nth-last-child(n)选择器完成对应案例的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。（2）通过类比思维，加强对选择器的认识，提升自身的思维能力。伪类选择器的应用:first-child选择器，:last-child选择器，:nth-child(n)，:nth-last-child(n)选择器。通过相关案例的属性设置前后对比，让学生加强理解与认识。理解并熟记这四种选择器的应用场合。通过案例讲解，让学生在不同场景中体会选择器的用法。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习相邻兄弟选择器与兄弟选择器的区别。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入今天了解其他常见的伪类选择器。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授:first-child选择器与:last-child选择器:first-child是css中的一个选择器，其作用是用于选择它的父元素中的第一个子元素。用法示例：p:first-child{……}:last-child选择器用来匹配父元素中最后一个子元素。单是从字面上看起来挺容易理解的，但实际隐藏了另外一个条件“这第一个子元素刚好是本身”。:nth-child(n)和:nth-last-child(n)选择器:nth-child(n)选择器匹配“父元素的第n个子元素，不论元素的类型”。:nth-last-child(n)选择器匹配“父元素的倒数第n个子元素，不论元素的类型”。注意这里说的“不论元素的类型”指的是“任何类型的元素都要纳入n的计数内”，但不是说“任何类型的元素都可以相应你的选择器”。这两种选择器同样也可以拥有odd、even关键字。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例6】打开上个《江城子·密州出猎》的练习，增加如图7-16所示的代码。【案例7】敲入如图7-18所示的代码，然后分析出现的预览效果。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分:first-child选择器选择器书写正确，样式达成预期。25:last-child选择器选择器书写正确，样式达成预期。25:nth-child(n)选择器书写正确，样式达成预期。25:nth-last-child(n)选择器书写正确，样式达成预期。25总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）:first-child选择器与:last-child选择器的区别。（2）:nth-child(n)和:nth-last-child(n)选择器的区别。（3）