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

YCF;;Contents;三 项目实施;创建网格布局;创建一个网格，先需要定义一个父级容器（wrapper），在这个容器中放置6个子元素（items）。使用HTML标记，在每个子元素(items)加上了单独的class名，如图所示。保存文件名为“10-5.html”。;为了能够清楚的区分不同的网格，给这6个网格添加不同的样式，如图所示。;要把父容器（wrapper）变成一个网格(grid)，只要简单地把其display属性设置为grid即可，如图所示。;设置网格的Columns(列)和rows(行)，定义网格样式，通过grid-template-columns和grid-template-rows属性来设置，如图所示。;为了更好的理解这些值与网格外观之间的关系，修改属性的参数值。将下列代码修改为2列3行，并且定义第一列宽度200像素、第二列宽度200像素（grid-template-columns:200px 200px;），第一行高度50像素、第二行高度100像素、第三行高度50像素（grid-template-rows:50px 100px 50px;），如图所示。;继续改变网格的属性设置，让item1（子元素）独占一行，修改item1的css属性，如图所示。;上面grid-column-start和grid-column-end的值是指从哪个网格线开始到哪个网格线结束。设置了开始值为1，结束值为4，如图所示，其中的四条黑色竖线表示列网格线。;设置item1占据从第1条网格线开始，到第4条网格线结束，让它独立占据整行的设置方法就是第21、22行设置列的网格线从1开始（grid-column-start:1;）到4结束（grid-column-end:4;）。 用更简单的缩写方法来写上面的语法代码，来实现上面的效果，如图所示。;为了更加牢固的理解了这个概念，重新排列其他的items(子元素)，如图所示。;在浏览器中预览重新排列后网格布局的效果，如图所示。;用Sublime编辑器，新建一个文件，保存文件名为“10-6.html”。;第二步;第二步;在父元素“container”下增加两个类名为“header”、“footer”的子元素，如图所示；设置网格行为三行：“header”块位于第一行，行高为100像素；“left”、“main”、“right” 块位于第二行，行高为200像素；“footer” 块位于第三行，行高为100像素，如图所示。;文件另存为“10-7.html”，设置“container”网格容器内的网格项沿行轴的对齐方式为center，设置“main”块的宽度为600像素，这样一个水平居中的布局就设置好了?? ;文件另存为“10-7.html”，设置“container”网格容器内的网格项沿行轴的对齐方式为center，设置“main”块的宽度为600像素，这样一个水平居中的布局就设置好了。 ;四 项目拓展;四 项目拓展;四 项目拓展;四 项目拓展;四 项目拓展;四 项目拓展;四 项目拓展;四 项目拓展;四 项目拓展;四 项目拓展;五 项目小结;五 项目小结;五 项目小结;六 技能训练;作业;End