《Web前端开发》教学讲义 Web前端设计基础 项目六-3.docxVIP

教学课题 项目6 CSS 3中的选择器—6.3项目实施6.4项目拓展 授课班级 授课时间 教学目标 知识目标 1.掌握CSS 3的基本语法和引用方法； 2.掌握CSS 3常用选择器； 3.掌握CSS 3新增选择器。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过上节课的学习，已经掌握了CSS 3的基本语法和引用方法，学习了CSS 3的常用选择器、新增选择器和伪类选择器。 本节课结合以上所学知识制作一个包含标签选择器、class选择器和ID选择器的实例和一个元素状态伪类选择器的实例。 教学重点 1.CSS 3的基本语法和引用方法； 2.CSS 3常用选择器； 3.CSS 3新增选择器。 教学难点 1.全局选择器、组合选择器的用法； 2.属性选择器、结构伪类选择器和UI元素状态伪类选择器的用法。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过查看网页源代码中CSS各类选择器的用法，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 单元格列行单元格列行单元格列行一、项目实施 单元格 列 行 单元格 列 行 单元格 列 行 Step01 启动Sublime程序，新建并保存文件名称为6-11.html。 Step02 输入代码如下： 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title选择器实例/title 6 style 7 *{margin:0px;padding:0px;color:white;font-family: 微软雅黑;font-size: 14px;} 8 div{width: 100px;height: 50px;background: red;} 9 .box{width: 100px;height: 50px;background: green;} 10 #box{width: 100px;height: 50px;background: blue;} 11 .wenben{width: 400px;height: 150px;position:absolute;left:100px;top:0px; background: white;} 12 p{color:#000;line-height: 50px;} 13 /style 14 /head 15 body 16 div 17 标签选择器 18 /div 19 div class=box 20 Class选择器 21 /div 22 div id=box 23 ID选择器 24 /div 25 div class=wenben 26 pdiv{width: 100px;height: 50px;background: red;}/p 27 p.box{width: 100px;height: 50px;background: green;}/p 28 p#box{width: 100px;height: 50px;background: blue;}/p 29 /div 30 /body 31 /html 在浏览器中预览效果如图所示。 二、项目拓展 Step01 启动Sublime程序，新建并保存文件名称为6-12.html。 Step02 输入代码如下： 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title元素状态伪类选择器/title 6 style 7 div{border:1px solid green;width:400px;margin-top: 10PX;padding:5px;} 8 input[type=text1]:hover { /*鼠标经过（悬停）*/ 9 background-color: pink; 10 } 11 input[type=text1]:focus { /*鼠标获得焦点（点击）并进行文字输入时*/ 12 background-color: #ccc; 13 } 14