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

教学课题 项目10 CSS 3创建网格布局—10.1项目描述、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 Container)和网格项(Grid Item) （1）网格容器。任何应用display属性值为grid的元素就是网格容器，是所有网格项（Grid Items）的父级元素。 （2）网格项。网格容器（Grid Container）的子元素（例如直接子元素）。 【例10-1】创建具有3个子元素的网格容器，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title网格容器和网格项/title 6 style 7 /*只要display的值为grid，这个元素就是网格容器*/ 8 .container{ 9 display:grid; 10 } 11 /style 12 /head 13 body 14 div class=container 15 div class=item1第1个网格项/div 16 div class=item2第2个网格项/div 17 div class=item3第3个网格项/div 18 /div 19 /body 20 /html 2. 网格线(Grid Line) 构成网格结构的分界线。它们既可以是垂直的，也可以是水平的，并位于行或列的任一侧。 3.网格轨道(Grid Track) 两条相邻网格线之间的空间。可以把它们想象成网格的列或行。 4.网格单元格(Grid Cell) 两个相邻的行和两个相邻的列网格线之间的空间。这是网格系统的一个“单元格”。 5.网格区域(Grid Area) 四条网格线包围的总空间。一个网格区域可以由任意数量的网格单元格组成。 二、父元素网格容器属性 1.display属性 CSS代码格式如下: .container{ display:grid|inline-grid|subgrid; } 2.grid-template-columns和grid-template-rows属性 使用空格分隔的值列表，用来定义网格的列和行。这些值表示网格轨道大小，它们之间的空格表示网格线。属性值为： （1） track-size：可以是长度值、百分比或者等份网格容器中可用空间( fr单位） （2） line-name：可以选择的任意名称 CSS 代码: .container { grid-template-columns: track-size ... | line-name track-size ...; grid-template-rows: track-size ... | line-name track-size ...; } 【例10-2】创建一个3行5列的网格布局。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title网格划分/title 6 style 7 .container{ 8 display:grid; 9 height: 300px; 10 grid-template-columns: 40px 50p