工信版（中职）Web前端设计基础 项目十-2电子课件.pptx

《工信版（中职）Web前端设计基础 项目十-2电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目十-2电子课件.pptx（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Web前端设计基础 项目十-2电子课件CSS 3创建网格布局项目十授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练二 知识准备网格布局的重要术语；子元素网格项的属性。父元素网格容器属性；子元素网格项的属性1grid-column-start、grid-column-end、grid-row-start和grid-row-end属性通过指定网格线来确定网格内网格项的位置。grid-column-start和grid-row-start是网格项开始的网格线，grid-column-end和grid-row-end

2、是网格项结束的网格线。属性值为：（1）：可以是一个数字引用一个编号的网格线，或一个名字来引用一个命名的网格线。（2）span：该网格项将跨越所提供的网格轨道数量。（3）span：该网格项将跨越到所提供的名称位置。（4）auto：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度。子元素网格项的属性1grid-column-start、grid-column-end、grid-row-start和grid-row-end属性.itemgrid-column-start:|span|span|auto;grid-column-end:|span|span|auto;grid-row-st

3、art:|span|span|auto;grid-row-end:|span|span|auto;CSS代码为：子元素网格项的属性1grid-column-start、grid-column-end、grid-row-start和grid-row-end属性.item-agrid-column-start:2;grid-column-end:five;grid-row-start:row1-startgrid-row-end:3例如，如下CSS代码：效果分析如图所示：子元素网格项的属性1grid-column-start、grid-column-end、grid-row-start和grid-row-end属性.item-bgrid-column-start:1;grid-column-end:spancol4-start;grid-row-start:2grid-row-end:span2又如下CSS代码：效果分析如图所示：如果没有声明指定grid-column-end和grid-row-end，默认情况下，该网格项将占据1个轨道。项目可以相互重叠。您可以使用z-index来控制它们的重叠顺序。