（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目十電子課件

1、YCF正版可修改PPT（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目十電子課件CSS 3創(chuàng)建網(wǎng)格布局項(xiàng)目十授課教師：姓名WEB前端設(shè)計(jì)基礎(chǔ)Contents1.項(xiàng)目描述2.知識(shí)準(zhǔn)備3.項(xiàng)目實(shí)施4.項(xiàng)目拓展5.項(xiàng)目小結(jié)6.技能訓(xùn)練一 項(xiàng)目描述本項(xiàng)目學(xué)習(xí)要點(diǎn)網(wǎng)格項(xiàng)元素屬性；創(chuàng)建雙飛翼布局。網(wǎng)格布局的術(shù)語(yǔ)；網(wǎng)格容器的屬性；如何創(chuàng)建網(wǎng)格布局；二 知識(shí)準(zhǔn)備CSS一直用來(lái)布局網(wǎng)頁(yè)，但一直以來(lái)都存在這樣或那樣的問(wèn)題。一開(kāi)始我們用表格（table），然后是浮動(dòng)（float），再是定位（postion）和內(nèi)嵌塊（inline-block），但是所有這些方法本質(zhì)上都是只是hack而已，并且遺漏了很多重要的功能（例如垂直居中）。后

2、來(lái)，F(xiàn)lexbox在很大程度上改善了布局方式，但它是為了解決更簡(jiǎn)單的一維布局，而不是復(fù)雜的二維布局。Grid布局是專(zhuān)門(mén)為了解決二維布局問(wèn)題而創(chuàng)建的CSS模塊，是有史以來(lái)最強(qiáng)大的CSS模塊之一。二 知識(shí)準(zhǔn)備網(wǎng)格布局的重要術(shù)語(yǔ)；子元素網(wǎng)格項(xiàng)的屬性。父元素網(wǎng)格容器屬性；網(wǎng)格布局的重要術(shù)語(yǔ)1網(wǎng)格容器和網(wǎng)格項(xiàng)網(wǎng)格容器任何應(yīng)用display屬性值為grid的元素就是網(wǎng)格容器，是所有網(wǎng)格項(xiàng)（Grid Items）的父級(jí)元素。網(wǎng)格項(xiàng)網(wǎng)格容器（Grid Container）的子元素（例如直接子元素）。網(wǎng)格布局的重要術(shù)語(yǔ)1網(wǎng)格容器和網(wǎng)格項(xiàng)【例10-1】創(chuàng)建具有3個(gè)子元素的網(wǎng)格容器，代碼如下所示（示例文件10-1.

3、html）。網(wǎng)格容器和網(wǎng)格項(xiàng)/*只要display的值為grid，這個(gè)元素就是網(wǎng)格容器*/.containerdisplay:grid;第1個(gè)網(wǎng)格項(xiàng)第2個(gè)網(wǎng)格項(xiàng)第3個(gè)網(wǎng)格項(xiàng)網(wǎng)格布局的重要術(shù)語(yǔ)2網(wǎng)格線構(gòu)成網(wǎng)格結(jié)構(gòu)的分界線。它們既可以是垂直的，也可以是水平的，并位于行或列的任一側(cè)，如圖所示黃線就是一條列網(wǎng)格線。網(wǎng)格布局的重要術(shù)語(yǔ)3網(wǎng)格軌道兩條相鄰網(wǎng)格線之間的空間。可以把它們想象成網(wǎng)格的列或行。如圖所示的第二條和第三條行網(wǎng)格線之間的就是網(wǎng)格軌道。網(wǎng)格布局的重要術(shù)語(yǔ)4網(wǎng)格單元格兩個(gè)相鄰的行和兩個(gè)相鄰的列網(wǎng)格線之間的空間。這是網(wǎng)格系統(tǒng)的一個(gè)“單元格”。如圖所示，第1至第2條行網(wǎng)格線和第2至第3條列網(wǎng)格線

4、交匯構(gòu)成的就是網(wǎng)格單元格。網(wǎng)格布局的重要術(shù)語(yǔ)5網(wǎng)格區(qū)域四條網(wǎng)格線包圍的總空間。一個(gè)網(wǎng)格區(qū)域可以由任意數(shù)量的網(wǎng)格單元格組成。如圖所示，第1條到第3條行網(wǎng)格線和第1條到第3條列網(wǎng)格線之間的就是網(wǎng)格區(qū)域。父元素網(wǎng)格容器屬性1display屬性將元素定義為網(wǎng)格容器，并為其內(nèi)容建立新的網(wǎng)格格式。display屬性值如表所示。Display屬性含義grid生成一個(gè)塊級(jí)網(wǎng)格inline-grid生成一個(gè)內(nèi)聯(lián)網(wǎng)格subgrid表示網(wǎng)格容器本身是另一個(gè)網(wǎng)格的網(wǎng)格項(xiàng)（即嵌套網(wǎng)格）父元素網(wǎng)格容器屬性1display屬性需要注意：在網(wǎng)格容器(Grid Container)上使用column，float，clear，v

5、ertical-align不會(huì)產(chǎn)生任何效果。.containerdisplay:grid|inline-grid|subgrid;CSS代碼格式如下：父元素網(wǎng)格容器屬性2grid-template-columns和grid-template-rows屬性使用空格分隔的值列表，用來(lái)定義網(wǎng)格的列和行。這些值表示網(wǎng)格軌道大小，它們之間的空格表示網(wǎng)格線。屬性值為：（1） ：可以是長(zhǎng)度值、百分比或者等份網(wǎng)格容器中可用空間( fr單位）（2） ：可以選擇的任意名稱.container grid-template-columns: . | .; grid-template-rows: . | .;CSS代碼

6、格式如下：父元素網(wǎng)格容器屬性【例10-2】創(chuàng)建一個(gè)3行5列的網(wǎng)格布局（示例文件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;父元素網(wǎng)格容器屬性【例10-2】創(chuàng)建一個(gè)3行5列的網(wǎng)格布局（示例文件10-2.html）。123456789101112131415在chrome瀏覽器中

7、預(yù)覽父元素網(wǎng)格容器屬性當(dāng)在網(wǎng)格軌道(Grid Track)值之間留出空格時(shí)，網(wǎng)格線會(huì)自動(dòng)分配數(shù)字名稱，如圖所示。父元素網(wǎng)格容器屬性也可以明確的指定網(wǎng)格線(Grid Line)名稱，即值，如圖所示。父元素網(wǎng)格容器屬性請(qǐng)注意網(wǎng)格線名稱的括號(hào)語(yǔ)法，修改例10-2中的第7-13行。.containerdisplay:grid;height: 300px;background-color: #000;grid-template-columns: first40pxline250pxline3autocol4-start50pxfive40pxend;grid-template-rows: row1-st

8、art25%row1-end100pxthird-lineautolast-line;grid-gap: 10px;.container divbackground-color: green;父元素網(wǎng)格容器屬性fr單位是指用等分網(wǎng)格容器剩余可用空間來(lái)設(shè)置網(wǎng)格軌道的大小。例如，下面的代碼會(huì)將每個(gè)網(wǎng)格項(xiàng)設(shè)置為網(wǎng)格容器寬度的三分之一。.containergrid-template-columns:1fr 1fr 1fr;剩余可用空間是除去所有非靈活網(wǎng)格項(xiàng)之后計(jì)算得到的。在上面的例子中，可用空間總量減去50px后，再給fr單元的值三等分：.containergrid-template-columns:

9、1fr 50px 1fr 1fr;父元素網(wǎng)格容器屬性3grid-template-areas屬性通過(guò)引用grid-area屬性指定網(wǎng)格區(qū)域名稱來(lái)定義網(wǎng)格模板。重復(fù)網(wǎng)格區(qū)域的名稱導(dǎo)致內(nèi)容跨越這些單元格。一個(gè)點(diǎn)號(hào)（.）代表一個(gè)空的網(wǎng)格單元。這個(gè)語(yǔ)法本身可視作網(wǎng)格的可視化結(jié)構(gòu)。grid-template-areas屬性值如表所示。grid-template-areas屬性值含義由網(wǎng)格項(xiàng)的grid-area指定的網(wǎng)格區(qū)域名稱.（點(diǎn)號(hào)）代表一個(gè)空的網(wǎng)格單元none不定義網(wǎng)格區(qū)域父元素網(wǎng)格容器屬性3grid-template-areas屬性【例10-3】創(chuàng)建一個(gè)4列3行的網(wǎng)格（示例文件10-3.html）

10、。.containerdisplay: 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;.item3

11、grid-area: sidebar;background-color: pink;.item4grid-area: footer;background-color: green;父元素網(wǎng)格容器屬性3grid-template-areas屬性【例10-3】創(chuàng)建一個(gè)4列3行的網(wǎng)格（示例文件10-3.html）。headermainsidebarfooter在chrome瀏覽器中預(yù)覽父元素網(wǎng)格容器屬性3grid-template-areas屬性【例10-3】創(chuàng)建一個(gè)4列3行的網(wǎng)格（示例文件10-3.html）。整個(gè)頂行將由header區(qū)域組成。中間一排將由兩個(gè)main區(qū)域，一個(gè)是空單元格，一個(gè)si

12、debar區(qū)域組成。最后一行全是footer區(qū)域組成。父元素網(wǎng)格容器屬性4grid-column-gap和grid-row-gap屬性指定網(wǎng)格線(grid lines)的大小，可以想象為設(shè)置列和行之間間距的寬度。但只能在列和行之間創(chuàng)建間距，網(wǎng)格外部邊緣不會(huì)有這個(gè)間距。屬性值為：長(zhǎng)度值。.containergrid-column-gap:;grid-row-gap:;CSS代碼格式如下：父元素網(wǎng)格容器屬性4grid-column-gap和grid-row-gap屬性.containergrid-template-columns:100px 50px 100px;grid-template-row

13、s:80px auto 80px;grid-column-gap:10px;grid-row-gap:15px;效果如圖父元素網(wǎng)格容器屬性5justify-items和align-items屬性justify-items沿著行軸線對(duì)齊網(wǎng)格項(xiàng)內(nèi)的內(nèi)容，屬性值如表所示。justify-items屬性值start將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域(grid area)的左側(cè)end將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的右側(cè)center將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（水平居中）stretch填滿網(wǎng)格區(qū)域?qū)挾龋J(rèn)值）父元素網(wǎng)格容器屬性5justify-items和align-items屬性justify-items屬性的CSS代碼格式：

14、.containerjustify-items:start|end|center|stretch;父元素網(wǎng)格容器屬性5justify-items和align-items屬性align-items沿著列軸線對(duì)齊，屬性值如表所示；這兩個(gè)屬性的值適用于容器內(nèi)的所有網(wǎng)格項(xiàng)。align-items屬性值含義示例start將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的頂部end將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的底部center將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（垂直居中）stretch填滿網(wǎng)格區(qū)域高度（默認(rèn)值）父元素網(wǎng)格容器屬性5justify-items和align-items屬性align-items屬性的CSS代碼格式：.containera

15、lign-items:start|end|center|stretch;父元素網(wǎng)格容器屬性6justify-content和align-content屬性justify-content屬性使用情況當(dāng)網(wǎng)格合計(jì)大小可能小于其網(wǎng)格容器的大小時(shí)，所有網(wǎng)格項(xiàng)都使用像素這樣的非靈活單位設(shè)置大小的情況下，可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式。此屬性沿著行軸線對(duì)齊網(wǎng)格，屬性值如表所示。justify-content屬性值含義示例start將網(wǎng)格對(duì)齊到網(wǎng)格容器的左邊end將網(wǎng)格對(duì)齊到網(wǎng)格容器的右邊center將網(wǎng)格對(duì)齊到網(wǎng)格容器的中間（水平居中）父元素網(wǎng)格容器屬性6justify-content和align-co

16、ntent屬性justify-content屬性值含義示例stretch調(diào)整網(wǎng)格項(xiàng)的寬度，允許該網(wǎng)格填充滿整個(gè)網(wǎng)格容器的寬度space-around在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，左右兩端放置一半的空間space-between在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，左右兩端沒(méi)有空間space-evenly在每個(gè)柵格項(xiàng)目之間放置一個(gè)均勻的空間，左右兩端放置一個(gè)均勻的空間父元素網(wǎng)格容器屬性6justify-content和align-content屬性justify-content屬性的CSS代碼格式：.containerjustify-content:start|end|center|stre

17、tch|space-around|space-between|space-evenly;父元素網(wǎng)格容器屬性6justify-content和align-content屬性align-content屬性使用情況：網(wǎng)格合計(jì)大小可能小于其網(wǎng)格容器的大小時(shí)，所有網(wǎng)格項(xiàng)都使用像素這樣的非靈活單位設(shè)置大小的情況下，可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式。此屬性沿著列軸線對(duì)齊網(wǎng)格，屬性值如表所示。align-content屬性值含義示例start將網(wǎng)格對(duì)齊到網(wǎng)格容器的頂部end將網(wǎng)格對(duì)齊到網(wǎng)格容器的底部center將網(wǎng)格對(duì)齊到網(wǎng)格容器的中間（垂直居中）父元素網(wǎng)格容器屬性6justify-content和alig

18、n-content屬性align-content屬性值含義示例stretch調(diào)整網(wǎng)格項(xiàng)的高度，允許該網(wǎng)格填充滿整個(gè)網(wǎng)格容器的高度space-around在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，上下兩端放置一半的空間space-between在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，上下兩端沒(méi)有空間space-evenly在每個(gè)柵格項(xiàng)目之間放置一個(gè)均勻的空間，上下兩端放置一個(gè)均勻的空間父元素網(wǎng)格容器屬性6justify-content和align-content屬性align-content屬性的CSS代碼格式：.containeralign-content:start|end|center|stretc

19、h|space-around|space-between|space-evenly;父元素網(wǎng)格容器屬性7grid-auto-columns和grid-auto-rows屬性指定任何自動(dòng)生成的網(wǎng)格軌道（又名隱式網(wǎng)格軌道）的大小。在明確定位的行或列（通過(guò)grid-template-rows或grid-template-columns）超出定義的網(wǎng)格范圍時(shí)，隱式網(wǎng)格軌道被創(chuàng)建了。屬性值為：可以是長(zhǎng)度值，百分比，或者等份網(wǎng)格容器中可用空間（fr單位）.containergrid-auto-columns:.;grid-auto-rows:.;CSS代碼格式如下：父元素網(wǎng)格容器屬性7grid-auto-

20、columns和grid-auto-rows屬性創(chuàng)建隱式網(wǎng)格軌道，請(qǐng)看以下的代碼：.containerdisplay:grid;grid-template-columns:60px 60px;grid-template-rows:90px 90px;這樣會(huì)生成了一個(gè)22的網(wǎng)格。父元素網(wǎng)格容器屬性7grid-auto-columns和grid-auto-rows屬性使用grid-column和grid-row來(lái)定位你的網(wǎng)格項(xiàng)，修改為：.item-agrid-column:1/2;grid-row:2/3;.item-bgrid-column:5/6;grid-row:2/3;父元素網(wǎng)格容器屬性7

21、grid-auto-columns和grid-auto-rows屬性效果分析如圖所示：讓item-b從第5條列網(wǎng)格線開(kāi)始到第6條列網(wǎng)格線結(jié)束，但從來(lái)沒(méi)有定義過(guò)第5或第6列網(wǎng)格線因?yàn)橐玫木W(wǎng)格線不存在，所以創(chuàng)建寬度為0的隱式網(wǎng)格軌道以填補(bǔ)空缺父元素網(wǎng)格容器屬性7grid-auto-columns和grid-auto-rows屬性可以使用grid-auto-columns和grid-auto-rows來(lái)指定這些隱式軌道的大?。?containergrid-auto-columns:60px;效果分析如圖所示：父元素網(wǎng)格容器屬性8grid-auto-flow屬性如果有一些沒(méi)有明確放置在網(wǎng)格上的網(wǎng)格項(xiàng)

22、，自動(dòng)放置算法會(huì)自動(dòng)放置這些網(wǎng)格項(xiàng)。該屬性控制自動(dòng)布局算法，屬性值為：（1）row：告訴自動(dòng)布局算法依次填充每行，根據(jù)需要添加新行。（2）column：告訴自動(dòng)布局算法依次填入每列，根據(jù)需要添加新列。（3）dense：告訴自動(dòng)布局算法在稍后出現(xiàn)較小的網(wǎng)格項(xiàng)時(shí)，嘗試填充網(wǎng)格中較早的空缺。.containergrid-auto-flow:row|column|rowdense|columndense;CSS代碼為：子元素網(wǎng)格項(xiàng)的屬性1grid-column-start、grid-column-end、grid-row-start和grid-row-end屬性通過(guò)指定網(wǎng)格線來(lái)確定網(wǎng)格內(nèi)網(wǎng)格項(xiàng)的位置。

23、grid-column-start和grid-row-start是網(wǎng)格項(xiàng)開(kāi)始的網(wǎng)格線，grid-column-end和grid-row-end是網(wǎng)格項(xiàng)結(jié)束的網(wǎng)格線。屬性值為：（1）：可以是一個(gè)數(shù)字引用一個(gè)編號(hào)的網(wǎng)格線，或一個(gè)名字來(lái)引用一個(gè)命名的網(wǎng)格線。（2）span：該網(wǎng)格項(xiàng)將跨越所提供的網(wǎng)格軌道數(shù)量。（3）span：該網(wǎng)格項(xiàng)將跨越到所提供的名稱位置。（4）auto：表示自動(dòng)放置，自動(dòng)跨度，默認(rèn)會(huì)擴(kuò)展一個(gè)網(wǎng)格軌道的寬度或者高度。子元素網(wǎng)格項(xiàng)的屬性1grid-column-start、grid-column-end、grid-row-start和grid-row-end屬性.itemgrid-c

24、olumn-start:|span|span|auto;grid-column-end:|span|span|auto;grid-row-start:|span|span|auto;grid-row-end:|span|span|auto;CSS代碼為：子元素網(wǎng)格項(xiàng)的屬性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代碼：效果

25、分析如圖所示：子元素網(wǎng)格項(xiàng)的屬性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代碼：效果分析如圖所示：如果沒(méi)有聲明指定grid-column-end和grid-row-end，默認(rèn)情況下，該網(wǎng)格項(xiàng)將占據(jù)1個(gè)軌道。項(xiàng)目可以相互重疊。您可以使用z-index來(lái)控制它們的重疊順序。子元素網(wǎng)格項(xiàng)的屬性1grid-column-s

26、tart、grid-column-end、grid-row-start和grid-row-end屬性【例10-4】網(wǎng)格項(xiàng)跨行、跨列和重疊實(shí)例（示例文件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:

27、#acf888;grid-column: 1/4;.item2background-color: #fe0975;子元素網(wǎng)格項(xiàng)的屬性1grid-column-start、grid-column-end、grid-row-start和grid-row-end屬性【例10-4】網(wǎng)格項(xiàng)跨行、跨列和重疊實(shí)例（示例文件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-r

28、ow: 3/4;z-index:0;.item5background-color: #8dfecd;grid-column: 1/3;.item6background-color: #fd9a5c;grid-row: 2/5;grid-column: 3/4;子元素網(wǎng)格項(xiàng)的屬性1grid-column-start、grid-column-end、grid-row-start和grid-row-end屬性【例10-4】網(wǎng)格項(xiàng)跨行、跨列和重疊實(shí)例（示例文件10-4.html）。123456在chrome瀏覽器中預(yù)覽子元素網(wǎng)格項(xiàng)的屬性2justify-self和align-self屬性justify

29、-self屬性：沿著行軸線對(duì)齊網(wǎng)格項(xiàng)內(nèi)的內(nèi)容，此值適用于單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容。屬性值為：start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的左側(cè)end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的右側(cè)center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（水平居中）stretch：填充整個(gè)網(wǎng)格區(qū)域的寬度（這是默認(rèn)值）CSS代碼為：.item-ajustify-self: start|end|center|stretch;子元素網(wǎng)格項(xiàng)的屬性2justify-self和align-self屬性align-self屬性：沿著列軸線對(duì)齊網(wǎng)格項(xiàng)內(nèi)的內(nèi)容，此值適用于單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容。屬性值為：start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的頂部end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域

30、的底部center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（垂直居中）stretch：填充整個(gè)網(wǎng)格區(qū)域的高度（這是默認(rèn)值）CSS代碼為：.itemalign-self:start|end|center|stretch;三 項(xiàng)目實(shí)施創(chuàng)建網(wǎng)格布局；創(chuàng)建雙飛翼布局。創(chuàng)建網(wǎng)格布局結(jié)合前面學(xué)習(xí)的知識(shí)，用CSS修飾一個(gè)用于發(fā)送郵件的表單頁(yè)面，如圖所示。創(chuàng)建一個(gè)網(wǎng)格，先需要定義一個(gè)父級(jí)容器（wrapper），在這個(gè)容器中放置6個(gè)子元素（items）。使用HTML標(biāo)記，在每個(gè)子元素(items)加上了單獨(dú)的class名，如圖所示。保存文件名為“10-5.html”。第一步創(chuàng)建網(wǎng)格布局為了能夠清楚的區(qū)分不同的網(wǎng)格，給這6個(gè)

31、網(wǎng)格添加不同的樣式，如圖所示。第二步創(chuàng)建網(wǎng)格布局要把父容器（wrapper）變成一個(gè)網(wǎng)格(grid)，只要簡(jiǎn)單地把其display屬性設(shè)置為grid即可，如圖所示。第三步創(chuàng)建網(wǎng)格布局這樣就會(huì)得到如圖所示的瀏覽效果。設(shè)置網(wǎng)格的Columns(列)和rows(行)，定義網(wǎng)格樣式，通過(guò)grid-template-columns和grid-template-rows屬性來(lái)設(shè)置，如圖所示。第四步創(chuàng)建網(wǎng)格布局可以看到，grid-template-columns屬性有三個(gè)值，這樣就會(huì)得到三列，值分別表示：第一列的寬度是150px，第二個(gè)是20px，第三個(gè)是150px。grid-template-rows屬性

32、有兩個(gè)值，這樣就會(huì)得到兩行。值分別表示：第一行的高度是100px，第二行是100px。在瀏覽器預(yù)覽效果如圖所示。為了更好的理解這些值與網(wǎng)格外觀之間的關(guān)系，修改屬性的參數(shù)值。將下列代碼修改為2列3行，并且定義第一列寬度200像素、第二列寬度200像素（grid-template-columns:200px 200px;），第一行高度50像素、第二行高度100像素、第三行高度50像素（grid-template-rows:50px 100px 50px;），如圖所示。第五步創(chuàng)建網(wǎng)格布局在瀏覽器預(yù)覽修改后的代碼，效果如圖所示。繼續(xù)改變網(wǎng)格的屬性設(shè)置，讓item1（子元素）獨(dú)占一行，修改item1的c

33、ss屬性，如圖所示。第六步創(chuàng)建網(wǎng)格布局在瀏覽器預(yù)覽修改后的代碼，效果如圖所示。上面grid-column-start和grid-column-end的值是指從哪個(gè)網(wǎng)格線開(kāi)始到哪個(gè)網(wǎng)格線結(jié)束。設(shè)置了開(kāi)始值為1，結(jié)束值為4，如圖所示，其中的四條黑色豎線表示列網(wǎng)格線。第六步創(chuàng)建網(wǎng)格布局設(shè)置item1占據(jù)從第1條網(wǎng)格線開(kāi)始，到第4條網(wǎng)格線結(jié)束，讓它獨(dú)立占據(jù)整行的設(shè)置方法就是第21、22行設(shè)置列的網(wǎng)格線從1開(kāi)始（grid-column-start:1;）到4結(jié)束（grid-column-end:4;）。用更簡(jiǎn)單的縮寫(xiě)方法來(lái)寫(xiě)上面的語(yǔ)法代碼，來(lái)實(shí)現(xiàn)上面的效果，如圖所示。第六步創(chuàng)建網(wǎng)格布局為了更加牢固的理解

34、了這個(gè)概念，重新排列其他的items(子元素)，如圖所示。第七步創(chuàng)建網(wǎng)格布局在瀏覽器中預(yù)覽重新排列后網(wǎng)格布局的效果，如圖所示。第七步創(chuàng)建網(wǎng)格布局用Sublime編輯器，新建一個(gè)文件，保存文件名為“10-6.html”。第一步創(chuàng)建雙飛翼布局創(chuàng)建一個(gè)類(lèi)名為“container”的網(wǎng)格容器，設(shè)置容器的display屬性為grid，在父容器中創(chuàng)建三個(gè)類(lèi)名稱分別為“l(fā)eft”、“main”、“right”的子元素。如圖所示設(shè)置區(qū)塊樣式。第二步第二步創(chuàng)建雙飛翼布局.containerdisplay: grid;grid-template-columns: 100px auto 200px;grid-tem

35、plate-rows:100px 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-alig

36、n: center;設(shè)置父容器的display屬性為grid定義網(wǎng)格為3列，第一列寬度為100像素、第二列寬度為自動(dòng)、第三列寬度為200像素定義網(wǎng)格為1行，行高為100像素定義了行和列之間的網(wǎng)格線寬度為10像素第二步創(chuàng)建雙飛翼布局headerleftmainrightfooter在chrome瀏覽器中預(yù)覽在父元素“container”下增加兩個(gè)類(lèi)名為“header”、“footer”的子元素，如圖所示；設(shè)置網(wǎng)格行為三行：“header”塊位于第一行，行高為100像素；“l(fā)eft”、“main”、“right” 塊位于第二行，行高為200像素；“footer” 塊位于第三行，行高為100像素，如

37、圖所示。第三步創(chuàng)建雙飛翼布局文件另存為“10-7.html”，設(shè)置“container”網(wǎng)格容器內(nèi)的網(wǎng)格項(xiàng)沿行軸的對(duì)齊方式為center，設(shè)置“main”塊的寬度為600像素，這樣一個(gè)水平居中的布局就設(shè)置好了。 第四步創(chuàng)建雙飛翼布局.containerdisplay: grid;grid-template-columns: 100px auto 200px;grid-template-rows:100px 200px 100px;grid-column-gap: 10px;justify-content: center;.headerbackground-color: deepskyblue;

38、grid-column: 1/4;.footerbackground-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”，設(shè)置“container”網(wǎng)格容器內(nèi)的網(wǎng)格項(xiàng)沿行軸的對(duì)齊方式為center，設(shè)置“main”塊的

39、寬度為600像素，這樣一個(gè)水平居中的布局就設(shè)置好了。 第四步創(chuàng)建雙飛翼布局在chrome瀏覽器中預(yù)覽四 項(xiàng)目拓展創(chuàng)建一個(gè)2行3列網(wǎng)格布局，網(wǎng)格容器類(lèi)名為“wrapper”，六個(gè)網(wǎng)格子元素類(lèi)名為“item（n）”，分別設(shè)置行高50像素、列寬100像素，網(wǎng)格項(xiàng)寬度5像素，設(shè)置元素樣式，如圖所示。第一步四 項(xiàng)目拓展使用等分單位（fr）實(shí)現(xiàn)基本的響應(yīng)式。等分單位允許將容器可用空間分成想要的多個(gè)等分空間，然后將每個(gè)列更改為一個(gè)等分單位寬度，設(shè)置grid-template-columns: 1fr 1fr 1fr;實(shí)現(xiàn)列寬度自響應(yīng)，如圖所示。第二步四 項(xiàng)目拓展如果設(shè)置grid-template-colum

40、ns: 1fr 2fr 1fr; 那么第 2 列現(xiàn)在將是另外 2 列的 2 倍。總寬度現(xiàn)在是 4 等分，第 2 列占據(jù)了 2 等分，而其他 2 列則各占 1 等分，如圖所示。第二步四 項(xiàng)目拓展更加高級(jí)的響應(yīng)式上面的設(shè)置并不是最終想要的響應(yīng)式，因?yàn)檫@個(gè)網(wǎng)格總是包含 3 列。我們希望網(wǎng)格根據(jù)容器的寬度來(lái)改變列的數(shù)量。repeat( ) 函數(shù)： 這是指定列和行更強(qiáng)大的方法。把原來(lái)的網(wǎng)格改成使用 repeat( )函數(shù)形式來(lái)定義。第三步grid-template-columns: 100px 100px 100px;grid-template-rows: 50px 50px;修改為grid-templ

41、ate-columns: repeat(3,100px);grid-template-rows: repeat(2,50px);四 項(xiàng)目拓展設(shè)置自適應(yīng)（auto-fit）。跳過(guò)固定數(shù)量的列，而是用 auto-fit 取代 3 ，修改CSS代碼為：第四步.wrapperdisplay: grid;grid-template-columns: repeat(auto-fit,100px);grid-template-rows: repeat(2,50px); grid-gap: 5px;預(yù)覽效果如圖所示。四 項(xiàng)目拓展改變?yōu)g覽器的寬度，網(wǎng)格已經(jīng)可以通過(guò)瀏覽器（即容器）的寬度來(lái)改變列的數(shù)量，盡可能多地

42、將100像素寬的列排列在容器中。當(dāng)瀏覽器的寬度介于n和n+1之間時(shí)（不是子元素塊的整數(shù)倍時(shí)），瀏覽器的右側(cè)會(huì)出現(xiàn)小于105像素的空白區(qū)域。這就是說(shuō)，將所有列都設(shè)為100像素，永遠(yuǎn)得不到自適應(yīng)容器寬度的靈活性。為了解決這個(gè)問(wèn)題，具體方法是minmax( )函數(shù)，只需用minmax(100px, 1fr) 替換100像素即可。第四步四 項(xiàng)目拓展修改CSS代碼為：第四步.wrapperdisplay: grid;grid-template-columns: repeat(auto-fit,minmax(100px,1fr);grid-template-rows: repeat(2,50px); gr

43、id-gap: 5px; 預(yù)覽效果如圖所示。四 項(xiàng)目拓展添加圖片，在每個(gè)網(wǎng)格項(xiàng)內(nèi)添加一個(gè)img標(biāo)簽，如圖所示。第五步為了使圖像適合該網(wǎng)格項(xiàng)，將圖像設(shè)置為與網(wǎng)格項(xiàng)一樣寬和高，然后使用object-fit: cover;將使圖片覆蓋整個(gè)容器，如果需要的話，瀏覽器會(huì)裁剪該圖片，設(shè)置如圖所示。四 項(xiàng)目拓展實(shí)例代碼如下.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 width: 100%;height: 100%;object-fit: cover;四 項(xiàng)目拓展實(shí)例代碼如下在chrome瀏覽器中預(yù)覽五 項(xiàng)目小結(jié)通過(guò)項(xiàng)目實(shí)施和項(xiàng)目拓展學(xué)習(xí)了如何創(chuàng)建網(wǎng)格布局、雙飛翼布局和響應(yīng)式布局三個(gè)案例。學(xué)習(xí)了網(wǎng)格容器、網(wǎng)格項(xiàng)、網(wǎng)格線、網(wǎng)格軌道、網(wǎng)格區(qū)域等網(wǎng)格布局