HTML5+CSS3網頁設計與制作編寫網頁柵格系統能敘述網頁柵格系統的布局原理，柵格系統的設計原則；能編寫固定寬度和彈性頁面柵格系統的CSS布局代碼；能將柵格系統和媒體查詢功能結合，制作出CSS布局文件，兼容任意寬度的網頁排版布局。能夠學習伸縮盒子（FlexibleBox）的相關知識，并能辨析其與傳統的響應式浮動布局的差異。能夠綜合運用各柵格技術編寫柵格系統使其后續能夠應用于D清單頁面進行彈性布局。任務目標

編寫網頁柵格系統本任務要求將媒體查詢功能和柵格化布局結合，制作一個適用于響應式頁面排版布局的通用型CSS文件，使得任何一個按要求設置并應用該CSS文件的頁面能夠實現響應式效果。編寫的文件接下來將應用于D清單的響應式布局。具體要求為：1、編寫一個通用型柵格系統代碼文件；2、文件能夠被復用于應用其的頁面進行柵格化布局。任務描述

編寫網頁柵格系統完成D清單頁面柵格系統的編寫，需要：學習柵格系統的布局原理和設計原則；學習固定寬度和任意寬度頁面的柵格系統區別及CSS布局代碼編寫。編寫適用于任意寬度的柵格系統文件，并進行測試。任務分析

編寫網頁柵格系統知識與技能準備網頁柵格系統是一種網頁排版布局方式，將網頁寬度平分為多個等份的網格，如6等份、12等份、24等份，頁面中每個模塊的寬度設置為1等份的整倍數。如下圖將頁面分為6等份的布局效果：1、認識網頁柵格系統圖1-20-1柵格系統示意圖知識與技能準備對于網頁設計來說，柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。對于前端開發來說，網頁將更加的靈活與規范，如上圖的6等份的網格，還可組合出2:2:2、3:3、4:2等布局方式。下面是不同等份的分割在網頁中的實際應用。1、認識網頁柵格系統圖1-20-26等份柵格網頁圖1-20-312等份柵格網頁知識與技能準備1、認識網頁柵格系統圖1-20-424等份柵格網頁知識與技能準備如下圖，假設將網頁寬度平均分為n份，每份網格寬度為w，則網頁總寬度為w×n。但考慮到每個網頁模塊之間因保留一定的間距i，如果一個模塊占用3份網格，其實際寬度為：w×3-i。而水平排列的最后一個模塊不應該保留間距i，所以網頁的實際總寬度應該為：總寬度Width=w×n-i2、網頁柵格系統的設計圖1-20-5網頁柵格寬度知識與技能準備根據上面的公式，假設網頁分為12等份，每份寬度80px，間距10px，則總寬度為950px。這是網頁柵格化中比較常用的劃分方式，12等份的網格可以使網頁平均放入2個模塊（6:6），或是3個模塊（4:4:4），或是4個模塊（3:3:3:3），或是6個模塊（2:2:2:2:2:2），使布局靈活多樣。如果需要更加細致的布局，也可以分為24等份，每份寬度40px，間距10px，總寬度為950px。但不一定要局限于這兩種劃分方式，也可自行嘗試其它的劃分，如10等份、16等份等。2、網頁柵格系統的設計知識與技能準備以網頁分12等份，每份寬度80px，間距10px，總寬度950px為例，設置網頁的CSS樣式。由于網頁中一個模塊占用的寬度可能為1份、2份、3份……12份，一共12種情況，需要將每種情況都使用一個CSS選擇符進行設置，以后直接為標簽添加對應份數的選擇符即可完成寬度的設置。其中不同份數與其寬度的關系如下：1份寬度=80×1-10=70px，附帶10px的右邊界；2份寬度=80×2-10=150px，附帶10px的右邊界；3份寬度=80×3-10=230px，附帶10px的右邊界；……11份寬度=80×11-10=870px，附帶10px的右邊界；12份寬度=80×12-10=950px，無右邊界；3、網頁柵格系統的實現知識與技能準備3、網頁柵格系統的實現CSS代碼：1234567891011121314151617[class*="grid"]{/*為.gridn統一添加樣式*/

float:left; margin:010px10px0;/*右邊界和下邊界*/}.grid1{width:70px;}.grid2{width:150px;}.grid3{width:230px;}.grid4{width:310px;}.grid5{width:390px;}.grid6{width:470px;}.grid7{width:550px;}.grid8{width:630px;}.grid9{width:710px;}.grid10{width:790px;}.grid11{width:870px;}.grid12{width:950px;margin-right:0;}/*不需要邊界*/.grid_last{margin-right:0;}/*消除一行最后一個的邊界*/知識與技能準備選擇符“.grid1”至“.grid12”設置了12種等份情況下所使用的寬度，“[class*="grid"]”選擇符為添加了“.gridn”的標簽再添加上10px的右邊界和其它相同的樣式設置。由于一行中最后一個模塊不需要添加右邊界，所以設置“.grid_last”選擇符用于消除右邊界，最后一個模塊的class因寫為“class="gridngrid_last"”。3、網頁柵格系統的實現知識與技能準備3、網頁柵格系統的實現HTML代碼：1234567891011121314151617<divclass="main"><!—網頁主體，寬950px--><!--第一行--><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2grid_last">2</div><!--第二行--><divclass="grid3">3</div><divclass="grid4">4</div><divclass="grid5grid_last">5</div><!--第三行--><divclass="grid4">4</div><divclass="grid8grid_last">8</div><divclass="clear"></div></div>顯示效果如下：圖1-20-6固定寬度網頁柵格測試效果知識與技能準備在上一內容的設置中，柵格系統只能適用于固定的網頁寬度，如果網頁總寬度變更，需要重新計算和設置每份網格的寬度。再或者要制作自動適應瀏覽器寬度的網頁，這種設置方法將不適用。此時可以使用百分比%為單位設置寬度，但間距如果為固定值時，將無法計算出不同寬度下每份網格的比例。現在需要對網格的設置進行一些調整，如下圖：4、網頁柵格系統的另一種設置（自動適應不同的頁面寬度）圖1-20-7自適應網頁柵格知識與技能準備使用百分比%設置網格的寬度，如果分為12等份，n份網格的寬度設置如下：1份寬度=1/12=8.33333%；2份寬度=2/12=16.66667%；3份寬度=3/12=25%；……11份寬度=11/12=91.66667%；12份寬度=12/12=100%；將標簽設置為“怪異盒子模型”，使用填充代替邊界產生各份的間距，這樣間距的寬度將不會對各份的實際寬度造成影響。填充設置為左填充和右填充，寬度為間距寬度的一半。網頁的總寬度等同于瀏覽器的寬度，或等同于柵格化標簽的父標簽寬度。由于網頁兩側會留有填充產生的間距，所以網頁內容可視的寬度為“網頁總寬度Width-i”。4、網頁柵格系統的另一種設置（自動適應不同的頁面寬度）知識與技能準備3、網頁柵格系統的實現CSS代碼：1234567891011121314151617[class*="grid_"]{/*為.gridn_統一添加樣式*/

box-sizing:border-box;/*怪異盒子模型*/padding:05px10px5px;/*間距為5+5=10*/

float:left;}.grid_s1{width:8.33333%;}.grid_s2{width:16.66667%;}.grid_s3{width:25%;}.grid_s4{width:31.213333%;}.grid_s5{width:41.66667%;}.grid_s6{width:50%;}.grid_s7{width:58.33333%;}.grid_s8{width:66.66667%;}.grid_s9{width:75%;}.grid_s10{width:81.213333333%;}.grid_s11{width:91.66667%;}.grid_s12{width:100%;}知識與技能準備3、網頁柵格系統的實現HTML代碼：12345678910111213141516<divclass="main"><!—網頁主體，寬任意--><!--第一行--><divclass="grid_s3">3</div><divclass="grid_s3">3</div><divclass="grid_s3">3</div><divclass="grid_s3">3</div><!--第二行--><divclass="grid_s5">5</div><divclass="grid_s7">7</div><!--第三行--><divclass="grid_s1">1</div><divclass="grid_s1">1</div><divclass="grid_s6">6</div><divclass="grid_s4">4</div><divclass="clear"></div></div>顯示效果如下：圖1-20-8自適應柵格實現效果圖任務實施設計一種響應式柵格布局，除了能夠實現柵格化布局功能外，還能結合媒體查詢功能，在不同的瀏覽器寬度下，自動調整布局結構，如網頁在手機設備中一行只顯示1個模塊的內容，在平板設備中自動調整為一行顯示3個模塊，電腦設備中一行顯示4個模塊。使用媒體查詢功能設置出3種瀏覽器寬度下所使用的設置：手機設備（寬度<=767）、平板設備（768<=寬度<=1023）、電腦設備（寬度>=1024）。都添加相同的柵格系統設置，但是選擇符的命名有所區別，分別是“.grid_sn”、“.grid_mn”、“.grid_Ln”。網頁中模塊標簽將同時添加這三種選擇符，如“class='grid_s12grid_m6grid_L3'”，由于不同寬度下只有一種選擇符會生效，所以標簽在不同寬度下將使用不同的布局比例。任務實施創建一個grid.css樣式：

grid.css：1234567891011121314151617181920212223[class*="grid_"]{/*柵格化標簽的通用設置*/

box-sizing:border-box; padding:05px10px5px; float:left; background-clip:content-box;/*填充部分不顯示背景，該句可不設置*/}/*手機設備附加的樣式，頁面寬度<=767*/@mediaalland(max-width:767px){ .grid_s1{width:8.33333%;} .grid_s2{width:16.66667%;} /*其余設置與上一內容設置的一樣，此處省略*/ .grid_s12{width:100%;}}/*平板設備附加的樣式，768<=頁面寬度<=1023*/@mediaalland(min-width:768px)and(max-width:1023px){ .grid_m1{width:8.33333%;} .grid_m2{width:16.66667%;} /*其余設置與上一內容設置的一樣，此處省略*/ .grid_m12{width:100%;}}/*電腦設備附加的樣式，頁面寬度>=1024*/@mediaalland(min-width:1024px){ .grid_L1{width:8.33333%;} .grid_L2{width:16.66667%;} /*其余設置與上一內容設置的一樣，此處省略*/ .grid_L12{width:100%;}}任務實施效果測試：

grid.css：123456789<divclass="main"><!—網頁主體，寬任意--> <divclass="grid_s6grid_m4grid_L3"></div> <divclass="grid_s6grid_m4grid_L3"></div> <divclass