電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作Design

and

Creation

of

E-commerce

WebPages

交互導(dǎo)航下拉菜單應(yīng)用主講人：傅俊THISIS導(dǎo)入：基礎(chǔ)任務(wù)分析創(chuàng)建交互下拉菜單結(jié)構(gòu)及樣式美化下拉菜單樣式Content導(dǎo)入-基礎(chǔ)任務(wù)分析本次任務(wù)是以商品展示頁面為基礎(chǔ)完成側(cè)邊欄導(dǎo)航后，創(chuàng)建鼠標(biāo)交互下拉式菜單。通過任務(wù)實(shí)施來進(jìn)一步掌握網(wǎng)頁元素內(nèi)容結(jié)構(gòu)和表現(xiàn)的分離以及定位布局的應(yīng)用。創(chuàng)建交互下拉菜單結(jié)構(gòu)及樣式

1.創(chuàng)建下拉菜單的結(jié)構(gòu)

在實(shí)際頁面中除了側(cè)邊欄導(dǎo)航外，本身的水平導(dǎo)航欄往往具有二級(jí)類目需要通過下拉菜單來加以實(shí)習(xí)。這里以“安廚優(yōu)選”這一導(dǎo)航欄目為例來創(chuàng)建相應(yīng)的下拉菜單。通過增加<div>結(jié)構(gòu)，在結(jié)構(gòu)中運(yùn)用超鏈接文本完成一個(gè)小的下拉菜單內(nèi)容。2.設(shè)置下拉菜單的樣式注意：將父元素li設(shè)為相對(duì)定位，下拉菜單為絕對(duì)定位。而下拉菜單默認(rèn)狀態(tài)為不顯示，則采用display:none;來設(shè)置。創(chuàng)建交互下拉菜單結(jié)構(gòu)及樣式

3.設(shè)置通過鼠標(biāo)交互下拉菜單

通過display:none;與display:block;的切換來實(shí)現(xiàn)下拉菜單部分的顯示。

這里采用了堆疊次序z-index，這是在使用定位布局時(shí)，可能會(huì)出現(xiàn)盒子重疊的情況，通過z-index來控制盒子的前后次序，也就是z軸。美化下拉菜單樣式1.考慮對(duì)下拉菜單的文本結(jié)構(gòu)進(jìn)行美化，將超鏈接的內(nèi)聯(lián)結(jié)構(gòu)轉(zhuǎn)換為塊結(jié)構(gòu)，接著考慮和側(cè)邊欄導(dǎo)航類似，設(shè)置文本、邊距以及超鏈接偽類的樣式

2.考慮為下拉菜單增加陰影效果box-shadow向框添加一個(gè)或多個(gè)陰影。該屬性幾乎可以完成任何陰影效果。該屬性是由逗號(hào)分隔的陰影列表，每個(gè)陰影由2-4個(gè)長(zhǎng)度值、可選的顏色值以及可選的inset關(guān)鍵詞來規(guī)定。省略長(zhǎng)度的值是0。電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作Design

and

Creationof

E-commerce

webp