HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：編寫網(wǎng)頁柵格系統(tǒng)

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

編寫網(wǎng)頁柵格系統(tǒng)本任務(wù)要求將媒體查詢功能和柵格化布局結(jié)合，制作一個適用于響應(yīng)式頁面排版布局的通用型CSS文件，使得任何一個按要求設(shè)置并應(yīng)用該CSS文件的頁面能夠?qū)崿F(xiàn)響應(yīng)式效果。編寫的文件接下來將應(yīng)用于D清單的響應(yīng)式布局。具體要求為：1、編寫一個通用型柵格系統(tǒng)代碼文件；2、文件能夠被復用于應(yīng)用其的頁面進行柵格化布局。任務(wù)描述

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

編寫網(wǎng)頁柵格系統(tǒng)知識與技能準備網(wǎng)頁柵格系統(tǒng)是一種網(wǎng)頁排版布局方式，將網(wǎng)頁寬度平分為多個等份的網(wǎng)格，如6等份、12等份、24等份，頁面中每個模塊的寬度設(shè)置為1等份的整倍數(shù)。如下圖將頁面分為6等份的布局效果：1、認識網(wǎng)頁柵格系統(tǒng)圖1-20-1柵格系統(tǒng)示意圖知識與技能準備對于網(wǎng)頁設(shè)計來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。對于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范，如上圖的6等份的網(wǎng)格，還可組合出2:2:2、3:3、4:2等布局方式。下面是不同等份的分割在網(wǎng)頁中的實際應(yīng)用。1、認識網(wǎng)頁柵格系統(tǒng)圖1-20-26等份柵格網(wǎng)頁圖1-20-312等份柵格網(wǎng)頁知識與技能準備1、認識網(wǎng)頁柵格系統(tǒng)圖1-20-424等份柵格網(wǎng)頁知識與技能準備如下圖，假設(shè)將網(wǎng)頁寬度平均分為n份，每份網(wǎng)格寬度為w，則網(wǎng)頁總寬度為w×n。但考慮到每個網(wǎng)頁模塊之間因保留一定的間距i，如果一個模塊占用3份網(wǎng)格，其實際寬度為：w×3-i。而水平排列的最后一個模塊不應(yīng)該保留間距i，所以網(wǎng)頁的實際總寬度應(yīng)該為：總寬度Width=w×n-i2、網(wǎng)頁柵格系統(tǒng)的設(shè)計圖1-20-5網(wǎng)頁柵格寬度知識與技能準備根據(jù)上面的公式，假設(shè)網(wǎng)頁分為12等份，每份寬度80px，間距10px，則總寬度為950px。這是網(wǎng)頁柵格化中比較常用的劃分方式，12等份的網(wǎng)格可以使網(wǎng)頁平均放入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、網(wǎng)頁柵格系統(tǒng)的設(shè)計知識與技能準備以網(wǎng)頁分12等份，每份寬度80px，間距10px，總寬度950px為例，設(shè)置網(wǎng)頁的CSS樣式。由于網(wǎng)頁中一個模塊占用的寬度可能為1份、2份、3份……12份，一共12種情況，需要將每種情況都使用一個CSS選擇符進行設(shè)置，以后直接為標簽添加對應(yīng)份數(shù)的選擇符即可完成寬度的設(shè)置。其中不同份數(shù)與其寬度的關(guān)系如下：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、網(wǎng)頁柵格系統(tǒng)的實現(xiàn)知識與技能準備3、網(wǎng)頁柵格系統(tǒng)的實現(xiàn)CSS代碼：1234567891011121314151617[class*="grid"]{/*為.gridn統(tǒng)一添加樣式*/

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”設(shè)置了12種等份情況下所使用的寬度，“[class*="grid"]”選擇符為添加了“.gridn”的標簽再添加上10px的右邊界和其它相同的樣式設(shè)置。由于一行中最后一個模塊不需要添加右邊界，所以設(shè)置“.grid_last”選擇符用于消除右邊界，最后一個模塊的class因?qū)憺椤癱lass="gridngrid_last"”。3、網(wǎng)頁柵格系統(tǒng)的實現(xiàn)知識與技能準備3、網(wǎng)頁柵格系統(tǒng)的實現(xiàn)HTML代碼：1234567891011121314151617<divclass="main"><!—網(wǎng)頁主體，寬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固定寬度網(wǎng)頁柵格測試效果知識與技能準備在上一內(nèi)容的設(shè)置中，柵格系統(tǒng)只能適用于固定的網(wǎng)頁寬度，如果網(wǎng)頁總寬度變更，需要重新計算和設(shè)置每份網(wǎng)格的寬度。再或者要制作自動適應(yīng)瀏覽器寬度的網(wǎng)頁，這種設(shè)置方法將不適用。此時可以使用百分比%為單位設(shè)置寬度，但間距如果為固定值時，將無法計算出不同寬度下每份網(wǎng)格的比例?，F(xiàn)在需要對網(wǎng)格的設(shè)置進行一些調(diào)整，如下圖：4、網(wǎng)頁柵格系統(tǒng)的另一種設(shè)置（自動適應(yīng)不同的頁面寬度）圖1-20-7自適應(yīng)網(wǎng)頁柵格知識與技能準備使用百分比%設(shè)置網(wǎng)格的寬度，如果分為12等份，n份網(wǎng)格的寬度設(shè)置如下：1份寬度=1/12=8.33333%；2份寬度=2/12=16.66667%；3份寬度=3/12=25%；……11份寬度=11/12=91.66667%；12份寬度=12/12=100%；將標簽設(shè)置為“怪異盒子模型”，使用填充代替邊界產(chǎn)生各份的間距，這樣間距的寬度將不會對各份的實際寬度造成影響。填充設(shè)置為左填充和右填充，寬度為間距寬度的一半。網(wǎng)頁的總寬度等同于瀏覽器的寬度，或等同于柵格化標簽的父標簽寬度。由于網(wǎng)頁兩側(cè)會留有填充產(chǎn)生的間距，所以網(wǎng)頁內(nèi)容可視的寬度為“網(wǎng)頁總寬度Width-i”。4、網(wǎng)頁柵格系統(tǒng)的另一種設(shè)置（自動適應(yīng)不同的頁面寬度）知識與技能準備3、網(wǎng)頁柵格系統(tǒng)的實現(xiàn)CSS代碼：1234567891011121314151617[class*="grid_"]{/*為.gridn_統(tǒng)一添加樣式*/

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、網(wǎng)頁柵格系統(tǒng)的實現(xiàn)HTML代碼：12345678910111213141516<divclass="main"><!—網(wǎng)頁主體，寬任意--><!--第一行--><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自適應(yīng)柵格實現(xiàn)效果圖任務(wù)實施設(shè)計一種響應(yīng)式柵格布局，除了能夠?qū)崿F(xiàn)柵格化布局功能外，還能結(jié)合媒體查詢功能，在不同的瀏覽器寬度下，自動調(diào)整布局結(jié)構(gòu)，如網(wǎng)頁在手機設(shè)備中一行只顯示1個模塊的內(nèi)容，在平板設(shè)備中自動調(diào)整為一行顯示3個模塊，電腦設(shè)備中一行顯示4個模塊。使用媒體查詢功能設(shè)置出3種瀏覽器寬度下所使用的設(shè)置：手機設(shè)備（寬度<=767）、平板設(shè)備（768<=寬度<=1023）、電腦設(shè)備（寬度>=1024）。都添加相同的柵格系統(tǒng)設(shè)置，但是選擇符的命名有所區(qū)別，分別是“.grid_sn”、“.grid_mn”、“.grid_Ln”。網(wǎng)頁中模塊標簽將同時添加這三種選擇符，如“class='grid_s12grid_m6grid_L3'”，由于不同寬度下只有一種選擇符會生效，所以標簽在不同寬度下將使用不同的布局比例。任務(wù)實施創(chuàng)建一個grid.css樣式：

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

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

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