（中職）Web前端設計基礎 項目十-1電子課件

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

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

3、1.html）。網(wǎng)格容器和網(wǎng)格項/*只要display的值為grid，這個元素就是網(wǎng)格容器*/.containerdisplay:grid;第1個網(wǎng)格項第2個網(wǎng)格項第3個網(wǎng)格項網(wǎng)格布局的重要術語2網(wǎng)格線構成網(wǎng)格結構的分界線。它們既可以是垂直的，也可以是水平的，并位于行或列的任一側，如圖所示黃線就是一條列網(wǎng)格線。網(wǎng)格布局的重要術語3網(wǎng)格軌道兩條相鄰網(wǎng)格線之間的空間?？梢园阉鼈兿胂蟪删W(wǎng)格的列或行。如圖所示的第二條和第三條行網(wǎng)格線之間的就是網(wǎng)格軌道。網(wǎng)格布局的重要術語4網(wǎng)格單元格兩個相鄰的行和兩個相鄰的列網(wǎng)格線之間的空間。這是網(wǎng)格系統(tǒng)的一個“單元格”。如圖所示，第1至第2條行網(wǎng)格線和第2至第3條列網(wǎng)

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

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

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

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

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

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

10、l）。.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;.ite

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

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

13、ows:80px auto 80px;grid-column-gap:10px;grid-row-gap:15px;效果如圖父元素網(wǎng)格容器屬性5justify-items和align-items屬性justify-items沿著行軸線對齊網(wǎng)格項內的內容，屬性值如表所示。justify-items屬性值start將內容對齊到網(wǎng)格區(qū)域(grid area)的左側end將內容對齊到網(wǎng)格區(qū)域的右側center將內容對齊到網(wǎng)格區(qū)域的中間（水平居中）stretch填滿網(wǎng)格區(qū)域寬度（默認值）父元素網(wǎng)格容器屬性5justify-items和align-items屬性justify-items屬性的CSS代碼格

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

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

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

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

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

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

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