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

《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)》教案第9章jQuery特效一、教學(xué)目標(biāo)：掌握jQuery隱藏/顯示相關(guān)函數(shù)hide()、show()和toggle()的用法；掌握jQuery淡入/淡出相關(guān)函數(shù)fadeIn()、fadeOut()、fadeToggle()、fadeTo()的用法；掌握jQuery滑動相關(guān)函數(shù)slideDown()、slideUp()、slideToggle()的用法；掌握jQuery動畫（Animation）的用法；掌握jQuery方法鏈接（Chaining）的用法；掌握jQuery停止動畫相關(guān)函數(shù)stop()的用法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery常用特效（隱藏/顯示、淡入淡出、滑動）；難點(diǎn)：jQuery動畫和方法鏈接的用法。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要介紹jQuery常用特效，包括jQuery隱藏和顯示、淡入和淡出、滑動、動畫、方法鏈接以及停止動畫效果。五、教學(xué)基本內(nèi)容：9.1jQuery隱藏和顯示jQuery可以控制元素的隱藏和顯示，包括自定義變化效果的持續(xù)時(shí)間。其中hide()方法用于隱藏指定的元素，show()方法用于顯示指定的元素。9.1.1jQueryhide()jQueryhide()方法用于隱藏指定的HTML元素。其語法結(jié)構(gòu)如下：$(selector).hide([duration][,callback]);該方法中selector參數(shù)位置可以是任意有效的選擇器，hide()方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置隱藏動作的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長度（單位默認(rèn)為毫秒）；callback參數(shù)為隱藏動作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱，若無后續(xù)函數(shù)可省略不填。使用不帶任何參數(shù)的hide()方法，可實(shí)現(xiàn)無動畫效果的隱藏動作。該方法能立刻隱藏處于顯示狀態(tài)的元素，相當(dāng)于將指定元素的CSS屬性設(shè)置為“display:none”。例如：$("p").hide();該代碼表示立刻隱藏文檔中所有的段落元素<p>及其內(nèi)部所有內(nèi)容。帶有duration參數(shù)值的jQueryhide()方法擁有動畫效果。該參數(shù)默認(rèn)單位為毫秒，數(shù)值越大代表持續(xù)時(shí)間越長，則動畫效果越慢。其中“fast”默認(rèn)持續(xù)時(shí)間是200毫秒，而“slow”默認(rèn)是600毫秒。9.1.2jQueryshow()jQueryshow()方法用于顯示指定元素。其語法結(jié)構(gòu)如下：$(selector).show([duration][,callback]);同jQueryhide()方法類似，該方法中selector參數(shù)位置可以是任意有效的選擇器，show()方法中的兩個(gè)參數(shù)均為可選，duration參數(shù)用于設(shè)置顯示的持續(xù)時(shí)間，可填入“slow”、“fast”或者具體的時(shí)間長度（單位默認(rèn)為毫秒）；callback參數(shù)為顯示動作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱，若無后續(xù)函數(shù)可省略不填。使用不帶任何參數(shù)的show()方法，可實(shí)現(xiàn)無動畫效果的顯示動作。該方法能立刻顯示處于隱藏狀態(tài)的元素。例如：$("p").show();該代碼表示立刻顯示文檔中所有的段落元素<p>及其內(nèi)部所有內(nèi)容。帶有duration參數(shù)值的jQueryshow()方法擁有動畫效果。該參數(shù)默認(rèn)單位為毫秒，數(shù)值越大代表持續(xù)時(shí)間越長，則動畫效果越慢。其中“fast”默認(rèn)持續(xù)時(shí)間是200毫秒，而“slow”默認(rèn)是600毫秒?！纠?-1】jQuery隱藏和顯示的應(yīng)用分別使用無參數(shù)和帶有duration參數(shù)值的hide()和show()方法，測試元素的隱藏和顯示效果。9.1.3jQuerytoggle()jQuerytoggle()方法用于切換元素的隱藏和顯示。該方法可以替代hide()和show()方法單獨(dú)使用，用于顯示已隱藏的元素，或隱藏正在顯示的元素?！纠?-2】jQuery隱藏/顯示切換的應(yīng)用使用toggle()方法切換元素的隱藏/顯示效果。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])該方法中selector參數(shù)位置可以是任意有效的選擇器，fadeIn()方法中的兩個(gè)參數(shù)均為可選參數(shù)。參數(shù)duration用于規(guī)定淡入效果的時(shí)長，可填入“fast”、“slow”或具體時(shí)長數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeIn()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱，若無后續(xù)函數(shù)可省略不填。9.2.2jQueryfadeOut()jQueryfadeOut()用于實(shí)現(xiàn)元素的淡出效果，即將原先存在的元素逐漸隱藏起來。其語法結(jié)構(gòu)如下：$(selector).fadeOut([duration][,callback])與fadeIn()方法類似，該方法中selector參數(shù)位置可以是任意有效的選擇器，fadeOut()方法中的兩個(gè)參數(shù)也均為可選參數(shù)。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長，可填入“fast”、“slow”或具體時(shí)長數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeOut()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱，若無后續(xù)函數(shù)可省略不填?！纠?-3】jQuery淡入和淡出的應(yīng)用分別使用無參數(shù)和帶有duration參數(shù)值的fadeIn()和fadeOut()方法，測試元素的淡入和淡出效果。9.2.3jQueryfadeToggle()jQueryfadeToggle()方法用于切換元素的淡出淡入效果。其語法結(jié)構(gòu)如下：$(selector).fadeToggle([duration][,callback])該方法中selector參數(shù)位置可以是任意有效的選擇器。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長，可填入“fast”、“slow”或具體時(shí)長數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeToggle()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱?！纠?-4】jQuery淡出/淡入切換的應(yīng)用使用fadeToggle()方法切換元素的淡出/淡入效果。9.2.4jQueryfadeTo()jQueryfadeTo()方法用于指定漸變效果的透明度，透明度的數(shù)值介于0至1之間。其語法結(jié)構(gòu)如下：$(selector).fadeTo(duration,opacity[,callback])該方法中selector參數(shù)位置可以是任意有效的選擇器。fadeTo()方法中的參數(shù)解釋如下：duration：該參數(shù)為必填內(nèi)容，表示透明度漸變的持續(xù)時(shí)間，其默認(rèn)單位為毫秒，可填入“fast”或“slow”分別代表200毫秒和600毫秒的持續(xù)時(shí)間，也可填入自定義的數(shù)值，填入的數(shù)值越大代表持續(xù)時(shí)間越長，因此動畫效果越緩慢；opacity：該參數(shù)為必填內(nèi)容，用于設(shè)置元素的透明度。透明度的數(shù)值必須在0至1之間，數(shù)值越小透明度越高，0為完全透明，1為非透明；callback：該參數(shù)為可選內(nèi)容，用于指定當(dāng)前效果結(jié)束后的下一個(gè)函數(shù)名稱，如果沒有可以省略不填。【例9-5】jQuery設(shè)置淡入/淡出漸變值9.3jQuery滑動jQuery的滑動共有3種方法效果：slideDown()：向下滑動元素slideUp()：向上滑動元素slideToggle()：切換向上和向下滑動元素9.3.1jQueryslideDown()jQueryslideDown()方法用于向下滑動元素。其語法結(jié)構(gòu)如下：$(selector).slideDown([duration][,callback])該方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置向下滑動效果的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長度（單位默認(rèn)為毫秒）；callback參數(shù)為滑動動作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱，若無后續(xù)函數(shù)可省略不填。jQueryslideDown()方法中的duration參數(shù)默認(rèn)單位為毫秒，數(shù)值越大則動畫效果越慢。其中“fast”默認(rèn)為200毫秒，“slow”默認(rèn)為600毫秒，duration參數(shù)值省略的情況下默認(rèn)持續(xù)時(shí)間為400毫秒。9.3.2jQueryslideUp()jQueryslideUp()方法用于向上滑動元素。其語法結(jié)構(gòu)如下：$(selector).slideUp([duration][,callback])該方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置向上滑動效果的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長度（單位默認(rèn)為毫秒）；callback參數(shù)為滑動動作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱，若無后續(xù)函數(shù)可省略不填。jQueryslideUp()方法中的duration參數(shù)默認(rèn)單位為毫秒，數(shù)值越大則動畫效果越慢。其中“fast”默認(rèn)為200毫秒，“slow”默認(rèn)為600毫秒，duration參數(shù)值省略的情況下默認(rèn)持續(xù)時(shí)間為400毫秒?！纠?-6】jQuery滑動的應(yīng)用使用帶有duration參數(shù)值的slideUp()和slideDown()方法分別演繹投影幕上升和下降的滑動效果。9.3.3jQueryslideToggle()jQueryslideToggle()方法用于切換滑動方向，其語法結(jié)構(gòu)如下：$(selector).slideToggle([duration][,callback])該方法中selector參數(shù)位置可以是任意有效的選擇器。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長，可填入“fast”、“slow”或具體時(shí)長數(shù)值（單位為毫秒）；可選參數(shù)callback指的是slideToggle()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱?！纠?-7】jQuery滑動方向切換的應(yīng)用修改例9-35中的部分代碼，使用slideToggle()方法代替slideUp()和slideDown()方法，用同一個(gè)按鈕切換投影幕上升和下降的滑動效果。9.4jQuery動畫jQueryanimate()方法通過更改元素的CSS屬性值實(shí)現(xiàn)動畫效果。其語法結(jié)構(gòu)如下：$(selector).animate({params}[,duration][,callback])其中params參數(shù)為必填，duration和callback參數(shù)為可選。參數(shù)的具體解釋如下：params參數(shù)表示形成動畫的CSS屬性，允許同時(shí)實(shí)現(xiàn)多個(gè)屬性的改變；duration參數(shù)表示規(guī)定的效果時(shí)長，默認(rèn)單位為毫秒，可以填入”slow”、”fast”或具體數(shù)值。其中“fast”表示持續(xù)時(shí)間為200毫秒，“slow”表示為600毫秒。若填入具體數(shù)值，則數(shù)值越大動畫效果越緩慢；callback參數(shù)表示動畫完成后需要執(zhí)行的函數(shù)名稱，若無下一步需執(zhí)行的函數(shù)可省略不填。9.4.1改變元素基本屬性jQueryanimate()方法可以用于實(shí)現(xiàn)絕大部分CSS屬性的變化，例如元素的寬度、高度、透明度等。但是jQuery核心庫中并沒有包含色彩變化效果，因此如果要實(shí)現(xiàn)顏色動畫，需要在jQuery的官方網(wǎng)站另外下載色彩動畫的相關(guān)插件。當(dāng)CSS屬性名稱中包含連字符“-”時(shí)，需要使用Camel標(biāo)記法（注：又稱為駝峰標(biāo)記法，其特點(diǎn)是首個(gè)單詞小寫、接下來的單詞都以首字母大寫的一種形式。）進(jìn)行重新改寫。例如，字體大小在CSS屬性中寫為“font-size”，如需在jQueryanimate()中使用則必須改寫為“fontSize”。jQueryanimate()方法可作用于各種HTML元素，如段落元素<p>、標(biāo)題元素<h1>、塊元素<div>等。以一個(gè)簡單的<div>元素為例，并為其配置測試按鈕，代碼如下：<buttonid="btn"type="button">開始動畫效果</button><br><div>你好，jQuery動畫！</div>為<div>元素設(shè)置一些初始屬性，在內(nèi)部樣式表中相關(guān)代碼寫法如下：<style>div{width:200px;height:200px;background-color:yellow}</style>這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設(shè)置為黃色。為<div>元素設(shè)置動畫效果，當(dāng)點(diǎn)擊按鈕時(shí)執(zhí)行該動畫內(nèi)容。$("#btn").click(function(){$("div").animate({ width:"400px", fontSize:"30px", opacity:0.25 },2000);});此段代碼表示，當(dāng)點(diǎn)擊id為“btn”的按鈕時(shí)激發(fā)<div>元素的動畫效果，在2秒的持續(xù)時(shí)間內(nèi)<div>元素的寬度從200像素變?yōu)?00像素，字體大小從默認(rèn)值變?yōu)?0像素，透明度從默認(rèn)值1變?yōu)?.25。完整代碼如例9-8所示?！纠?-8】jQuery簡單動畫效果【代碼說明】jQueryanimate()方法中長度的單位默認(rèn)為像素（px），因此本例中的寬度和字體大小直接寫數(shù)值并省略默認(rèn)單位，效果完全一樣。9.4.2改變元素位置jQueryanimate()方法也可以通過使用CSS屬性中的方位值left、right、top和bottom改變元素位置實(shí)現(xiàn)移動效果。由于這些屬性值均為相對值，而在HTML中所有元素的position屬性值均默認(rèn)為靜態(tài)（static）無法移動的，因此需要事先設(shè)置指定元素的position為relative、absolute或者fixed方能生效。以一個(gè)簡單的<div>元素為例，并為其配置測試按鈕，代碼如下：<buttonid="btn"type="button">開始移動</button><br><div>你好，jQuery動畫！</div>為<div>元素設(shè)置一些初始屬性，在內(nèi)部樣式表中相關(guān)代碼寫法如下：<style>div{width:100px;height:100px;background-color:green;color:white;position:relative}</style>這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設(shè)置為綠色，元素初始位置為相對位置。為<div>元素設(shè)置動畫效果，當(dāng)點(diǎn)擊按鈕時(shí)執(zhí)行該動畫內(nèi)容。$("#btn").click(function(){$("div").animate({ left:"+=200",top:"+=100" },2000);});});上述代碼表示當(dāng)點(diǎn)擊id為"btn"的按鈕時(shí)激發(fā)<div>元素的動畫效果。在2秒的持續(xù)時(shí)間內(nèi)<div>元素從初始位置向右平移200像素，并且同時(shí)向下垂直移動100像素。其中l(wèi)eft:"+=200"和top:"+=100"為相對值寫法，表示相對于初始位置的移動效果并省略了單位像素（px）。完整代碼如例9-9所示?！纠?-9】jQuery位置移動動畫效果9.4.3動畫隊(duì)列jQuery可以為多個(gè)連續(xù)的animate()方法創(chuàng)建動畫隊(duì)列，然后依次執(zhí)行隊(duì)列中的每一項(xiàng)動畫從而實(shí)現(xiàn)更加復(fù)雜的動畫效果。在同一個(gè)animate()方法中描述的多個(gè)動畫效果會同時(shí)發(fā)生，但在不同的animate()方法中描述的動畫效果會按照動畫隊(duì)列中的先后次序發(fā)生。以一個(gè)簡單的<div>元素為例，并為其配置測試按鈕，代碼如下：<buttonid="btn"type="button">開始移動</button><br><div>你好，jQuery動畫！</div>為<div>元素設(shè)置一些初始屬性，在內(nèi)部樣式表中相關(guān)代碼寫法如下：<style>div{width:100px;height:100px;color:white;background-color:purple;position:relative}</style>這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設(shè)置為紫色，元素初始位置為相對位置。為<div>元素設(shè)置多種動畫效果，當(dāng)點(diǎn)擊按鈕時(shí)依次執(zhí)行這些動畫內(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);});上述代碼表示，當(dāng)點(diǎn)擊id為“btn”的按鈕時(shí)激發(fā)<div>元素的動畫效果，具體效果如下：在第1、2秒的持續(xù)時(shí)間內(nèi)<div>元素從初始位置向右平移200像素，透明度變?yōu)?.25；在第3、4秒的持續(xù)時(shí)間內(nèi)<div>元素繼續(xù)向下垂直移動100像素，透明度變?yōu)?.5；在第5、6秒的持續(xù)時(shí)間內(nèi)<div>元素繼續(xù)向左平移200像素，透明度變?yōu)?.75；在第7、8秒的持續(xù)時(shí)間內(nèi)<div>元素繼續(xù)向上垂直移動100像素，透明度變?yōu)?。完整代碼如例9-10所示?！纠?-10】jQuery動畫隊(duì)列效果9.5jQuery方法鏈接jQuery允許在同一個(gè)元素上連續(xù)運(yùn)行多條jQuery命令，這種技術(shù)成為jQuery方法鏈接（Chaining）。對于同一個(gè)元素，如果有多個(gè)動作需要依次執(zhí)行，只需要將新的動作追加到上一個(gè)動作后面，形成一個(gè)方法鏈，無需每次重復(fù)查找選擇相同的元素。其基本語法如下：$(selector).action1().action2().action3()......actionN();也可以每個(gè)動作另起一行，寫法如下：$(selector).action1().action2().action3().......actionN();前面的action動作可以任意換行，只要最后一個(gè)動作加上分號表示完成即可。jQuery會自動過濾多余的空格和折行，并按照單行方法鏈接進(jìn)行執(zhí)行?！纠?-11】jQuery方法鏈接的應(yīng)用9.6jQuery停止動畫在jQuery中stop()方法可用于停止動畫或效果。其語法結(jié)構(gòu)如下：$(selector).stop([stopAll][,goToEnd]);該方法中selector參數(shù)位置可以是任意有效的選擇器。stop()方法中的兩個(gè)參數(shù)均為可選參數(shù)，參數(shù)具體解釋如下：stopAll：用于規(guī)定是否清除后續(xù)的所有動畫內(nèi)容，可填入布爾值。其默認(rèn)值為false，表示僅停止當(dāng)前動畫，允許動畫隊(duì)列中的后續(xù)動畫繼續(xù)執(zhí)行。goToEnd：用于規(guī)定是否立即完成當(dāng)前的動畫內(nèi)容，可填入布爾值。其默認(rèn)值為false，表示直接終止當(dāng)前的動畫效果?！纠?-12】jQuerystop()方法的應(yīng)用自定義一段動畫效果，并使用帶有不同參數(shù)內(nèi)容的stop()方法對比停止效果的不同之處?！敬a說明】本示例包含了一個(gè)測試段落元素<p>，在CSS內(nèi)部樣式表中為其設(shè)置初始樣式：寬和高均為200像素，背景顏色為橙色，字體大小為18像素。并為其自定義了三組動畫連續(xù)播放，分別是：寬度縮小至100像素、高度縮小至100像素、字體大小放大至30像素。設(shè)置了開始按鈕用于啟動動畫，當(dāng)點(diǎn)擊該按鈕則開始依次播放這三組動畫效果。并設(shè)置了三個(gè)停止按鈕，分別是stop()方法無參數(shù)形式、stop(true,false)以及stop(true,true)的參數(shù)形式。其中圖(a)為頁面初始加載效果，后面三幅圖均為開始播放第一段動畫（寬度減少）時(shí)使用stop()方法的停止效果，不同之處在于stop()的參數(shù)形式。圖(b)為使用了stop()方法的停止效果，由圖可見無參數(shù)的stop()方法僅停止了寬度減少這一個(gè)動畫內(nèi)容，后續(xù)減少高度與放大字體的動畫均正常執(zhí)行。圖(c)為使用stop(true,false)方法的停止效果，由圖可見該方法立即停止了后續(xù)的所有動畫，畫面定格在寬度減少的過程中。圖(d)為使用stop(true,true)方法的停止效果，由圖可見該方法立即停止了并完成了當(dāng)前第一段動畫，即將寬度減少至100像素，然后停止了后續(xù)的所有動畫內(nèi)容。9.7階段案例：動態(tài)下拉菜單特效9.7.1案例需求背景介紹：動態(tài)下拉菜單特效在很多高校、企業(yè)等單位的門戶網(wǎng)站上很受歡迎，當(dāng)用戶瀏覽網(wǎng)頁時(shí)將鼠標(biāo)擺放在菜單導(dǎo)航橫欄的一級欄目上，就會有各類動畫特效顯示出下方的二級菜單欄目列表。功能要求：使用jQuery制作一款動態(tài)下拉菜單特效。9.7.2界面設(shè)計(jì)本案例使用無序列表<ul>和列表項(xiàng)<li>制作一級菜單，并為其中部分列表項(xiàng)制作二級菜單列表。創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如DynamicMenu.html。在HTML5中使用<nav>元素聲明菜單區(qū)域，在其中嵌套<divid="navWrap">容器實(shí)現(xiàn)主要內(nèi)容居中并限制寬度，其內(nèi)部使用<ul>和<li>元素制作一級菜單，相關(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>使用<dl>和<dd>制作二級菜單列表項(xiàng)，開發(fā)者可以自行把它加入到一個(gè)或多個(gè)一級菜單的<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. <!--二級菜單-->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í)隱藏。本示例使用CSS外部樣式表規(guī)定頁面樣式。在本地css文件夾中創(chuàng)建menu.css文件，并在HTML5文件的<head>首尾標(biāo)簽中聲明對CSS文件的引用。相關(guān)HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>我的菜單</title>4. <linkrel="stylesheet"href="css/menu.css">5. </head>在CSS外部樣式表中為所有元素清除內(nèi)外邊距，相關(guān)CSS代碼如下：1. /*公共樣式*/2. *{3. margin:0;/*清除外邊距*/4. padding:0;/*清除內(nèi)邊距*/5. }為<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;/*文本居中對齊*/6. background-color:#0b6cb8;/*背景顏色藍(lán)色*/7. }8. /*菜單內(nèi)部容器*/9. #navWrap{10. width:1200px;/*寬度1200px*/11. margin:0auto;/*外邊距上下0左右auto*/12. }菜單中的列表容器<ul>和一級菜單列表項(xiàng)<li>元素設(shè)置樣式，相關(guān)CSS代碼如下：1. /*菜單列表樣式*/2. navul{3. list-style:none;/*清除裝飾點(diǎn)*/4. }5. /*一級菜單樣式*/6. navulli{7. float:left;/*左浮動*/8. }最后為菜單中的超鏈接<a>設(shè)置樣式，相關(guān)CSS代碼如下：1. /*超鏈接樣式*/2. nava{3. display:block;/*塊級元素*/4. width:160px;/*寬度160px*/5. color:white;/*文本顏色白色*/6. background-color:#0b6cb8;/*背景顏色藍(lán)色*/7. text-align:center;/*文本居中對齊*/8. text-decoration:none;/*清除下劃線效果*/9. padding:15px0;/*內(nèi)邊距上下15px左右0*/10. font-size:20px;/*字體大小20px*/11. }12. /*超鏈接樣式-鼠標(biāo)懸浮時(shí)*/13. nava:hover{14. background-color:#0a5894;/*背景顏色深藍(lán)色*/15. }此時(shí)CSS樣式設(shè)置就全部完成了。9.7.3邏輯實(shí)現(xiàn)下拉菜單效果需要使用到j(luò)Query的相關(guān)功能，因此首先在<head>標(biāo)簽中添加對于jQuery的調(diào)用。相關(guān)HTML5代碼修改后如下：1. <head>2. <metacharset="utf-8">3. <title>我的菜單</title>4. <linkrel="stylesheet"href="css/menu.css">5. <scriptsrc="