《（中职）Web前端设计基础 项目十-2电子课件.pptx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目十-2电子课件.pptx（15页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YCF正版可修改PPT（中职）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
2、-row-end是网格项结束的网格线。属性值为：（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;gri
3、d-row-start:|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-sta
4、rt和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来控制它们的重叠顺序。子元素网格项的属性1grid-column-start、grid-column-end、grid-row-start和grid-row-end属性【例10-4】网格项跨行、
5、跨列和重叠实例（示例文件10-4.html）。.wrapperdisplay:grid;grid-template-columns:200px 200px 200px;grid-template-rows:100px 100px 100px;.wrapper divcolor:#fff;font-size:50px;line-height:50px;text-align:center;margin:1px;.item1background-color:#acf888;grid-column:1/4;.item2background-color:#fe0975;子元素网格项的属性1grid-co
6、lumn-start、grid-column-end、grid-row-start和grid-row-end属性【例10-4】网格项跨行、跨列和重叠实例（示例文件10-4.html）。.item3background-color:#5efffa;grid-row-start:2;grid-row-end:4;.item4background-color:#e6b4fd;opacity:0.8;grid-column:2/4;grid-row:3/4;z-index:0;.item5background-color:#8dfecd;grid-column:1/3;.item6background
7、-color:#fd9a5c;grid-row:2/5;grid-column:3/4;子元素网格项的属性1grid-column-start、grid-column-end、grid-row-start和grid-row-end属性【例10-4】网格项跨行、跨列和重叠实例（示例文件10-4.html）。123456在chrome浏览器中预览子元素网格项的属性2justify-self和align-self属性justify-self属性：沿着行轴线对齐网格项内的内容，此值适用于单个网格项内的内容。属性值为：start：将内容对齐到网格区域的左侧end：将内容对齐到网格区域的右侧center：
8、将内容对齐到网格区域的中间（水平居中）stretch：填充整个网格区域的宽度（这是默认值）CSS代码为：.item-ajustify-self:start|end|center|stretch;子元素网格项的属性2justify-self和align-self属性align-self属性：沿着列轴线对齐网格项内的内容，此值适用于单个网格项内的内容。属性值为：start：将内容对齐到网格区域的顶部end：将内容对齐到网格区域的底部center：将内容对齐到网格区域的中间（垂直居中）stretch：填充整个网格区域的高度（这是默认值）CSS代码为：.itemalign-self:start|end|center|stretch;作业一、填空题1._和_是网格项开始的网格线，_和_是网格项结束的网格线。2.在子元素网格项的属性中，_属性沿着行轴线对齐网格项内的内容。3.在子元素网格项的属性中，_属性沿着列轴线对齐网格项内的内容。二、上机实训上机完成例10-4的实例操作。End