（中职）Web前端设计基础 项目十电子课件.pptxVIP

（中职）Web前端设计基础 项目十电子课件正版可修改PPTYCFWEB前端设计基础CSS 3创建网格布局项目十授课教师：姓名Contents5.项目小结1.项目描述3.项目实施2.知识准备6.技能训练4.项目拓展一 项目描述本项目学习要点网格布局的术语；网格容器的属性；网格项元素属性；如何创建网格布局；创建双飞翼布局。二 知识准备CSS一直用来布局网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是hack而已，并且遗漏了很多重要的功能（例如垂直居中）。后来，Flexbox在很大程度上改善了布局方式，但它是为了解决更简单的一维布局，而不是复杂的二维布局。Grid布局是专门为了解决二维布局问题而创建的CSS模块，是有史以来最强大的CSS模块之一。二 知识准备网格布局的重要术语；父元素网格容器属性；子元素网格项的属性。网格布局的重要术语1．网格容器和网格项网格容器任何应用display属性值为grid的元素就是网格容器，是所有网格项（Grid Items）的父级元素。网格项网格容器（Grid Container）的子元素（例如直接子元素）。网格布局的重要术语1．网格容器和网格项【例10-1】创建具有3个子元素的网格容器，代码如下所示（示例文件10-1.html）。!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title网格容器和网格项/title style /*只要display的值为grid，这个元素就是网格容器*/ .container{ display:grid; } /style/headbody div class=container div class=item1第1个网格项/div div class=item2第2个网格项/div div class=item3第3个网格项/div /div/body/html网格布局的重要术语2．网格线构成网格结构的分界线。它们既可以是垂直的，也可以是水平的，并位于行或列的任一侧，如图所示黄线就是一条列网格线。网格布局的重要术语3．网格轨道两条相邻网格线之间的空间。可以把它们想象成网格的列或行。如图所示的第二条和第三条行网格线之间的就是网格轨道。网格布局的重要术语4．网格单元格两个相邻的行和两个相邻的列网格线之间的空间。这是网格系统的一个“单元格”。如图所示，第1至第2条行网格线和第2至第3条列网格线交汇构成的就是网格单元格。网格布局的重要术语5．网格区域四条网格线包围的总空间。一个网格区域可以由任意数量的网格单元格组成。如图所示，第1条到第3条行网格线和第1条到第3条列网格线之间的就是网格区域。父元素网格容器属性1．display属性将元素定义为网格容器，并为其内容建立新的网格格式。display属性值如表所示。Display属性含义grid生成一个块级网格inline-grid生成一个内联网格subgrid表示网格容器本身是另一个网格的网格项（即嵌套网格）父元素网格容器属性1．display属性CSS代码格式如下：.container{ display:grid|inline-grid|subgrid;}需要注意：在网格容器(Grid Container)上使用column，float，clear，vertical-align不会产生任何效果。父元素网格容器属性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列的网格布局（示例文件10-2.html）。style .container{ display:grid; height: 300px; grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; grid-gap: 10px; } .cont