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

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。27.3掌握更多的CSS选择器该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）了解伪类选择器的应用场景及种类。（2）:Hover选择器的应用（3）:nth-of-type(n)选择器和:nth-last-of-type()选择器的应用。能力目标：（1）具备正确使用Hover伪类选择器，并合理定义状态的能力。（2）具备正确使用nth-of-type(n)和:nth-last-of-type()选择器的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。（2）通过引入宋词的案例，鼓励学生跨学科学习，将程序设计与其他学科知识相结合，拓宽视野，提升综合素质。伪类选择器的应用:nth-of-type(n)选择器和:nth-last-of-type()选择器。通过成语解析概念，然后借助案例强化选择器的写法。部分英文单词的记忆。通过单词对比加强对选择器英文的记忆。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习属性选择器的应用场景。列举一下可以应用属性选择器的标签。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入伪类选择器，是一种特殊的选择器，它用来选择元素在特定状态下的样式。这些特定状态并不是由文档结构决定的，而是由用户行为（如点击、悬停）或元素的状态（如被访问、被禁用）来定义的。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授7.3.3伪类选择器 伪类选择器包含数十种选择器，大体包括以下三大类：（1）结构性伪类选择器，结构性伪类选择器主要用于选取DOM树中特定位置的元素。（2）状态伪类选择器，状态伪类选择器主要用于选取具有特定交互状态的元素。（3）表单相关伪类选择器，表单相关伪类选择器主要用于选取与表单相关的特定元素。知识点：伪类选择器特点记忆关键词：千变万化关键词解析： 伪类选择器可以根据不同的条件和状态来选择元素，这些条件和状态可以是动态的、交互的，甚至是基于文档结构的。因此，伪类选择器在CSS中的应用就像千变万化的魔法，能够根据不同的场景和需求，以灵活多变的方式为元素应用样式。把握以下几种常见的伪类选择器。1.:hover选择器:hover选择器通常用于超链接元素，也可以用于大部分HTML标签。如果应用在a元素上，通常有a:active，a:hover,a:link,a:visited四种状态，但实际上，通常只需要设置a:hover状态即可。其他状态可以由a对应标签选择器中设置对应属性就可以达到现行的主流效果。2.:nth-of-type(n)选择器和:nth-last-of-type()

选择器:nth-of-type(n)选择器匹配“同类型中的第n个同级兄弟元素”。:nth-last-of-type(n)选择器匹配“同类型中的倒数第n个同级兄弟元素”。括号内的数字n也可以采用odd、even关键字，分别指的是奇数、偶数位置。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例4】设计如图7-11所示的导航条的级联菜单出现效果。（1）编写如图7-12所示的HTML代码：（2）完成对应的CSS代码，如图7-13所示。（3）保存文件，在浏览器中运行，测试光标滑过时的效果。【案例5】完成如图7-14所示的文字效果。对应的HTML和CSS代码如图7-15所示。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10练习1级联菜单对应的容器结构正确20添加hover选择器后，交互效果达到预期。30练习2nth-of-type(n)选择器定义正确20nth-last-of-type()选择器定义正确20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）了解伪类选择器的应用场景及种类。（2）掌握:Hover选择器的应用（3）掌握:nth-of-type(n)选择器和:nth-last-of