《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH09 jQuery特效

JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第9章jQuery特效 本章學(xué)習(xí)目標(biāo) 掌握jQuery隱藏/顯示相關(guān)函數(shù)hide()、show()和toggle()的用法； 掌握jQuery淡入/淡出相關(guān)函數(shù)fadeIn()、fadeOut()、fadeToggle()、fadeTo()的用法； 掌握jQuery滑動(dòng)相關(guān)函數(shù)slideDown()、slideUp()、slideToggle()的用法； 掌握jQuery動(dòng)畫（Animation）的用法； 掌握jQuery方法鏈接（Chaining）的用法； 掌握jQuery停止動(dòng)畫相關(guān)函數(shù)stop()的用法。目錄9.1jQuery隱藏和顯示

9.2jQuery淡入和淡出

9.3jQuery滑動(dòng)

9.4jQuery動(dòng)畫 9.5jQuery方法鏈接 9.6jQuery停止動(dòng)畫9.7階段案例：動(dòng)態(tài)下拉菜單特效 9.1jQuery隱藏和顯示jQuery可以控制元素的隱藏和顯示，包括自定義變化效果的持續(xù)時(shí)間。其中hide()方法用于隱藏指定的元素，show()方法用于顯示指定的元素。9.1jQuery隱藏和顯示9.1.1jQueryhide() 9.1.2jQueryshow() 9.1.3jQuerytoggle()9.1.1jQueryhide()jQueryhide()方法用于隱藏指定的HTML元素。其語法結(jié)構(gòu)如下：$(selector).hide([duration][,callback]);9.1.1jQueryhide()該方法中selector參數(shù)位置可以是任意有效的選擇器，hide()方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置隱藏動(dòng)作的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為隱藏動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱，若無后續(xù)函數(shù)可省略不填。9.1.1jQueryhide()使用不帶任何參數(shù)的hide()方法，可實(shí)現(xiàn)無動(dòng)畫效果的隱藏動(dòng)作。該方法能立刻隱藏處于顯示狀態(tài)的元素，相當(dāng)于將指定元素的CSS屬性設(shè)置為“display:none”。例如：該代碼表示立刻隱藏文檔中所有的段落元素<p>及其內(nèi)部所有內(nèi)容。$("p").hide();9.1.1jQueryhide()帶有duration參數(shù)值的jQueryhide()方法擁有動(dòng)畫效果。該參數(shù)默認(rèn)單位為毫秒，數(shù)值越大代表持續(xù)時(shí)間越長(zhǎng)，則動(dòng)畫效果越慢。其中“fast”默認(rèn)持續(xù)時(shí)間是200毫秒，而“slow”默認(rèn)是600毫秒。9.1.2jQueryshow()jQueryshow()方法用于顯示指定元素。其語法結(jié)構(gòu)如下：$(selector).show([duration][,callback]);9.1.2jQueryshow()同jQueryhide()方法類似，該方法中selector參數(shù)位置可以是任意有效的選擇器，show()方法中的兩個(gè)參數(shù)均為可選，duration參數(shù)用于設(shè)置顯示的持續(xù)時(shí)間，可填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為顯示動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱，若無后續(xù)函數(shù)可省略不填。9.1.2jQueryshow()使用不帶任何參數(shù)的show()方法，可實(shí)現(xiàn)無動(dòng)畫效果的顯示動(dòng)作。該方法能立刻顯示處于隱藏狀態(tài)的元素。例如：該代碼表示立刻顯示文檔中所有的段落元素<p>及其內(nèi)部所有內(nèi)容。$("p").show();9.1.2jQueryshow()帶有duration參數(shù)值的jQueryshow()方法擁有動(dòng)畫效果。該參數(shù)默認(rèn)單位為毫秒，數(shù)值越大代表持續(xù)時(shí)間越長(zhǎng)，則動(dòng)畫效果越慢。其中“fast”默認(rèn)持續(xù)時(shí)間是200毫秒，而“slow”默認(rèn)是600毫秒。9.1.2jQueryshow()【例9-1】jQuery隱藏和顯示的應(yīng)用9.1.3jQuerytoggle()jQuerytoggle()方法用于切換元素的隱藏和顯示。該方法可以替代hide()和show()方法單獨(dú)使用，用于顯示已隱藏的元素，或隱藏正在顯示的元素。9.1.3jQuerytoggle()【例9-2】jQuery隱藏/顯示切換的應(yīng)用9.2jQuery淡入和淡出9.2.1jQueryfadeIn() 9.2.2jQueryfadeOut() 9.2.3jQueryfadeToggle() 9.2.4jQueryfadeTo()

9.2jQuery淡入和淡出jQuery可以控制元素的透明度，使元素顏色加深或者淡化。相關(guān)方法有如下4種：fadeIn()：通過更改元素的透明度逐漸加深元素顏色，直至元素完全顯現(xiàn)，又稱為淡入。fadeOut()：通過更改元素的透明度逐漸淡化元素顏色，直至元素完全隱藏，又稱為淡出。fadeToggle()：元素淡出淡入效果切換，可用于淡入隱藏的元素，也可用于淡出可見的元素fadeTo()：用于將元素變?yōu)橹付ǖ耐该鞫龋〝?shù)值介于0-1之間）9.2.1jQueryfadeIn()jQueryfadeIn()方法用于實(shí)現(xiàn)元素的淡入效果，即將原先隱藏的元素逐漸顯示出來。其語法結(jié)構(gòu)如下：$(selector).fadeIn([duration][,callback])9.2.1jQueryfadeIn()該方法中selector參數(shù)位置可以是任意有效的選擇器，fadeIn()方法中的兩個(gè)參數(shù)均為可選參數(shù)。參數(shù)duration用于規(guī)定淡入效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeIn()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱，若無后續(xù)函數(shù)可省略不填。9.2.2jQueryfadeOut()jQueryfadeOut()用于實(shí)現(xiàn)元素的淡出效果，即將原先存在的元素逐漸隱藏起來。其語法結(jié)構(gòu)如下：$(selector).fadeOut([duration][,callback])9.2.2jQueryfadeOut()與fadeIn()方法類似，該方法中selector參數(shù)位置可以是任意有效的選擇器，fadeOut()方法中的兩個(gè)參數(shù)也均為可選參數(shù)。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeOut()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱，若無后續(xù)函數(shù)可省略不填。9.2.2jQueryfadeOut()【例9-3】jQuery淡入和淡出的應(yīng)用9.2.3jQueryfadeToggle()jQueryfadeToggle()方法用于切換元素的淡出淡入效果。其語法結(jié)構(gòu)如下：$(selector).fadeToggle([duration][,callback])9.2.3jQueryfadeToggle()該方法中selector參數(shù)位置可以是任意有效的選擇器。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeToggle()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱。9.2.3jQueryfadeToggle()【例9-4】jQuery淡出/淡入切換的應(yīng)用9.2.4jQueryfadeTo()jQueryfadeTo()方法用于指定漸變效果的透明度，透明度的數(shù)值介于0至1之間。其語法結(jié)構(gòu)如下：$(selector).fadeTo(duration,opacity[,callback])9.2.4jQueryfadeTo()該方法中selector參數(shù)位置可以是任意有效的選擇器。fadeTo()方法中的參數(shù)解釋如下：duration：該參數(shù)為必填內(nèi)容，表示透明度漸變的持續(xù)時(shí)間，其默認(rèn)單位為毫秒，可填入“fast”或“slow”分別代表200毫秒和600毫秒的持續(xù)時(shí)間，也可填入自定義的數(shù)值，填入的數(shù)值越大代表持續(xù)時(shí)間越長(zhǎng)，因此動(dòng)畫效果越緩慢；opacity：該參數(shù)為必填內(nèi)容，用于設(shè)置元素的透明度。透明度的數(shù)值必須在0至1之間，數(shù)值越小透明度越高，0為完全透明，1為非透明；callback：該參數(shù)為可選內(nèi)容，用于指定當(dāng)前效果結(jié)束后的下一個(gè)函數(shù)名稱，如果沒有可以省略不填。9.2.4jQueryfadeTo()【例9-5】jQuery設(shè)置淡入/淡出漸變值9.3jQuery滑動(dòng)jQuery的滑動(dòng)共有3種方法效果：slideDown()：向下滑動(dòng)元素slideUp()：向上滑動(dòng)元素slideToggle()：切換向上和向下滑動(dòng)元素9.3jQuery滑動(dòng)9.3.1jQueryslideDown() 9.3.2jQueryslideUp() 9.3.3jQueryslideToggle()

9.3.1jQueryslideDown()jQueryslideDown()方法用于向下滑動(dòng)元素。其語法結(jié)構(gòu)如下：該方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置向下滑動(dòng)效果的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為滑動(dòng)動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱，若無后續(xù)函數(shù)可省略不填。$(selector).slideDown([duration][,callback])9.3.1jQueryslideDown()jQueryslideDown()方法中的duration參數(shù)默認(rèn)單位為毫秒，數(shù)值越大則動(dòng)畫效果越慢。其中“fast”默認(rèn)為200毫秒，“slow”默認(rèn)為600毫秒，duration參數(shù)值省略的情況下默認(rèn)持續(xù)時(shí)間為400毫秒。9.3.2jQueryslideUp()jQueryslideUp()方法用于向上滑動(dòng)元素。其語法結(jié)構(gòu)如下：該方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置向上滑動(dòng)效果的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為滑動(dòng)動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱，若無后續(xù)函數(shù)可省略不填。$(selector).slideUp([duration][,callback])9.3.2jQueryslideUp()jQueryslideUp()方法中的duration參數(shù)默認(rèn)單位為毫秒，數(shù)值越大則動(dòng)畫效果越慢。其中“fast”默認(rèn)為200毫秒，“slow”默認(rèn)為600毫秒，duration參數(shù)值省略的情況下默認(rèn)持續(xù)時(shí)間為400毫秒。9.3.2jQueryslideUp()【例9-6】jQuery滑動(dòng)的應(yīng)用9.3.3jQueryslideToggle()jQueryslideToggle()方法用于切換滑動(dòng)方向，其語法結(jié)構(gòu)如下：該方法中selector參數(shù)位置可以是任意有效的選擇器。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是slideToggle()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱。$(selector).slideToggle([duration][,callback])9.3.3jQueryslideToggle()【例9-7】jQuery滑動(dòng)方向切換的應(yīng)用9.4jQuery動(dòng)畫9.4.1改變?cè)鼗緦傩?9.4.2改變?cè)匚恢?9.4.3動(dòng)畫隊(duì)列 9.4jQuery動(dòng)畫jQueryanimate()方法通過更改元素的CSS屬性值實(shí)現(xiàn)動(dòng)畫效果。其語法結(jié)構(gòu)如下：其中params參數(shù)為必填，duration和callback參數(shù)為可選。$(selector).animate({params}[,duration][,callback])9.4jQuery動(dòng)畫參數(shù)的具體解釋如下：params參數(shù)表示形成動(dòng)畫的CSS屬性，允許同時(shí)實(shí)現(xiàn)多個(gè)屬性的改變；duration參數(shù)表示規(guī)定的效果時(shí)長(zhǎng)，默認(rèn)單位為毫秒，可以填入”slow”、”fast”或具體數(shù)值。其中“fast”表示持續(xù)時(shí)間為200毫秒，“slow”表示為600毫秒。若填入具體數(shù)值，則數(shù)值越大動(dòng)畫效果越緩慢；callback參數(shù)表示動(dòng)畫完成后需要執(zhí)行的函數(shù)名稱，若無下一步需執(zhí)行的函數(shù)可省略不填。9.4.1改變?cè)鼗緦傩詊Queryanimate()方法可以用于實(shí)現(xiàn)絕大部分CSS屬性的變化，例如元素的寬度、高度、透明度等。但是jQuery核心庫中并沒有包含色彩變化效果，因此如果要實(shí)現(xiàn)顏色動(dòng)畫，需要在jQuery的官方網(wǎng)站另外下載色彩動(dòng)畫的相關(guān)插件。9.4.1改變?cè)鼗緦傩援?dāng)CSS屬性名稱中包含連字符“-”時(shí)，需要使用Camel標(biāo)記法（注：又稱為駝峰標(biāo)記法，其特點(diǎn)是首個(gè)單詞小寫、接下來的單詞都以首字母大寫的一種形式。）進(jìn)行重新改寫。例如，字體大小在CSS屬性中寫為“font-size”，如需在jQueryanimate()中使用則必須改寫為“fontSize”。9.4.1改變?cè)鼗緦傩詊Queryanimate()方法可作用于各種HTML元素，如段落元素<p>、標(biāo)題元素<h1>、塊元素<div>等。以一個(gè)簡(jiǎn)單的<div>元素為例，并為其配置測(cè)試按鈕，代碼如下：<buttonid="btn"type="button">開始動(dòng)畫效果</button><br><div>你好，jQuery動(dòng)畫！</div>9.4.1改變?cè)鼗緦傩詾?lt;div>元素設(shè)置一些初始屬性，在內(nèi)部樣式表中相關(guān)代碼寫法如下：這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設(shè)置為黃色。<style> div{width:200px;height:200px;background-color:yellow}</style>9.4.1改變?cè)鼗緦傩詾?lt;div>元素設(shè)置動(dòng)畫效果，當(dāng)點(diǎn)擊按鈕時(shí)執(zhí)行該動(dòng)畫內(nèi)容。$("#btn").click(function(){$("div").animate({ width:"400px", fontSize:"30px", opacity:0.25 },2000);});此段代碼表示，當(dāng)點(diǎn)擊id為“btn”的按鈕時(shí)激發(fā)<div>元素的動(dòng)畫效果，在2秒的持續(xù)時(shí)間內(nèi)<div>元素的寬度從200像素變?yōu)?00像素，字體大小從默認(rèn)值變?yōu)?0像素，透明度從默認(rèn)值1變?yōu)?.25。9.4.1改變?cè)鼗緦傩浴纠?-8】jQuery簡(jiǎn)單動(dòng)畫效果9.4.2改變?cè)匚恢胘Queryanimate()方法也可以通過使用CSS屬性中的方位值left、right、top和bottom改變?cè)匚恢脤?shí)現(xiàn)移動(dòng)效果。由于這些屬性值均為相對(duì)值，而在HTML中所有元素的position屬性值均默認(rèn)為靜態(tài)（static）無法移動(dòng)的，因此需要事先設(shè)置指定元素的position為relative、absolute或者fixed方能生效。9.4.2改變?cè)匚恢靡砸粋€(gè)簡(jiǎn)單的<div>元素為例，并為其配置測(cè)試按鈕，代碼如下：<buttonid="btn"type="button">開始移動(dòng)</button><br><div>你好，jQuery動(dòng)畫！</div>9.4.2改變?cè)匚恢脼?lt;div>元素設(shè)置一些初始屬性，在內(nèi)部樣式表中相關(guān)代碼寫法如下：這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設(shè)置為綠色，元素初始位置為相對(duì)位置。<style>div{width:100px;height:100px;background-color:green;color:white;position:relative}</style>9.4.2改變?cè)匚恢脼?lt;div>元素設(shè)置動(dòng)畫效果，當(dāng)點(diǎn)擊按鈕時(shí)執(zhí)行該動(dòng)畫內(nèi)容。上述代碼表示當(dāng)點(diǎn)擊id為"btn"的按鈕時(shí)激發(fā)<div>元素的動(dòng)畫效果。在2秒的持續(xù)時(shí)間內(nèi)<div>元素從初始位置向右平移200像素，并且同時(shí)向下垂直移動(dòng)100像素。其中l(wèi)eft:"+=200"和top:"+=100"為相對(duì)值寫法，表示相對(duì)于初始位置的移動(dòng)效果并省略了單位像素（px）。$("#btn").click(function(){$("div").animate({ left:"+=200",top:"+=100" },2000);});});9.4.2改變?cè)匚恢谩纠?-9】jQuery位置移動(dòng)動(dòng)畫效果9.4.3動(dòng)畫隊(duì)列jQuery可以為多個(gè)連續(xù)的animate()方法創(chuàng)建動(dòng)畫隊(duì)列，然后依次執(zhí)行隊(duì)列中的每一項(xiàng)動(dòng)畫從而實(shí)現(xiàn)更加復(fù)雜的動(dòng)畫效果。在同一個(gè)animate()方法中描述的多個(gè)動(dòng)畫效果會(huì)同時(shí)發(fā)生，但在不同的animate()方法中描述的動(dòng)畫效果會(huì)按照動(dòng)畫隊(duì)列中的先后次序發(fā)生。9.4.3動(dòng)畫隊(duì)列以一個(gè)簡(jiǎn)單的<div>元素為例，并為其配置測(cè)試按鈕，代碼如下：<buttonid="btn"type="button">開始移動(dòng)</button><br><div>你好，jQuery動(dòng)畫！</div>9.4.3動(dòng)畫隊(duì)列為<div>元素設(shè)置一些初始屬性，在內(nèi)部樣式表中相關(guān)代碼寫法如下：這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設(shè)置為紫色，元素初始位置為相對(duì)位置。<style>div{width:100px;height:100px;color:white;background-color:purple;position:relative}</style>9.4.3動(dòng)畫隊(duì)列為<div>元素設(shè)置多種動(dòng)畫效果，當(dāng)點(diǎn)擊按鈕時(shí)依次執(zhí)行這些動(dòng)畫內(nèi)容。$("#btn").click(function(){ $("div").animate({left:"+=200",opacity:0.25},2000); $("div").animate({top:"+=100",opacity:0.5},2000); $("div").animate({left:"-=200",opacity:0.75},2000); $("div").animate({top:"-=100",opacity:1},2000);});9.4.3動(dòng)畫隊(duì)列上述代碼表示，當(dāng)點(diǎn)擊id為“btn”的按鈕時(shí)激發(fā)<div>元素的動(dòng)畫效果，具體效果如下：在第1、2秒的持續(xù)時(shí)間內(nèi)<div>元素從初始位置向右平移200像素，透明度變?yōu)?.25；在第3、4秒的持續(xù)時(shí)間內(nèi)<div>元素繼續(xù)向下垂直移動(dòng)100像素，透明度變?yōu)?.5；在第5、6秒的持續(xù)時(shí)間內(nèi)<div>元素繼續(xù)向左平移200像素，透明度變?yōu)?.75；在第7、8秒的持續(xù)時(shí)間內(nèi)<div>元素繼續(xù)向上垂直移動(dòng)100像素，透明度變?yōu)?。9.4.3動(dòng)畫隊(duì)列【例9-10】jQuery動(dòng)畫隊(duì)列效果9.5jQuery方法鏈接jQuery允許在同一個(gè)元素上連續(xù)運(yùn)行多條jQuery命令，這種技術(shù)成為jQuery方法鏈接（Chaining）。對(duì)于同一個(gè)元素，如果有多個(gè)動(dòng)作需要依次執(zhí)行，只需要將新的動(dòng)作追加到上一個(gè)動(dòng)作后面，形成一個(gè)方法鏈，無需每次重復(fù)查找選擇相同的元素。9.5jQuery方法鏈接其基本語法如下：$(selector).action1().action2().action3()......actionN();9.5jQuery方法鏈接也可以每個(gè)動(dòng)作另起一行，寫法如下：前面的action動(dòng)作可以任意換行，只要最后一個(gè)動(dòng)作加上分號(hào)表示完成即可。jQuery會(huì)自動(dòng)過濾多余的空格和折行，并按照單行方法鏈接進(jìn)行執(zhí)行。$(selector).action1().action2().action3().......actionN();9.5jQuery方法鏈接【例9-11】jQuery方法鏈接的應(yīng)用9.6jQuery停止動(dòng)畫在jQuery中stop()方法可用于停止動(dòng)畫或效果。其語法結(jié)構(gòu)如下：該方法中selector參數(shù)位置可以是任意有效的選擇器。$(selector).stop([stopAll][,goToEnd]);9.6jQuery停止動(dòng)畫stop()方法中的兩個(gè)參數(shù)均為可選參數(shù)，參數(shù)具體解釋如下：stopAll：用于規(guī)定是否清除后續(xù)的所有動(dòng)畫內(nèi)容，可填入布爾值。其默認(rèn)值為false，表示僅停止當(dāng)前動(dòng)畫，允許動(dòng)畫隊(duì)列中的后續(xù)動(dòng)畫繼續(xù)執(zhí)行。goToEnd：用于規(guī)定是否立即完成當(dāng)前的動(dòng)畫內(nèi)容，可填入布爾值。其默認(rèn)值為false，表示直接終止當(dāng)前的動(dòng)畫效果。9.6jQuery停止動(dòng)畫【例9-12】jQuerystop()方法的應(yīng)用9.7階段案例：動(dòng)態(tài)下拉菜單特效9.7.1案例需求9.7.2界面設(shè)計(jì)9.7.3邏輯實(shí)現(xiàn)9.7.4案例思考9.7.1案例需求背景介紹：動(dòng)態(tài)下拉菜單特效在很多高校、企業(yè)等單位的門戶網(wǎng)站上很受歡迎，當(dāng)用戶瀏覽網(wǎng)頁時(shí)將鼠標(biāo)擺放在菜單導(dǎo)航橫欄的一級(jí)欄目上，就會(huì)有各類動(dòng)畫特效顯示出下方的二級(jí)菜單欄目列表。功能要求：使用jQuery制作一款動(dòng)態(tài)下拉菜單特效。9.7.2界面設(shè)計(jì)本案例使用無序列表<ul>和列表項(xiàng)<li>制作一級(jí)菜單，并為其中部分列表項(xiàng)制作二級(jí)菜單列表。結(jié)構(gòu)如圖所示。9.7.2界面設(shè)計(jì)創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如DynamicMenu.html。在HTML5中使用<nav>元素聲明菜單區(qū)域，在其中嵌套<divid="navWrap">容器實(shí)現(xiàn)主要內(nèi)容居中并限制寬度，其內(nèi)部使用<ul>和<li>元素制作一級(jí)菜單，相關(guān)代碼如下：1. <body>2. <!--菜單區(qū)域-->3. <nav>4. <!--內(nèi)部區(qū)域-->5. <divid="navWrap">6. <!--菜單列表-->7. <ul>8. <liclass="mainmenu"><ahref="#">網(wǎng)站首頁</a></li>9. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>10. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>11. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>12. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>13. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>14. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>15. </ul>16. </div>17. </nav>18. </body>9.7.2界面設(shè)計(jì)使用<dl>和<dd>制作二級(jí)菜單列表項(xiàng)，開發(fā)者可以自行把它加入到一個(gè)或多個(gè)一級(jí)菜單的<li>元素內(nèi)部，這里節(jié)選加到第2個(gè)<li>元素中查看效果，代碼片段如下：1. <!--菜單列表-->2. <ul>3. <liclass="mainmenu"><ahref="#">網(wǎng)站首頁</a></li>4. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a>5. <!--二級(jí)菜單-->6. <dlstyle="display:none;">7. <dd><ahref="#">選項(xiàng)一</a></dd>8. <dd><ahref="#">選項(xiàng)二</a></dd>9. <dd><ahref="#">選項(xiàng)三</a></dd>10. </dl>11. </li>12. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>13. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>14. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>15. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>16. <liclass="mainmenu"><ahref="#">菜單選項(xiàng)</a></li>17. </ul>為<dl>元素添加style屬性使其暫時(shí)隱藏。9.7.2界面設(shè)計(jì)本示例使用CSS外部樣式表規(guī)定頁面樣式。在本地css文件夾中創(chuàng)建menu.css文件，并在HTML5文件的<head>首尾標(biāo)簽中聲明對(duì)CSS文件的引用。相關(guān)HTML5代碼片段如下：在CSS外部樣式表中為所有元素清除內(nèi)外邊距，相關(guān)CSS代碼如下：1. <head>2. <metacharset="utf-8">3. <title>我的菜單</title>4. <linkrel="stylesheet"href="css/menu.css">5. </head>1. /*公共樣式*/2. *{3. margin:0;/*清除外邊距*/4. padding:0;/*清除內(nèi)邊距*/5. }9.7.2界面設(shè)計(jì)為<nav>和內(nèi)部容器設(shè)置樣式，相關(guān)CSS代碼如下：1. /*菜單區(qū)域*/2. nav{3. width:100%;/*寬度100%自適應(yīng)瀏覽器寬度*/4. height:56px;/*高度56px*/5. text-align:center;/*文本居中對(duì)齊*/6. background-color:#0b6cb8;/*背景顏色藍(lán)色*/7. }8. /*菜單內(nèi)部容器*/9. #navWrap{10. width:1200px;/*寬度1200px*/11. margin:0auto;/*外邊距上下0左右auto*/12. }9.7.2界面設(shè)計(jì)菜單中的列表容器<ul>和一級(jí)菜單列表項(xiàng)<li>元素設(shè)置樣式，相關(guān)CSS代碼如下：1. /*菜單列表樣式*/2. navul{3. list-style:none;/*清除裝飾點(diǎn)*/4. }5. /*一級(jí)菜單樣式*/6. navulli{7. float:left;/*左浮動(dòng)*/8. }9.7.2界面設(shè)計(jì)最后為菜單中的超鏈接<a>設(shè)置樣式，相關(guān)CSS代碼如下：1. /*超鏈接樣式*/2. nava{3. display:block;/*塊級(jí)元素*/4. width:160px;/*寬度160px*/5. color:white;/*文本顏色白色*/6. background-color:#0b6cb8;/*背景顏色藍(lán)色*/7. text-align:center;/*文本居中對(duì)齊*/8. text-decoration:none;/*清除下劃線效果*/9. padding:15px0;/*內(nèi)邊距上下15px左右0*/10. font-size:20px;/*字體大小20px*/