（中职）Web前端设计基础 项目十-1电子教案

1、（中职）Web前端设计基础 项目十-1电子教案（中职）Web前端设计基础 项目十-1电子教案（中职）Web前端设计基础 项目十-1电子教案教学课题项目10 CSS 3创建网格布局10.1项目描述、10.2知识准备授课班级授课时间教学目标知识目标1.掌握网格布局的术语；2.掌握父元素网格容器的属性。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析通过前面知识的学习，已经掌握了CSS 3的各类选择器的应用，掌握了CSS 3美化文本、段落和图片的方法以及 C

2、SS 3美化超链接和项目列表，掌握了使用CSS修饰表格表单，并掌握CSS美化边框、美化背景的方法。网格布局是网站设计的基础，CSS Grid是创建网格布局最强大和最简单的工具。网格布局目前获得了主流新版本浏览器（Safari、Chrome、Firefox、Edge）的原生支持，所以前端开发人员都必须学习这项技术。教学重点1.网格布局的重要术语；2.父元素网格容器的属性。教学难点1.父元素网格容器的属性。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个网页页面，通过网页中网格的效果，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技

3、能学习单元格列行单元格列行单元格列行一、网格布局的重要术语单元格列行单元格列行单元格列行1.网格容器(Grid Container)和网格项(Grid Item)（1）网格容器。任何应用display属性值为grid的元素就是网格容器，是所有网格项（Grid Items）的父级元素。（2）网格项。网格容器（Grid Container）的子元素（例如直接子元素）。【例10-1】创建具有3个子元素的网格容器，代码如下所示。1 2 3 4 5 网格容器和网格项6 7 /*只要display的值为grid，这个元素就是网格容器*/8 .container9 display:grid;10 11 12

4、 13 14 15 第1个网格项16 第2个网格项17 第3个网格项18 19 20 2. 网格线(Grid Line)构成网格结构的分界线。它们既可以是垂直的，也可以是水平的，并位于行或列的任一侧。3.网格轨道(Grid Track)两条相邻网格线之间的空间。可以把它们想象成网格的列或行。4.网格单元格(Grid Cell)两个相邻的行和两个相邻的列网格线之间的空间。这是网格系统的一个“单元格”。 5.网格区域(Grid Area)四条网格线包围的总空间。一个网格区域可以由任意数量的网格单元格组成。二、父元素网格容器属性1.display属性CSS代码格式如下:.containerdispl

5、ay:grid|inline-grid|subgrid;2.grid-template-columns和grid-template-rows属性使用空格分隔的值列表，用来定义网格的列和行。这些值表示网格轨道大小，它们之间的空格表示网格线。属性值为：（1） ：可以是长度值、百分比或者等份网格容器中可用空间( fr单位）（2） ：可以选择的任意名称CSS 代码:.container grid-template-columns: . | .; grid-template-rows: . | .;【例10-2】创建一个3行5列的网格布局。1 2 3 4 5 网格划分6 7 .container8 di

6、splay:grid;9 height: 300px;10 grid-template-columns: 40px 50px auto 50px 40px;11 grid-template-rows: 25% 100px auto;12 grid-gap: 10px;13 14 .container divbackground-color: green;15 16 17 18 19 120 221 322 423 524 625 726 827 928 1029 1130 1231 1332 1433 1534 35 36 在浏览器中预览效果如图所示。3.grid-template-areas

7、属性通过引用 HYPERLINK /archives/8510 l prop-grid-area grid-area属性指定网格区域名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空的网格单元。这个语法本身可视作网格的可视化结构。【例10-3】创建一个4列3行的网格。1 2 3 4 5 创建一个4列3行的网格6 7 .container8 display: grid;9 grid-template-columns: 100px 100px 100px 100px;10 grid-template-rows: 50px 200px 50px;11 grid-t

8、emplate-areas:header header header header12 main main.sidebar13 footer footer footer footer;14 15 .item116 grid-area: header;17 background-color:blue; 18 19 .item220 grid-area: main;21 background-color: yellow;22 23 .item324 grid-area: sidebar;25 background-color: pink;26 27 .item428 grid-area: foot

9、er;29 background-color: green;30 31 32 33 34 35 header36 main37 sidebar38 footer39 40 41 在浏览器中预览效果如图所示。4.grid-column-gap和grid-row-gap属性指定网格线(grid lines)的大小，可以想象为设置列和行之间间距的宽度。属性值为：长度值。CSS代码:.containergrid-column-gap:;grid-row-gap:;5.justify-items和align-items属性justify-items属性的CSS代码格式:.containerjustify

10、-items:start|end|center|stretch;align-items属性的CSS代码:.containeralign-items:start|end|center|stretch;6.justify-content和align-content属性justify-content属性的CSS代码:.containerjustify-content:start|end|center|stretch|space-around|space-between|space-evenly;align-content属性的CSS代码:.containeralign-content:start|e

11、nd|center|stretch|space-around|space-between|space-evenly;7.grid-auto-columns和grid-auto-rows属性.containergrid-auto-columns:.;grid-auto-rows:.;8.grid-auto-flow属性如果有一些没有明确放置在网格上的网格项，自动放置算法会自动放置这些网格项。该属性控制自动布局算法，属性值为：（1）row：告诉自动布局算法依次填充每行，根据需要添加新行。（2）column：告诉自动布局算法依次填入每列，根据需要添加新列。（3）dense：告诉自动布局算法在稍后出现

12、较小的网格项时，尝试填充网格中较早的空缺。CSS代码为:.containergrid-auto-flow:row|column|rowdense|columndense;教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳本节课学习了网格容器、网格项、网格线、网格轨道、网格区域等网格布局的重要术语和父元素网络容器的属性。知识点内容重要术语网格容器任何应用display属性值为grid的元素就是网格容器网格项网格容器的直接子元素网格线构成网格结构的分界线。网格轨道两条相邻网格线之间的空间。网格区域四条网格线包围的总空间。教师讲授，学生归纳总结，并作适当的笔记。课后作业一、填空题1.任何应用display属性值为_的元素就是网格容器。2.网络容器的子元素称为_。3