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

教学课题 项目10 CSS 3创建网格布局—10.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握网格布局的术语； 2.掌握子元素网格容器的属性。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过前面知识的学习，已经掌握了CSS 3的各类选择器的应用，掌握了CSS 3美化文本、段落和图片的方法以及 CSS 3美化超链接和项目列表，掌握了使用CSS修饰表格表单，并掌握CSS美化边框、美化背景的方法。 网格布局是网站设计的基础，CSS Grid是创建网格布局最强大和最简单的工具。网格布局目前获得了主流新版本浏览器（Safari、Chrome、Firefox、Edge）的原生支持，所以前端开发人员都必须学习这项技术。 教学重点 1.网格布局的重要术语； 2.子元素网格容器的属性。 教学难点 1.子元素网格容器的属性。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过网页中网格的效果，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 子元素网格容器属性 1. grid-column-start、grid-column-end、grid-row-start和grid-row-end属性 通过指定网格线来确定网格内网格项的位置。 grid-column-start和 grid-row-start是网格项开始的网格线， grid-column-end和 grid-row-end是网格项结束的网格线。 属性值为： （1）line：可以是一个数字引用一个编号的网格线，或一个名字来引用一个命名的网格线。 （2）spannumber：该网格项将跨越所提供的网格轨道数量。 （3）spanname：该网格项将跨越到所提供的名称位置。 （4）auto：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度。 CSS代码为: .item{ grid-column-start:number|name|spannumber|spanname|auto; grid-column-end:number|name|spannumber|spanname|auto; grid-row-start:number|name|spannumber|spanname|auto; grid-row-end:number|name|spannumber|spanname|auto; } 【例10-4】网格项跨行、跨列和重叠实例。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title网格项跨行、跨列/title 6 style 7 .wrapper{ 8 display: grid; 9 grid-template-columns: 200px 200px 200px; 10 grid-template-rows: 100px 100px 100px; 11 } 12 .wrapper div{ 13 color:#fff; 14 font-size: 50px; 15 line-height: 50px; 16 text-align: center; 17 margin: 1px; 18 } 19 .item1{ 20 background-color: #acf888; 21 grid-column: 1/4; 22 } 23 .item2{ 24 background-color: #fe0975; 25 } 26 .item3{ 27 background-color: #5efffa; 28 grid-row-start: 2; 29 grid-row-end: 4; 30 } 31 .item4{ 32 background-color: #e6b4fd; 33 opacity: 0.8; 34 grid-column: 2/4; 35 grid-row: 3/4; 36 z-index:0; 37 } 38 .item5{ 39 background-color: #8dfecd; 40 grid-column: 1/3;