（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目八電子課件

1、YCF正版可修改PPT（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目八電子課件CSS 3創(chuàng)建網(wǎng)頁菜單項(xiàng)目八授課教師：姓名WEB前端設(shè)計(jì)基礎(chǔ)Contents1.項(xiàng)目描述2.知識準(zhǔn)備3.項(xiàng)目實(shí)施4.項(xiàng)目拓展5.項(xiàng)目小結(jié)6.技能訓(xùn)練一 項(xiàng)目描述本項(xiàng)目學(xué)習(xí)要點(diǎn)用CSS 3美化項(xiàng)目列表；用CSS 3制作網(wǎng)頁菜單。用CSS 3美化超鏈接；二 知識準(zhǔn)備CSS 3美化超鏈接；CSS 3美化項(xiàng)目列表。CSS 3美化超鏈接1.改變超鏈接的基本樣式偽類是CSS本身定義的一種類，使用偽類可以定義超鏈接在不同狀態(tài)下的樣式效果。超鏈接的偽類有四種狀態(tài)，詳細(xì)信息如表所示。想要定義未被訪問的超鏈接樣式，可以通過a:link來實(shí)現(xiàn)，要設(shè)置被

2、訪問過的超鏈接樣式，可以通過a:visited來實(shí)現(xiàn)，要設(shè)置鼠標(biāo)經(jīng)過和激活時(shí)的樣式用a:hover和a:active來實(shí)現(xiàn)。屬性說明a:link定義a元素未訪問時(shí)的樣式a:visited定義a元素訪問后的樣式a:hover定義鼠標(biāo)經(jīng)過顯示的樣式a:active定義鼠標(biāo)單擊激活時(shí)的樣式CSS 3美化超鏈接1.改變超鏈接的基本樣式a:linkCSS樣式a:visitedCSS樣式a:hoverCSS樣式a:activedCSS樣式定義這四個(gè)偽類，必須按照“l(fā)ink、visited、hover、active”的順序進(jìn)行，不然瀏覽器可能無法正常顯示這4種樣式。格式為：CSS 3美化超鏈接2.設(shè)置帶有提

3、示信息的超鏈接超鏈接的文字比較簡潔，有時(shí)候不能表達(dá)這個(gè)超鏈接的含義，通常是為超鏈接添加上一些介紹性信息，即提示信息。要設(shè)置這樣的信息，可以通過超鏈接信息的描述標(biāo)記title來實(shí)現(xiàn)，title屬性的值為提示的內(nèi)容。格式如下：CSS 3美化超鏈接2.設(shè)置帶有提示信息的超鏈接【例8-1】超鏈接基本樣式和提示信息實(shí)例，代碼如下所示（示例文件8-1.html）。超鏈接基本樣式和提示信息#nav1padding:20px; acolor:#545454;text-decoration: none;margin:3px;padding: 3px;a:linkcolor:#545454;a:visitedco

4、lor:#545454;a:hovercolor:#f60;text-decoration: underline;a:activecolor:#f63;首頁|產(chǎn)品展示|售后服務(wù)|聯(lián)系我們|關(guān)于我們在chrome瀏覽器中預(yù)覽CSS 3美化超鏈接3.設(shè)置超鏈接的背景圖超鏈接不僅可以使用文字，也可是使用背景圖片加文字和背景顏色加文字的形式來顯示，這樣的超鏈接會(huì)更加精美。超鏈接添加背景圖片，使用background-image來實(shí)現(xiàn)，超鏈接添加背景顏色，使用background-color來實(shí)現(xiàn)。CSS 3美化超鏈接3.設(shè)置超鏈接的背景圖【例8-2】設(shè)置超鏈接的背景顏色實(shí)例，代碼如下所示（示例文件8-

5、2.html）。.navmargin:20px;font-size:14px;font-family: 微軟雅黑;a color:#333;text-decoration:none;display: block;float: left;text-align: center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-left:6px;a:hover background-color:#F60; color:#fff在chrome瀏覽器中預(yù)覽 首頁 關(guān)于我們 產(chǎn)品展示 售后服務(wù) 聯(lián)系我

6、們 CSS 3美化超鏈接4.設(shè)置超鏈接的按鈕效果為了增強(qiáng)超鏈接的視覺效果，會(huì)將超鏈接模擬成表單按鈕，當(dāng)鼠標(biāo)指針移動(dòng)到一個(gè)超鏈接上的時(shí)候，超鏈接的文本或者圖片就會(huì)像被按下，有種凹陷的效果。其實(shí)現(xiàn)方式是利用CSS中的a:hover，當(dāng)鼠標(biāo)經(jīng)過連接時(shí)，鏈接向下、向右各移一個(gè)像素，這樣顯示效果就想按鈕按下了一樣。CSS 3美化超鏈接4.設(shè)置超鏈接的按鈕效果【例8-3】超鏈接按鈕效果實(shí)例，代碼如下所示（示例文件8-3.html）。#navmargin-top:10px; padding:20px;border:1px red solid;afont-family: 微軟雅黑;text-align: ce

7、nter;margin:3px;a:link,a:visitedcolor:#ac2300;padding:4px 10px 4px 10px;background-color: #ccd8db;text-decoration: none;border-top:1px solid #eeeeee;border-left:1px solid #eeeeee;border-bottom:1px solid #717171;border-right:1px solid #717171;a:hovercolor:#821821;padding:5px 8px 3px 12px;background-c

8、olor: #e2c4c9;text-decoration: none;border-top:1px solid #717171;border-left:1px solid #717171;border-bottom:1px solid #eeeeee;border-right:1px solid #eeeeee;首頁關(guān)于我們品牌特賣產(chǎn)品展示聯(lián)系我們在chrome瀏覽器中預(yù)覽CSS 3美化超鏈接5.設(shè)置超鏈接的鼠標(biāo)樣式想要在網(wǎng)頁中實(shí)現(xiàn)鼠標(biāo)樣式改變的效果，可以通過CSS屬性設(shè)置來實(shí)現(xiàn)。CSS3中鼠標(biāo)箭頭樣式可以通過cursor屬性來實(shí)現(xiàn)。cursor屬性有17個(gè)屬性值，對應(yīng)鼠標(biāo)的17個(gè)樣式，常用

9、如表所示。當(dāng)鼠標(biāo)經(jīng)過超鏈接是可以使用這些鼠標(biāo)樣式，達(dá)到相應(yīng)的效果。cursor值描述url需使用的自定義光標(biāo)的default默認(rèn)光標(biāo)（通常是一個(gè)箭頭）auto默認(rèn)，瀏覽器設(shè)置的光標(biāo)crosshair光標(biāo)呈現(xiàn)為十字線pointer光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）move此光標(biāo)指示某對象可被移動(dòng)e-resize此光標(biāo)指示矩形框的邊緣可被向右（東）移動(dòng)ne-resize此光標(biāo)指示矩形框的邊緣可被向上及向右移動(dòng)（北/東）nw-resize此光標(biāo)指示矩形框的邊緣可被向上及向左移動(dòng)（北/西）n-resize此光標(biāo)指示矩形框的邊緣可被向上（北）移動(dòng)se-resize此光標(biāo)指示矩形框的邊緣可被向下及向右移動(dòng)

10、（南/東）sw-resize此光標(biāo)指示矩形框的邊緣可被向下及向左移動(dòng)（南/西）s-resize此光標(biāo)指示矩形框的邊緣可被向下移動(dòng)（南）w-resize此光標(biāo)指示矩形框的邊緣可被向左移動(dòng)（西）text此光標(biāo)指示文本wait此光標(biāo)指示程序正忙（通常是一只表或沙漏）help此光標(biāo)指示可用的幫助（通常是一個(gè)問號或一個(gè)氣球）CSS 3美化項(xiàng)目列表1.美化無序列表和有序列表在以前的項(xiàng)目學(xué)習(xí)中，有序列表和無序列表的列表項(xiàng)符號都是使用type屬性來定義的，type屬性值可以為“disc（默認(rèn)值是實(shí)心圓）”、“circle（空心圓）”和“square（實(shí)心正方形）”，這是在標(biāo)簽屬性中定義的。在CSS 3中，不管

11、是有序列表還是無序列表，都使用list-style-type屬性來定義列表符號，格式如下：list-style-type:屬性值;list-style-type屬性值如表所示。list-style-type屬性值說 明disc默認(rèn)值，實(shí)心圓“”circle空心圓“”square實(shí)心正方形“”none不使用任何符號list-style-type屬性值說明decimal默認(rèn)值，數(shù)字1、2、3lower-roman小寫羅馬數(shù)字i、ii、iiiupper-roman大寫羅馬數(shù)字I、II、IIIlower-alpha小寫英文字母a、b、cupper-alpha大寫英文字母A、B、Cnone不使用任何符號

12、CSS 3美化項(xiàng)目列表1.美化無序列表和有序列表【例8-4】美化無序列表和有序列表實(shí)例，代碼如下所示（示例文件8-4.html）。*margin:0px;padding:0px;font-family: 微軟雅黑;font-size:12px;.big01,.big02width:320px;border:1px red dashed;margin:10px 0 0 10px;pmargin:3px 0 0 5px;color:3ef;font-size: 14px;.big01 ulmargin-left:40px; list-style-type: disc;liline-height:

13、20px;.big02 olmargin-left:40px;CSS 3美化項(xiàng)目列表1.美化無序列表和有序列表【例8-4】美化無序列表和有序列表實(shí)例，代碼如下所示（示例文件8-4.html）。無序列表政府工作報(bào)告再提人工智能解答“四問”谷歌發(fā)布全球首個(gè)72量子比特通用量子計(jì)算機(jī)2018家博會(huì)格力將重磅發(fā)布節(jié)能“黑科技.全球首款“4D吃糖”設(shè)備：橋本環(huán)奈喂你吃糖華為CEO透露:今年華為會(huì)發(fā)布新款智能手表有序列表政府工作報(bào)告再提人工智能解答“四問”谷歌發(fā)布全球首個(gè)72量子比特通用量子計(jì)算機(jī)2018家博會(huì)格力將重磅發(fā)布節(jié)能“黑科技.全球首款“4D吃糖”設(shè)備：橋本環(huán)奈喂你吃糖華為CEO透露:今年華為會(huì)

14、發(fā)布新款智能手表 CSS 3美化項(xiàng)目列表1.美化無序列表和有序列表【例8-4】美化無序列表和有序列表實(shí)例，代碼如下所示（示例文件8-4.html）。在chrome瀏覽器中預(yù)覽CSS 3美化項(xiàng)目列表2.制作圖片列表在CSS 3中l(wèi)ist-style-image屬性用來定義有序或無序列表項(xiàng)標(biāo)志的圖像，可以將項(xiàng)目符號替換成任意的圖像，格式如下：list-style-image: none | url;list-style-image屬性值如表所示。list-style-image屬性值說 明none不指定圖像url使用絕對路徑或相對路徑指定圖像CSS 3美化項(xiàng)目列表2.制作圖片列表使用圖像作為項(xiàng)目符

15、號時(shí)，圖像通常顯示在列表的外部，在CSS 3中，圖像相對于列表項(xiàng)內(nèi)容的放置位置可以使用list-style-position屬性進(jìn)行控制，格式如下：list-style-position:outside|inside;list-style-position屬性值如表所示。屬性值說 明outside列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對齊inside列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對齊CSS 3美化項(xiàng)目列表2.制作圖片列表【例8-5】制作圖片列表實(shí)例，代碼如下所示（示例文件8-5.html）。*margin:0px;padding:0px;font-family: 微軟

16、雅黑;font-size:12px;.big01width:320px;border:1px red dashed;margin:10px 0 0 10px;pmargin:3px 0 0 5px;color:3ef;font-size: 14px;.big01 ulmargin-left:40px;liline-height: 20px;list-style-image: url(images/arrow_right.png);.poslist-style-position: inside;CSS 3美化項(xiàng)目列表2.制作圖片列表【例8-5】制作圖片列表實(shí)例，代碼如下所示（示例文件8-5.ht

17、ml）。圖片列表政府工作報(bào)告再提人工智能解答“四問”谷歌發(fā)布全球首個(gè)72量子比特通用量子計(jì)算機(jī)2018家博會(huì)開展在即 格力將重磅發(fā)布節(jié)能全球首款“4D吃糖”設(shè)備今年華為會(huì)發(fā)布新款智能手表CSS 3美化項(xiàng)目列表2.制作圖片列表【例8-5】制作圖片列表實(shí)例，代碼如下所示（示例文件8-5.html）。在chrome瀏覽器中預(yù)覽CSS 3美化項(xiàng)目列表3.列表的復(fù)合屬性上面已經(jīng)學(xué)習(xí)了使用list-style-type定義列表的項(xiàng)目符號、使用list-style-image定義列表的圖片符號和使用list-style-position定義圖片的顯示位置，其實(shí)在對項(xiàng)目列表進(jìn)行操作時(shí)，可以直接使用一個(gè)復(fù)合屬性

18、list-style來定義，格式如下： list-style:style; 其中style可以為如表所示屬性值的字符串（最多可以有三個(gè)，任意次序）。屬性值說 明類型list-style-type屬性使用的類型值的任意范圍圖像list-style-position屬性使用的圖像值的任意范圍位置list-style-position屬性使用的位置值的任意范圍CSS 3美化項(xiàng)目列表3.列表的復(fù)合屬性【例8-6】列表的復(fù)合屬性實(shí)例，代碼如下所示（示例文件8-6.html）。*margin:0px;padding:0px;font-family: 微軟雅黑;font-size:12px;.big01wi

19、dth:320px;border:1px red dashed;margin:10px 0 0 10px;pmargin:3px 0 0 5px;color:3ef;font-size: 14px;.big01 ulmargin-left:40px;liline-height: 20px;list-style: none;.poslist-style:inside url(images/arrow_right.png);CSS 3美化項(xiàng)目列表3.列表的復(fù)合屬性【例8-6】列表的復(fù)合屬性實(shí)例，代碼如下所示（示例文件8-6.html）。列表的復(fù)合屬性政府工作報(bào)告再提人工智能解答“四問”谷歌發(fā)布全球

20、首個(gè)72量子比特通用量子計(jì)算機(jī)2018家博會(huì)開展在即格力將重磅發(fā)布全球首款“4D吃糖”設(shè)備今年華為會(huì)發(fā)布新款智能手表CSS 3美化項(xiàng)目列表3.列表的復(fù)合屬性【例8-6】列表的復(fù)合屬性實(shí)例，代碼如下所示（示例文件8-6.html）。在chrome瀏覽器中預(yù)覽三 項(xiàng)目實(shí)施制作垂直導(dǎo)航菜單；制作水平導(dǎo)航菜單。制作垂直導(dǎo)航菜單此項(xiàng)目學(xué)習(xí)了CSS 3美化超鏈接和美化項(xiàng)目列表的相關(guān)知識，下面通過制作垂直導(dǎo)航菜單和水平導(dǎo)航菜單的項(xiàng)目，來鞏固提高所學(xué)的知識要點(diǎn)。*margin:0; padding:0; font-size:14px;acolor:#333;text-decoration:none.navma

21、rgin-left: 50px;.nav lilist-style-type: none;.nav li a display:block; text-align: center;height:30px; line-height:30px; width:120px; background-color:#efefef; margin-bottom:1px;.nav li a:hover background-color:#F60; color:#fff設(shè)置了無序列表項(xiàng)的項(xiàng)目符號為無。設(shè)置了類名為“nav”的ul無序列表左邊距為50像素。設(shè)置了所有a標(biāo)簽的顏色為#333、清除了a鏈接的下劃線。制作垂

22、直導(dǎo)航菜單啟動(dòng)Sublime程序，新建并保存文件名稱為8-7.html。第一步第二步Head標(biāo)簽內(nèi)的CSS代碼輸入如下：設(shè)置了中的a標(biāo)簽為塊狀元素、文本居中對齊、高度為30像素、寬度為120像素、行高為30像素、背景顏色為#efefef，第16行利用下邊距設(shè)置了兩個(gè)a標(biāo)簽之間的間距為1像素。設(shè)置了瀏覽器所有元素的外邊距為0像素、內(nèi)邊距為0像素、網(wǎng)頁文字大小為14像素。設(shè)置了當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽上的時(shí)候，a標(biāo)簽的背景顏色為#f60、文字顏色為白色。制作垂直導(dǎo)航菜單第三步body標(biāo)簽內(nèi)的代碼輸入如下： 首頁 關(guān)于我們 產(chǎn)品展示 售后服務(wù) 聯(lián)系我們 創(chuàng)建了一個(gè)類名為“nav”的ul無序列表，列表中有五

23、個(gè)li列表項(xiàng)，在列表項(xiàng)中使用a標(biāo)簽創(chuàng)建超鏈接菜單。制作垂直導(dǎo)航菜單再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步制作水平導(dǎo)航菜單水平導(dǎo)航菜單的制作只需要將上個(gè)項(xiàng)目實(shí)施中垂直菜單改為水平菜單，關(guān)鍵的步驟是將無序列表ul的寬度（width）去掉，li標(biāo)簽進(jìn)行左浮動(dòng)（float:left;）。*margin:0; padding:0; font-size:14px;acolor:#333;text-decoration:none;.navlist-style:none; height:30px; border-bottom:10px solid #F

24、60; margin-top:20px; padding-left:50px;制作水平導(dǎo)航菜單啟動(dòng)Sublime程序，新建并保存文件名稱為8-8.html。第一步第二步Head標(biāo)簽內(nèi)的CSS代碼輸入如下：設(shè)置了瀏覽器所有元素的外邊距為0像素、內(nèi)邊距為0像素、網(wǎng)頁文字大小為14像素。設(shè)置了所有a標(biāo)簽的顏色為#333、清除了a鏈接的下劃線。設(shè)置了類名為“nav”的ul無序列表項(xiàng)的列表樣式為無、高度為30像素、下邊線為10像素的#F60顏色實(shí)線、外上邊距為20像素、左內(nèi)邊距為50像素。制作水平導(dǎo)航菜單第二步.nav lifloat:left;.nav li adisplay:block; heigh

25、t:30px;text-align:center; line-height:30px; width:80px; background:#efefef; margin-left:1px;.nav li a:hoverbackground:#F60;color:#fff; 設(shè)置了類名為“nav”中的li標(biāo)簽向左浮動(dòng)，無列表樣式。設(shè)置了類名為“nav”中的li標(biāo)簽向左浮動(dòng)，無列表樣式。設(shè)置了當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽上的時(shí)候，a標(biāo)簽的背景顏色為#F60、文字顏色為白色。設(shè)置了當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽上的時(shí)候，a標(biāo)簽的背景顏色為#F60、文字顏色為白色。制作水平導(dǎo)航菜單第三步body標(biāo)簽內(nèi)的HTML代碼輸入如下：

26、首頁 關(guān)于我們 產(chǎn)品展示 售后服務(wù) 聯(lián)系我們 創(chuàng)建了一個(gè)類名為“nav”的ul無序列表，列表中有五個(gè)li列表項(xiàng)，在列表項(xiàng)中使用a標(biāo)簽創(chuàng)建超鏈接菜單。制作水平導(dǎo)航菜單再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步四 項(xiàng)目拓展在上面的項(xiàng)目實(shí)施中，分別學(xué)習(xí)了垂直、水平導(dǎo)航菜單的制作，但在實(shí)際運(yùn)用中網(wǎng)頁導(dǎo)航菜單不僅有水平菜單，也有垂直子菜單，下面就如何制作一個(gè)完善的導(dǎo)航菜單進(jìn)行項(xiàng)目拓展。項(xiàng)目拓展既結(jié)合了水平導(dǎo)航菜單和垂直下拉子菜單的綜合應(yīng)用，還利用CSS 3動(dòng)畫屬性的設(shè)置，實(shí)現(xiàn)了下拉子菜單的動(dòng)畫效果。四 項(xiàng)目拓展啟動(dòng)Sublime程序，新建并保存文件名

27、稱為8-9.html。第一步第二步Head標(biāo)簽內(nèi)的CSS代碼輸入如下： * margin: 0;padding: 0;box-sizing: border-box;font-family: 微軟雅黑; h3 text-align: center;color: #f60;margin: 10px auto; ul list-style: none; nav height: 40px;margin: 0px auto;background-color: #3498DB;text-align: center; /*Flex 布局，請查閱其它資料*/ .main display:flex;justif

28、y-content: center; .main li margin: 0 2%; .main li a width: 100px;height:40px;border-left:2px solid #3498DB;設(shè)置了瀏覽器所有元素的外邊距為0像素、內(nèi)邊距為0像素、所有元素的任何內(nèi)邊距和邊框都將在已經(jīng)設(shè)定的寬度和高度內(nèi)進(jìn)行繪制、網(wǎng)頁文字字體為微軟雅黑。設(shè)置了無序列表的列表樣式為無。設(shè)置了標(biāo)簽名為“nav”的高度為40像素、上下外邊距為0像素和左右外邊距為自動(dòng)（此設(shè)置實(shí)現(xiàn)了元素的水平居中）、背景顏色為#3498DB、文本水平居中。設(shè)置了類名為“main”的布局方式為彈性布局、位于彈性布局盒子

29、中心。導(dǎo)航菜單的基本樣式設(shè)置設(shè)置了類名為“main”中的li標(biāo)簽左右兩側(cè)留出2%的邊距。設(shè)置了中的a標(biāo)簽高度為40像素、寬度為100像素、左邊框?yàn)?像素的#3498DB顏色實(shí)線。四 項(xiàng)目拓展第二步a text-decoration: none; color: #ffe; text-transform: capitalize; display: block; padding: 10px 15px; font-size: 16px; transition: background-color 0.5s ease-in-out; a:hover background-color: #631818; .

30、drop li opacity: 0; transform-origin: top center; .drop li a background-color: #ea5b5b; padding: 10px 0; margin-bottom: 1px; width:98px; 設(shè)置了a標(biāo)簽的樣式：鏈接下劃線為無、文字顏色為#ffe、控制文本的大小寫為每個(gè)單詞以大寫字母開頭。設(shè)置了a標(biāo)簽的背景顏色的過渡效果為：在0.2s的時(shí)間里背景顏色淡入淡出（transition: background-color 0.5s ease-in-out;），其中background-color是要過渡的屬性、0.5s

31、是過渡時(shí)間、ease-in-out是過渡函數(shù)。設(shè)置了當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽上的時(shí)候，a標(biāo)簽的背景顏色為#631818。設(shè)置了a標(biāo)簽的顯示方式為塊狀，上下內(nèi)邊距為10像素、左右內(nèi)邊距為15像素，文字大小為16像素。設(shè)置了類名為“drop”的ul無序列表中l(wèi)i列表項(xiàng)的透明度為0、允許從x軸和y軸的上面和中心更改元素的位置。設(shè)置了類名為“drop”的ul無序列表中l(wèi)i列表項(xiàng)下的a標(biāo)簽（水平菜單的垂直子菜單）的背景顏色為#ea5b5b，上下內(nèi)邊距為10像素左右內(nèi)邊距為0像素、下外邊距為1像素、子菜單a標(biāo)簽的寬度為98像素，因?yàn)榍懊娑x過a標(biāo)簽的寬度為100像素，左邊框?yàn)?像素，為了水平菜單和垂直菜單寬度能

32、夠?qū)R，所以子菜單寬度為98像素。導(dǎo)航菜單的基本樣式設(shè)置四 項(xiàng)目拓展第二步/*- 下拉動(dòng)畫 -*/.main li:hover .drop li:first-of-type animation: drop 0.3s ease-in-out forwards; animation-delay: 0.2s; .main li:hover .drop li:nth-of-type(2) animation: drop 0.3s ease-in-out forwards; animation-delay: 0.4s; .main li:hover .drop li:nth-of-type(3) ani

33、mation: drop 0.3s ease-in-out forwards; animation-delay: 0.6s; .main li:hover .drop li:last-of-type animation: drop 0.3s ease-in-out forwards; animation-delay: 0.8s; 分別設(shè)置了子菜單列表第一項(xiàng)、第二項(xiàng)、第三項(xiàng)和最后一項(xiàng)的動(dòng)畫過渡規(guī)則、過渡時(shí)間、過渡函數(shù)和動(dòng)畫過渡之外的狀態(tài)為開始狀態(tài)（animation: drop 0.3s ease-in-out forwards;），這也是animation屬性的復(fù)合屬性設(shè)置。animation

34、-delay設(shè)置了不同列表項(xiàng)的不同動(dòng)畫延時(shí)。子菜單下拉動(dòng)畫的實(shí)現(xiàn)四 項(xiàng)目拓展第二步keyframes drop /*動(dòng)畫實(shí)現(xiàn)的規(guī)則*/ 0% opacity: 0; transform: scale(2); 100% opacity: 1; transform: scale(1); 定義了開始時(shí)的動(dòng)畫狀態(tài)，透明度為0（opacity: 0;）、縮放到2倍大?。╰ransform: scale(2);）。定義了結(jié)束時(shí)的動(dòng)畫狀態(tài)，透明度為1（opacity: 1;）、縮放到本身大?。╰ransform: scale(1);）。動(dòng)畫實(shí)現(xiàn)的規(guī)則定義四 項(xiàng)目拓展第三步 下拉導(dǎo)航菜單的制作 首頁 招賢納士 業(yè)界資訊 技術(shù)支持 關(guān)于我們 新聞資訊 招賢納士 業(yè)界資訊 技術(shù)支持 關(guān)于我們 body標(biāo)簽內(nèi)的HTML代碼輸入如下：創(chuàng)建了水平菜單項(xiàng)“首頁”及“首頁”下的四個(gè)子菜單項(xiàng)。HTML代碼部分主要是用ul無序列表的列表項(xiàng)實(shí)現(xiàn)了水平菜單，在水平菜單列表項(xiàng)中又使用ul無序列表實(shí)現(xiàn)垂直下拉子菜單的功能。四 項(xiàng)目拓展第三步 團(tuán)隊(duì)建設(shè) 招賢納士 業(yè)界資訊 技術(shù)支持 關(guān)于我們 關(guān)于我們 招賢納士 業(yè)界