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

资源描述

《工信版（中职）Web前端设计基础项目十电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础项目十电子课件.pptx（85页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、YCF（中职）Web前端设计基础项目十电子课件CSS 3创建网格布局项目十授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练一项目描述本项目学习要点网格项元素属性；创建双飞翼布局。网格布局的术语；网格容器的属性；如何创建网格布局；二知识准备CSS一直用来布局网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是hack而已，并且遗漏了很多重要的功能（例如垂直居中）。后来，Flexbo

2、x在很大程度上改善了布局方式，但它是为了解决更简单的一维布局，而不是复杂的二维布局。Grid布局是专门为了解决二维布局问题而创建的CSS模块，是有史以来最强大的CSS模块之一。二知识准备网格布局的重要术语；子元素网格项的属性。父元素网格容器属性；网格布局的重要术语1网格容器和网格项网格容器任何应用display属性值为grid的元素就是网格容器，是所有网格项（Grid Items）的父级元素。网格项网格容器（Grid Container）的子元素（例如直接子元素）。网格布局的重要术语1网格容器和网格项【例10-1】创建具有3个子元素的网格容器，代码如下所示（示例文件10-1.html）。网格

3、容器和网格项/*只要display的值为grid，这个元素就是网格容器*/.containerdisplay:grid;第1个网格项第2个网格项第3个网格项网格布局的重要术语2网格线构成网格结构的分界线。它们既可以是垂直的，也可以是水平的，并位于行或列的任一侧，如图所示黄线就是一条列网格线。网格布局的重要术语3网格轨道两条相邻网格线之间的空间。可以把它们想象成网格的列或行。如图所示的第二条和第三条行网格线之间的就是网格轨道。网格布局的重要术语4网格单元格两个相邻的行和两个相邻的列网格线之间的空间。这是网格系统的一个“单元格”。如图所示，第1至第2条行网格线和第2至第3条列网格线交汇构成的就是网

4、格单元格。网格布局的重要术语5网格区域四条网格线包围的总空间。一个网格区域可以由任意数量的网格单元格组成。如图所示，第1条到第3条行网格线和第1条到第3条列网格线之间的就是网格区域。父元素网格容器属性1display属性将元素定义为网格容器，并为其内容建立新的网格格式。display属性值如表所示。Display属性属性含义含义grid生成一个块级网格inline-grid生成一个内联网格subgrid表示网格容器本身是另一个网格的网格项（即嵌套网格）父元素网格容器属性1display属性需要注意：在网格容器(Grid Container)上使用column，float，clear，verti

5、cal-align不会产生任何效果。.containerdisplay:grid|inline-grid|subgrid;CSS代码格式如下：父元素网格容器属性2grid-template-columns和grid-template-rows属性使用空格分隔的值列表，用来定义网格的列和行。这些值表示网格轨道大小，它们之间的空格表示网格线。属性值为：（1）：可以是长度值、百分比或者等份网格容器中可用空间(fr单位）（2）：可以选择的任意名称.container grid-template-columns:.|.;grid-template-rows:.|.;CSS代码格式如下：父元素网格容器属性

6、【例10-2】创建一个3行5列的网格布局（示例文件10-2.html）。.containerdisplay:grid;height:300px;grid-template-columns:40px 50px auto 50px 40px;grid-template-rows:25%100px auto;grid-gap:10px;.container divbackground-color:green;父元素网格容器属性【例10-2】创建一个3行5列的网格布局（示例文件10-2.html）。123456789101112131415在chrome浏览器中预览父元素网格容器属性当在网格轨道(Gr

7、id Track)值之间留出空格时，网格线会自动分配数字名称，如图所示。父元素网格容器属性也可以明确的指定网格线(Grid Line)名称，即值，如图所示。父元素网格容器属性请注意网格线名称的括号语法，修改例10-2中的第7-13行。.containerdisplay:grid;height:300px;background-color:#000;grid-template-columns:first40pxline250pxline3autocol4-start50pxfive40pxend;grid-template-rows:row1-start25%row1-end100pxthird

8、-lineautolast-line;grid-gap:10px;.container divbackground-color:green;父元素网格容器属性fr单位是指用等分网格容器剩余可用空间来设置网格轨道的大小。例如，下面的代码会将每个网格项设置为网格容器宽度的三分之一。.containergrid-template-columns:1fr 1fr 1fr;剩余可用空间是除去所有非灵活网格项之后计算得到的。在上面的例子中，可用空间总量减去50px后，再给fr单元的值三等分：.containergrid-template-columns:1fr 50px 1fr 1fr;父元素网格容器属性

9、3grid-template-areas属性通过引用grid-area属性指定网格区域名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空的网格单元。这个语法本身可视作网格的可视化结构。grid-template-areas属性值如表所示。grid-template-areas属性值属性值含义含义由网格项的grid-area指定的网格区域名称.（点号）（点号）代表一个空的网格单元none不定义网格区域父元素网格容器属性3grid-template-areas属性【例10-3】创建一个4列3行的网格（示例文件10-3.html）。.containerdispla

10、y:grid;grid-template-columns:100px 100px 100px 100px;grid-template-rows:50px 200px 50px;grid-template-areas:header header header headermain main.sidebarfooter footer footer footer;.item1grid-area:header;background-color:blue;.item2grid-area:main;background-color:yellow;.item3grid-area:sidebar;backgr

11、ound-color:pink;.item4grid-area:footer;background-color:green;父元素网格容器属性3grid-template-areas属性【例10-3】创建一个4列3行的网格（示例文件10-3.html）。headermainsidebarfooter在chrome浏览器中预览父元素网格容器属性3grid-template-areas属性【例10-3】创建一个4列3行的网格（示例文件10-3.html）。整个顶行将由header区域组成。中间一排将由两个main区域，一个是空单元格，一个sidebar区域组成。最后一行全是footer区域组成。父

12、元素网格容器属性4grid-column-gap和grid-row-gap属性指定网格线(grid lines)的大小，可以想象为设置列和行之间间距的宽度。但只能在列和行之间创建间距，网格外部边缘不会有这个间距。属性值为：长度值。.containergrid-column-gap:;grid-row-gap:;CSS代码格式如下：父元素网格容器属性4grid-column-gap和grid-row-gap属性.containergrid-template-columns:100px 50px 100px;grid-template-rows:80px auto 80px;grid-column

13、-gap:10px;grid-row-gap:15px;效果如图效果如图父元素网格容器属性5justify-items和align-items属性justify-items沿着行轴线对齐网格项内的内容，属性值如表所示。justify-items属性属性值值start将内容对齐到网格区域(gridarea)的左侧end将内容对齐到网格区域的右侧center将内容对齐到网格区域的中间（水平居中）stretch填满网格区域宽度（默认值）父元素网格容器属性5justify-items和align-items属性justify-items属性的CSS代码格式：.containerjustify-item

14、s:start|end|center|stretch;父元素网格容器属性5justify-items和align-items属性align-items沿着列轴线对齐，属性值如表所示；这两个属性的值适用于容器内的所有网格项。align-items属性属性值值含义含义示例示例start将内容对齐到网格区域的顶部end将内容对齐到网格区域的底部center将内容对齐到网格区域的中间（垂直居中）stretch填满网格区域高度（默认值）父元素网格容器属性5justify-items和align-items属性align-items属性的CSS代码格式：.containeralign-items:star

15、t|end|center|stretch;父元素网格容器属性6justify-content和align-content属性justify-content属性使用情况当网格合计大小可能小于其网格容器的大小时，所有网格项都使用像素这样的非灵活单位设置大小的情况下，可以设置网格容器内的网格的对齐方式。此属性沿着行轴线对齐网格，属性值如表所示。justify-content属性值属性值含义含义示例示例start将网格对齐到网格容器的左边end将网格对齐到网格容器的右边center将网格对齐到网格容器的中间（水平居中）父元素网格容器属性6justify-content和align-content属性j

16、ustify-content属性值属性值含义含义示例示例stretch调整网格项的宽度，允许该网格填充满整个网格容器的宽度space-around在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间space-between在每个网格项之间放置一个均匀的空间，左右两端没有空间space-evenly在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间父元素网格容器属性6justify-content和align-content属性justify-content属性的CSS代码格式：.containerjustify-content:start|end|center|stret

17、ch|space-around|space-between|space-evenly;父元素网格容器属性6justify-content和align-content属性align-content属性使用情况：网格合计大小可能小于其网格容器的大小时，所有网格项都使用像素这样的非灵活单位设置大小的情况下，可以设置网格容器内的网格的对齐方式。此属性沿着列轴线对齐网格，属性值如表所示。align-content属性值属性值含义含义示例示例start将网格对齐到网格容器的顶部end将网格对齐到网格容器的底部center将网格对齐到网格容器的中间（垂直居中）父元素网格容器属性6justify-conten

18、t和align-content属性align-content属性值属性值含义含义示例示例stretch调整网格项的高度，允许该网格填充满整个网格容器的高度space-around在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间space-between在每个网格项之间放置一个均匀的空间，上下两端没有空间space-evenly在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间父元素网格容器属性6justify-content和align-content属性align-content属性的CSS代码格式：.containeralign-content:start|end|

19、center|stretch|space-around|space-between|space-evenly;父元素网格容器属性7grid-auto-columns和grid-auto-rows属性指定任何自动生成的网格轨道（又名隐式网格轨道）的大小。在明确定位的行或列（通过grid-template-rows或grid-template-columns）超出定义的网格范围时，隐式网格轨道被创建了。属性值为：可以是长度值，百分比，或者等份网格容器中可用空间（fr单位）.containergrid-auto-columns:.;grid-auto-rows:.;CSS代码格式如下：父元素网格容器

20、属性7grid-auto-columns和grid-auto-rows属性创建隐式网格轨道，请看以下的代码：.containerdisplay:grid;grid-template-columns:60px 60px;grid-template-rows:90px 90px;这样会生成了一个22的网格。父元素网格容器属性7grid-auto-columns和grid-auto-rows属性使用grid-column和grid-row来定位你的网格项，修改为：.item-agrid-column:1/2;grid-row:2/3;.item-bgrid-column:5/6;grid-row:2

21、/3;父元素网格容器属性7grid-auto-columns和grid-auto-rows属性效果分析如图所示：让item-b从第5条列网格线开始到第6条列网格线结束，但从来没有定义过第5或第6列网格线因为引用的网格线不存在，所以创建宽度为0的隐式网格轨道以填补空缺父元素网格容器属性7grid-auto-columns和grid-auto-rows属性可以使用grid-auto-columns和grid-auto-rows来指定这些隐式轨道的大小：.containergrid-auto-columns:60px;效果分析如图所示：父元素网格容器属性8grid-auto-flow属性如果有一些没

22、有明确放置在网格上的网格项，自动放置算法会自动放置这些网格项。该属性控制自动布局算法，属性值为：（1）row：告诉自动布局算法依次填充每行，根据需要添加新行。（2）column：告诉自动布局算法依次填入每列，根据需要添加新列。（3）dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺。.containergrid-auto-flow:row|column|rowdense|columndense;CSS代码为：子元素网格项的属性1grid-column-start、grid-column-end、grid-row-start和grid-row-end属性通过指定网格线

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

25、例如，如下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来控制它们的重叠顺序。子元素网格项的属性1

26、grid-column-start、grid-column-end、grid-row-start和grid-row-end属性【例10-4】网格项跨行、跨列和重叠实例（示例文件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-co

27、lor:#acf888;grid-column:1/4;.item2background-color:#fe0975;子元素网格项的属性1grid-column-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

28、/4;z-index:0;.item5background-color:#8dfecd;grid-column:1/3;.item6background-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属性：沿着

29、行轴线对齐网格项内的内容，此值适用于单个网格项内的内容。属性值为：start：将内容对齐到网格区域的左侧end：将内容对齐到网格区域的右侧center：将内容对齐到网格区域的中间（水平居中）stretch：填充整个网格区域的宽度（这是默认值）CSS代码为：.item-ajustify-self:start|end|center|stretch;子元素网格项的属性2justify-self和align-self属性align-self属性：沿着列轴线对齐网格项内的内容，此值适用于单个网格项内的内容。属性值为：start：将内容对齐到网格区域的顶部end：将内容对齐到网格区域的底部center：将

30、内容对齐到网格区域的中间（垂直居中）stretch：填充整个网格区域的高度（这是默认值）CSS代码为：.itemalign-self:start|end|center|stretch;三项目实施创建网格布局；创建双飞翼布局。创建网格布局结合前面学习的知识，用CSS修饰一个用于发送邮件的表单页面，如图所示。创建一个网格，先需要定义一个父级容器（wrapper），在这个容器中放置6个子元素（items）。使用HTML标记，在每个子元素(items)加上了单独的class名，如图所示。保存文件名为“10-5.html”。第一步创建网格布局为了能够清楚的区分不同的网格，给这6个网格添加不同的样式，如

31、图所示。第二步创建网格布局要把父容器（wrapper）变成一个网格(grid)，只要简单地把其display属性设置为grid即可，如图所示。第三步创建网格布局这样就会得到如图所示的浏览效果。设置网格的Columns(列)和rows(行)，定义网格样式，通过grid-template-columns和grid-template-rows属性来设置，如图所示。第四步创建网格布局可以看到，grid-template-columns属性有三个值，这样就会得到三列，值分别表示：第一列的宽度是150px，第二个是20px，第三个是150px。grid-template-rows属性有两个值，这样就会得到

32、两行。值分别表示：第一行的高度是100px，第二行是100px。在浏览器预览效果如图所示。为了更好的理解这些值与网格外观之间的关系，修改属性的参数值。将下列代码修改为2列3行，并且定义第一列宽度200像素、第二列宽度200像素（grid-template-columns:200px 200px;），第一行高度50像素、第二行高度100像素、第三行高度50像素（grid-template-rows:50px 100px 50px;），如图所示。第五步创建网格布局在浏览器预览修改后的代码，效果如图所示。继续改变网格的属性设置，让item1（子元素）独占一行，修改item1的css属性，如图所示。第

33、六步创建网格布局在浏览器预览修改后的代码，效果如图所示。上面grid-column-start和grid-column-end的值是指从哪个网格线开始到哪个网格线结束。设置了开始值为1，结束值为4，如图所示，其中的四条黑色竖线表示列网格线。第六步创建网格布局设置item1占据从第1条网格线开始，到第4条网格线结束，让它独立占据整行的设置方法就是第21、22行设置列的网格线从1开始（grid-column-start:1;）到4结束（grid-column-end:4;）。用更简单的缩写方法来写上面的语法代码，来实现上面的效果，如图所示。第六步创建网格布局为了更加牢固的理解了这个概念，重新排列其

34、他的items(子元素)，如图所示。第七步创建网格布局在浏览器中预览重新排列后网格布局的效果，如图所示。第七步创建网格布局用Sublime编辑器，新建一个文件，保存文件名为“10-6.html”。第一步创建双飞翼布局创建一个类名为“container”的网格容器，设置容器的display属性为grid，在父容器中创建三个类名称分别为“left”、“main”、“right”的子元素。如图所示设置区块样式。第二步第二步创建双飞翼布局.containerdisplay:grid;grid-template-columns:100px auto 200px;grid-template-rows:10

35、0px 200px 100px;grid-column-gap:10px;.headerbackground-color:deepskyblue;grid-column:1/4;.footerbackground-color:deepskyblue;grid-column:1/4;.leftbackground-color:lightgreen;.mainbackground-color:lightcoral;.rightbackground-color:lightpink;.container divfont-size:60px;text-align:center;设置父容器的display

36、属性为grid定义网格为3列，第一列宽度为100像素、第二列宽度为自动、第三列宽度为200像素定义网格为1行，行高为100像素定义了行和列之间的网格线宽度为10像素第二步创建双飞翼布局headerleftmainrightfooter在chrome浏览器中预览在父元素“container”下增加两个类名为“header”、“footer”的子元素，如图所示；设置网格行为三行：“header”块位于第一行，行高为100像素；“left”、“main”、“right”块位于第二行，行高为200像素；“footer”块位于第三行，行高为100像素，如图所示。第三步创建双飞翼布局文件另存为“10-7.

37、html”，设置“container”网格容器内的网格项沿行轴的对齐方式为center，设置“main”块的宽度为600像素，这样一个水平居中的布局就设置好了。第四步创建双飞翼布局.containerdisplay:grid;grid-template-columns:100px auto 200px;grid-template-rows:100px 200px 100px;grid-column-gap:10px;justify-content:center;.headerbackground-color:deepskyblue;grid-column:1/4;.footerbackgrou

38、nd-color:deepskyblue;grid-column:1/4;.leftbackground-color:lightgreen;.mainbackground-color:lightcoral;width:600px;.rightbackground-color:lightpink;.container divfont-size:60px;text-align:center;文件另存为“10-7.html”，设置“container”网格容器内的网格项沿行轴的对齐方式为center，设置“main”块的宽度为600像素，这样一个水平居中的布局就设置好了。第四步创建双飞翼布局在chr

39、ome浏览器中预览四项目拓展创建一个2行3列网格布局，网格容器类名为“wrapper”，六个网格子元素类名为“item（n）”，分别设置行高50像素、列宽100像素，网格项宽度5像素，设置元素样式，如图所示。第一步四项目拓展使用等分单位（fr）实现基本的响应式。等分单位允许将容器可用空间分成想要的多个等分空间，然后将每个列更改为一个等分单位宽度，设置grid-template-columns:1fr 1fr 1fr;实现列宽度自响应，如图所示。第二步四项目拓展如果设置grid-template-columns:1fr 2fr 1fr;那么第 2 列现在将是另外 2 列的 2 倍。总宽度现

40、在是 4 等分，第 2 列占据了 2 等分，而其他 2 列则各占 1 等分，如图所示。第二步四项目拓展更加高级的响应式上面的设置并不是最终想要的响应式，因为这个网格总是包含 3 列。我们希望网格根据容器的宽度来改变列的数量。repeat()函数：这是指定列和行更强大的方法。把原来的网格改成使用 repeat()函数形式来定义。第三步grid-template-columns:100px 100px 100px;grid-template-rows:50px 50px;修改为grid-template-columns:repeat(3,100px);grid-template-rows:rep

41、eat(2,50px);四项目拓展设置自适应（auto-fit）。跳过固定数量的列，而是用 auto-fit 取代 3，修改CSS代码为：第四步.wrapperdisplay:grid;grid-template-columns:repeat(auto-fit,100px);grid-template-rows:repeat(2,50px);grid-gap:5px;预览效果如图所示。四项目拓展改变浏览器的宽度，网格已经可以通过浏览器（即容器）的宽度来改变列的数量，尽可能多地将100像素宽的列排列在容器中。当浏览器的宽度介于n和n+1之间时（不是子元素块的整数倍时），浏览器的右侧会出现小于

42、105像素的空白区域。这就是说，将所有列都设为100像素，永远得不到自适应容器宽度的灵活性。为了解决这个问题，具体方法是minmax()函数，只需用minmax(100px,1fr)替换100像素即可。第四步四项目拓展修改CSS代码为：第四步.wrapperdisplay:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr);grid-template-rows:repeat(2,50px);grid-gap:5px;预览效果如图所示。四项目拓展添加图片，在每个网格项内添加一个img标签，如图所示。第五步为了使图像适合该网

43、格项，将图像设置为与网格项一样宽和高，然后使用object-fit:cover;将使图片覆盖整个容器，如果需要的话，浏览器会裁剪该图片，设置如图所示。四项目拓展实例代码如下.wrapperdisplay:grid;grid-template-columns:repeat(auto-fit,minmax(192px,1fr);grid-template-rows:repeat(2,120px);grid-gap:5px;.wrapper divcolor:#fff;font-size:50px;line-height:50px;text-align:center;margin:1px;img

44、width:100%;height:100%;object-fit:cover;四项目拓展实例代码如下在chrome浏览器中预览五项目小结通过项目实施和项目拓展学习了如何创建网格布局、双飞翼布局和响应式布局三个案例。学习了网格容器、网格项、网格线、网格轨道、网格区域等网格布局的重要术语和网格容器、网格项的属性等知识。五项目小结本项目知识点总结如表所示。属性属性属性值属性值说明说明background-color背景颜色background-imagenone|url(url)背景图片background-repeatrepeat|repeat-x|repeat-y|no-reapeat背

46、e|ridge|inset|outset边框样式五项目小结本项目知识点总结如表所示。知识点知识点内容内容重重要要术术语语网格容器任何应用display属性值为grid的元素就是网格容器网格项网格容器的直接子元素网格线构成网格结构的分界线。网格轨道两条相邻网格线之间的空间。网格区域四条网格线包围的总空间。网网格格容容器器属属性性display将元素定义为网格容器grid-template-columns用来定义网格的列，表示网格轨道大小。grid-template-rows用来定义网格的行，表示网格轨道大小。fr单位指用等分网格容器剩余可用空间来设置网格轨道的大小。grid-template-

47、areas指定网格区域名称来定义网格模板grid-column-gap指定列网格线的大小，列和列之间的宽度。grid-row-gap指定行网格线的大小，行和行之间的宽度。justify-items设置沿着行轴线对齐网格项内的内容。align-items设置沿着列轴线对齐网格项内的内容。justify-content设置网格容器内的网格沿着行轴线的对齐方式。align-content设置网格容器内的网格沿着列轴线的对齐方式。grid-auto-columns指定自动生成的隐式网格轨道列的大小。grid-auto-rows指定自动生成的隐式网格轨道行的大小。grid-auto-flow设置用自动放

48、置算法会自动放置这些网格项。网格项的属性网格项的属性grid-column-start和grid-row-start通过指定网格线来确定网格内网格项的位置，grid-column-start和grid-row-start是网格项目开始的网格线。grid-column-end和grid-row-end通过指定网格线来确定网格内网格项的位置，grid-column-end和grid-row-end是网格项结束的网格线。justify-self沿着行轴线对齐网格项内的内容align-self沿着列轴线对齐网格项内的内容六技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise10.html文件，修改网格容器定义行、列的属性，完成如图所示的练习，也可以举一反三，练习各种各样的布局。End

展开阅读全文

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

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