HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：制作響應(yīng)式導(dǎo)航菜單

HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作制作響應(yīng)式導(dǎo)航菜單能表述響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)概念；能說(shuō)明CSS媒體查詢?cè)陧憫?yīng)式網(wǎng)頁(yè)設(shè)計(jì)中的作用；能夠正確使用CSS媒體查詢等完成D清單頁(yè)面頁(yè)面響應(yīng)式導(dǎo)航菜單制作。任務(wù)目標(biāo)

制作響應(yīng)式導(dǎo)航菜單將D清單頁(yè)面設(shè)置為響應(yīng)式網(wǎng)頁(yè)，當(dāng)用戶使用平板設(shè)備或電腦設(shè)備時(shí)，對(duì)導(dǎo)航欄中的列表標(biāo)簽進(jìn)行樣式設(shè)置和排版，使導(dǎo)航欄的列表內(nèi)容全部顯示在頁(yè)面頂部。效果如下：任務(wù)描述任務(wù)1配置工作環(huán)境圖1-19平板和電腦端導(dǎo)航條效果圖本次任務(wù)要求根據(jù)D清單頁(yè)面效果圖，使用CSS樣式，在基礎(chǔ)上將D清單頁(yè)面菜單修改為響應(yīng)式菜單，需要：學(xué)習(xí)響應(yīng)式頁(yè)面的相關(guān)概念特征；CSS媒體查詢的相關(guān)知識(shí)綜合運(yùn)用媒體查詢和CSS相關(guān)知識(shí)，對(duì)D清單頁(yè)面菜單欄進(jìn)行響應(yīng)式改造，使其在手機(jī)端、平板端和電腦端（根據(jù)效果圖，平板和電腦端效果一致）的菜單欄顯示不同狀態(tài)。任務(wù)分析圖1-19平板和電腦端導(dǎo)航條效果圖

制作響應(yīng)式導(dǎo)航菜單知識(shí)與技能準(zhǔn)備響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是網(wǎng)頁(yè)的設(shè)計(jì)與開發(fā)能夠根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。即無(wú)論用戶正在使用筆記本、ipad、手機(jī)，我們的頁(yè)面都能夠自動(dòng)切換分辨率、圖片尺寸等，以適應(yīng)不同設(shè)備。實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的主要途徑是使用CSS媒體查詢。1、認(rèn)識(shí)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)知識(shí)與技能準(zhǔn)備CSS媒體查詢可以根據(jù)不同的屏幕尺寸設(shè)置不同的樣式。當(dāng)我們重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。2、CSS媒體查詢語(yǔ)法：@mediamediatypeand|not|only(mediafeature){CSS-Code;}知識(shí)與技能準(zhǔn)備其中，mediatype即媒體類型有以下幾種：2、CSS媒體查詢表1-19-1媒體類型知識(shí)與技能準(zhǔn)備Mediafeature即媒體功能有以下取值：2、CSS媒體查詢表1-19-2媒體功能課堂練習(xí)1-19-1CSS媒體查詢簡(jiǎn)單應(yīng)用HTML代碼：1<divclass="text">sometext</div>CSS代碼：12345678910111213.text{ color:grey;}@mediascreenand(max-width:960px){.text{ color:red;}}@mediascreenand(max-width:768px){.text{ color:orange;}}@mediascreenand(max-width:550px){.text{ color:yellow;}}@mediascreenand(max-width:320px){.text{ color:green;}}課堂練習(xí)1-19-1CSS媒體查詢簡(jiǎn)單應(yīng)用在火狐瀏覽器的響應(yīng)式設(shè)計(jì)模式下調(diào)整瀏覽器視口寬度，可以看到在不同分辨率下，文字的顏色有所變化。圖1-19-5768px下文字顏色效果（橘黃色）圖1-19-5768px下文字顏色效果（橘黃色）圖1-19-7320px下文字顏色效果（綠色）知識(shí)與技能準(zhǔn)備這些變化，正是媒體查詢所要的效果。媒體查詢就是通過(guò)不同的媒體類型和條件定義樣式表規(guī)則。媒體查詢的實(shí)現(xiàn)方法很多，這里只介紹W3C推薦的媒體查詢CSS樣式規(guī)則。也可以通過(guò)下列兩種寫法來(lái)實(shí)現(xiàn)媒體查詢：或另外，在使用media時(shí)候需要先設(shè)置下面這段代碼，來(lái)兼容移動(dòng)設(shè)備的展示效果：其中width=device-width為寬度等于當(dāng)前設(shè)備的寬度，initial-scale為初始的縮放比例（默認(rèn)設(shè)置為1.0）。2、CSS媒體查詢@importurl(example.css)screenand(width:800px);<linkmedia="screenand(width:800px)"rel="stylesheet"href="example.css"/><meta

name="viewport"

content="width=device-width,

initial-scale=1.0>任務(wù)實(shí)施在上一任務(wù)完成代碼的基礎(chǔ)上，更改D清單網(wǎng)頁(yè)頭部的導(dǎo)航欄部分，讓導(dǎo)航欄的列表內(nèi)容顯示在頁(yè)面頂部。注意，本任務(wù)中，因?yàn)樵O(shè)置了變換和過(guò)渡效果，所以其元素的顯示和隱藏并不完全是依賴display的方式來(lái)實(shí)現(xiàn)，而是通過(guò)opacity屬性修改透明度來(lái)實(shí)現(xiàn)。參考代碼請(qǐng)參照書本。二級(jí)導(dǎo)航菜