HTML5+CSS3網(wǎng)頁設計與制作重布局頁面實現(xiàn)響應式效果能進一步完善柵格化系統(tǒng)的功能，增加柵格布局的留白區(qū)域和柵格模塊的隱藏功能；能將柵格化系統(tǒng)運用到D清單頁面中進行響應式布局。任務目標

重布局頁面實現(xiàn)響應式效果使用中制作的響應式柵格系統(tǒng)（文件grid.css），對D清單頁面進行響應式改造，使頁面在平板設備、電腦設備中都能正常顯示，并根據(jù)瀏覽器的寬度自動調整頁面內容的排版。任務描述圖1-21平板和電腦端瀏覽效果

重布局頁面實現(xiàn)響應式效果完成D清單頁面的響應式改造，需要：增加柵格布局的留白區(qū)域設置；增加柵格模塊的隱藏功能設置；根據(jù)需要對D清單頁面重新布局的內容進行HTML和CSS修訂，以應用柵格系統(tǒng)對D清單頁面進行響應式改造。部分電腦端頁面排版布局如圖1-21-1所示。任務分析圖1-21-1變更為左右或左中右布局的電腦端頁面效果

重布局頁面實現(xiàn)響應式效果知識與技能準備在網(wǎng)頁布局中，并不是任何網(wǎng)頁都會將頁面的空間填滿，有時候由于網(wǎng)頁設計的需要會預留一些不放置內容的區(qū)域。在上一任務中設置的柵格布局中，每個模塊都會從左向右排列將空間填滿，現(xiàn)在需要進一步改良設置。如下圖所示，由于標簽的填充已用于設置模塊間的間距，所以使用左邊界，以每份網(wǎng)格為單位，為模塊標簽的左側隔開留白的空間。1、為網(wǎng)頁柵格系統(tǒng)添加留白區(qū)域圖1-21-2留白柵格原理圖知識與技能準備左邊界的長度同樣還是以百分比%為單位，設置為一份網(wǎng)格的整倍數(shù)，有1份網(wǎng)格、2份、……、11份一種11種情況。和上一任務中柵格系統(tǒng)設置方法類似，為不同的情況都設置一個獨立的選擇符。1、為網(wǎng)頁柵格系統(tǒng)添加留白區(qū)域知識與技能準備為柵格系統(tǒng)的CSS文件補充下面的設置：1、為網(wǎng)頁柵格系統(tǒng)添加留白區(qū)域為模塊標簽添加“grid_”設置寬度的同時，添加“ml_”付加上左邊界產(chǎn)生左側留白效果。css：123456789101112/*追加留白的設置*/.ml_s1{margin-left:8.33333%;}.ml_s2{margin-left:16.66667%;}.ml_s3{margin-left:25%;}.ml_s4{margin-left:31.213333%;}.ml_s5{margin-left:41.66667%;}.ml_s6{margin-left:50%;}.ml_s7{margin-left:58.33333%;}.ml_s8{margin-left:66.66667%;}.ml_s9{margin-left:75%;}.ml_s10{margin-left:81.213333333%;}.ml_s11{margin-left:91.66667%;}HTML：12345678910<divclass="main"><!—網(wǎng)頁主體--><divclass="grid_s10ml_s2"></div><!--留白2個網(wǎng)格--><divclass="grid_s3"></div><divclass="grid_s3ml_s1"></div><!--留白1個網(wǎng)格--><divclass="grid_s3ml_s1"></div><!--留白1個網(wǎng)格--><divclass="clear"></div></div>圖1-21-3有留白的柵格顯示效果知識與技能準備響應式柵格系統(tǒng)中要添加留白效果，需要為每種設備的媒體查詢，分別添加上述的CSS設置，并通過選擇符的名稱區(qū)分，做法與上一任務中響應式柵格系統(tǒng)設置方法類似。代碼請查看書本。如果因為布局需求添加右側留白邊界的，使用相同的方法添加對應的選擇符。1、為網(wǎng)頁柵格系統(tǒng)添加留白區(qū)域知識與技能準備部分網(wǎng)頁的內容比較多，在手機或平板設備下頁面無法顯示過多的內容，可能需要隱藏部分次要的模塊，以節(jié)省空間。前面柵格系統(tǒng)的設置中，設定了1-12份網(wǎng)格占用的空間，現(xiàn)在追加一個“0份”空間，設置為“display:none;”，添加了該選擇符的標簽便會被隱藏。2、在特定設備寬度下隱藏部分的柵格模塊grid.css：123456789101112@mediaalland(max-width:767px){ /*追加設置*/ .grid_s0{display:none;}}@mediaalland(min-width:768px)and(max-width:1023px){ /*追加設置*/ .grid_m0{display:none;}}@mediaalland(min-width:1024px){ /*追加設置*/ .grid_L0{display:none;}}任務實施使用上一個任務中制作的響應式柵格系統(tǒng)（文件grid.css），進一步完善D清單網(wǎng)頁。使頁面在平板設備、電腦設備中都能正常顯示，并根據(jù)瀏覽器的寬度自動調整頁面部分內容的排版。由于排版方式有所變化，部分內容的html標簽代碼需要進行一下修改。1、關于1.1布局修改1.2內容格式優(yōu)化由于該部分與手機端其實是一致的，在電腦和平板端，由于視口寬度的增加，我們可以對其字體大小、留白等進行適當修改。圖1-21-4關于部分的效果圖任務實施2、特征模塊在該內容模塊中，我們可以對其進行柵格化布局，其中標題和副標題可以是12柵格，不需要修改。圖片和文本區(qū)域，平板端可以按照5：7進行布局，電腦端可以按照4：8進行布局。圖1-21-5特征模塊效果圖任務實施3、應用下載與上一模塊類似，其中標題和副標題可以是12柵格，不需要修改。圖片和文本區(qū)域，平板和電腦端都可以按照4：4：4進行布局。圖1-21-6應用下載效果圖任務實施4、高級會員該表格在布局時已經(jīng)是12列柵格的布局，與關于部分類似，只需要增加最大寬度樣式到HTML的即可，這里操作省略。5、幫助中心該部分與應用下載模塊類似，為4：4：4布局，最大寬度方面分別對標題、3組文本和視頻添加row樣式，具體代碼可以參考下載模塊內容進行設置，這里省略。圖1-21-7幫助中心效果圖任務實施6、聯(lián)系我們該模塊為左右結構，與“特征模塊”類似，在平板端為6：6布局。為了右邊的表單短一些，在電腦端可以采用8：4的比例進行布局。圖1-21-8聯(lián)系我們效果圖任務實施7、測試完成所有布局后，我們需要對響應式效果進行測試。以火狐瀏覽器為例，我們可以依次單擊設置菜單中的“WEB開發(fā)者”->”響應式設計模式”，打開響應式設計模式視圖。也可以直接單擊右鍵“檢查元素”或按快捷鍵“F12”，打開調試窗口，再單擊“響應式設計模式”按鈕打開響應式設計模式視圖。如圖1-21-9所示：我們選擇設備型