HTML5+CSS3网页设计实战 教案 7.3 伪元素选择器

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。27.3掌握更多的CSS选择器该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 了解伪元素选择器的应用场景。（2） 掌握::before伪元素选择器、::after伪元素选择器的用法格式。能力目标：（1） 具备使用::before伪元素选择器、::after伪元素选择器为目标位置生成元素的能力。（2） 具备使用::before伪元素选择器完成排行榜的项目列表图标的能力。素养目标：（1） 了解本章成语的出处，理解成语含义与知识点理解的结合。（2） 通过了解排行榜时事，可以更加深入地了解中国的国情，包括政治、经济、文化等各个方面。这种了解有助于增强民族自豪感和爱国情怀，提高对国家发展的认同感和责任感。伪元素选择器的应用::before伪元素选择器、::after伪元素选择器。通过成语解析概念，然后借助案例强化选择器的写法。::before伪元素选择器完成排行榜的项目列表图标。通过相关案例的属性设置前后对比，让学生加强理解与认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习:nth-child(n)和:nth-last-child(n)选择器的区别。请举例说明:nth-child(n)与:nth-of-type选择器的区别。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入伪元素选择器是Web设计中一个非常有用的工具，‌它允许开发者在不改变HTML结构的情况下，‌通过CSS为元素添加装饰性内容和视觉效果，‌从而丰富网页的视觉表现力和用户体验。以下是一些具体的应用场景：‌（1）添加装饰性图标或符号。（2）面包屑导航。在面包屑导航中，‌可以使用伪元素来连接各个页面之间的链接，‌如使用"»"符号连接页面，‌使用"/"符号分隔页面链接等。‌（3）创建装饰性边框或背景：‌通过设置伪元素的样式，‌可以为其添加边框、‌背景色或其他视觉效果，‌从而增强元素的视觉吸引力。‌听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授在早期的CSS规范中，伪元素选择器使用单冒号（:）来表示，CSS3规范更新了语法，要求使用双冒号（::）来表示伪元素选择器。两者的区别在于使用的单冒号（:）和双冒号（::）。::before和:before是伪元素选择器，用于在目标元素的前面插入内容。内容（content）属性可以为空，只为设置样式。::after和:after用于在目标元素的后面插入内容。内容（content）属性也可以为空。用法示例：p::before{content:"台词";color:red;}p::after{content:"";display:block;width:30px;height:30px;}知识点：伪元素选择器特点记忆关键词：无中生有关键词解析： ::before、::after伪元素选择器可以在不影响html结构的情况下，凭空添加一个元素，通过样式中的content属性赋予元素的内容，照常设置其他css属性即可。“伪”也可以理解成“一个并不真实存在于html结构”的元素。☆思政解说：从学习手段来看，“无中生有”不仅是一种创造性的思维方式，更是一种积极的学习态度和问题解决策略。面对学习中的难题或挑战，我们往往没有现成的答案或方法。“无中生有”鼓励我们跳出常规思维，尝试从不同的角度或领域寻找灵感，比如将数学方法应用于物理问题，或者从文学作品中寻找历史事件的线索。这种跨领域的思考方式可以激发新的想法和解决方案。比如：初学英语时，许多人给单词读音标记中文谐音字的方式，第一个尝试这么做的人，是否凭空想出一种解决策略？比如：学网页设计，许多人表示不会配色，不懂图像怎么处理，其实身边并不是缺乏素材，随手一张图片、课本插图，甚至只有一张图的情况下，我们也可以无限放大局部去颜色的对比与协调。当手头没有资料，要从身边的事物中获取灵感及素材，这也是一种“无中生有”。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例8】完成如图7-20所示的热搜榜版面效果。☆思政讲解：了解排行榜时事，可以更加深入地了解中国的国情，包括政治、经济、文化、体育等各个方面。这种了解有助于增强民族自豪感和爱国情怀，提高对国家发展的认同感和责任感。（1）书写对应的HTML代码，如图7-21所示。从HTML结构来看，我们并没有给各种图标预留有容器。（2）编写对应的CSS代码，如图7-22所示。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10Ul容器结构及基本样式结构书写正确，基本样式正确。30::before伪元素所生成的样式与效果一致。30::after伪元素所生成的样式与效果一致。30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）了解伪元素选择器的应用场景。（2）掌握::before伪元素选择器、::after伪元素选择器的用法格式。（3）通过了解排行榜时事，可以更加深入地了解中国的国情，包括政治、经济、文化等各个方面。这种了解有助于增强民族自豪感和爱国情怀，提高对国家发展的认同感和责任感。听讲归纳本任务的开展情况，梳理知识点。采用归纳法分析班级完成的任务情况，反复提醒关键核心代码及容易出错之处。【练习1】打开温氏集团的新闻栏目页/GroupNews/list.aspx，观察如图7-28所示的区域，先思考该区域的布局结构。图7-28光标落在网页中对应的区域，右键菜单中选择“审查元素”，直接进入开发模式，元素面板如图7-29所示。图7-29元素面板该元素对应的样式面板如图7-30所示。图7-30样式面板仔细看上面两张截图后思考以下问题：（1）在布局中，图片区域、文字区域对应使