1、第一步，打開軟件Adobe Dreamweave CS6，創(chuàng)建一個(gè)新的HTML第二步，在工作區(qū)域body用標(biāo)簽 ul 和 li 輸入導(dǎo)航的內(nèi)容第三，編輯樣式CSS在標(biāo)簽之間寫入樣式表，第四，緊接上一步由于無線序列具有默認(rèn)樣式，前；然后就需要在style標(biāo)簽中用CSS對(duì)導(dǎo)航條的樣式進(jìn)行定義了，如下圖所示，書寫樣式的時(shí)候一定要注意寫在style標(biāo)簽里面 最后運(yùn)行html頁(yè)面，你就會(huì)看到如下圖所示的導(dǎo)航條，當(dāng)鼠標(biāo)放在某個(gè)導(dǎo)航上時(shí)，背景色會(huì)變成紅色；1修改導(dǎo)航分類下面的背景色，代碼如下skinboxbd linkbackground#000000 修改導(dǎo)航分類下面的圖片，代碼如下skinboxbd linkbackgroundurl圖片鏈接 2修改整個(gè)導(dǎo)航的背景色 skinboxbd menu；本人親測(cè)下面這些代碼是可以實(shí)現(xiàn)二級(jí)或多級(jí)導(dǎo)航菜單的 lt！ margin0pxpadding0px body overflowscrollfontsize12pxfontfamilyArial， Helvetica， sansserifcolor#000 a fontsize12pxfont；3在瀏覽器中打開頁(yè)面，可以看到已經(jīng)制作成了一個(gè)比較美觀的垂直導(dǎo)航欄4將鼠標(biāo)滑向垂直導(dǎo)航欄的列表項(xiàng)上，可以看到列表項(xiàng)顏色發(fā)生變化5也可以制作成水平導(dǎo)航欄，overflow hidden代碼的意思是超出高度和寬度的部分。

2、這里是導(dǎo)航所在的DIV容器 CSS代碼nav positionfixed * 絕對(duì)定位，fixed是相對(duì)于瀏覽器窗口定位 * top0 * 距離窗口頂部距離 * left0 * 距離窗口左邊的距離 * width100% * 寬度設(shè)置為100；設(shè)置3個(gè)導(dǎo)航nav，最右邊的nav設(shè)置class=right，然后設(shè)置nav的css邊距，寬，高，背景顏色便于我們看見，再設(shè)置一個(gè)float為右就會(huì)靠右排列，注意float時(shí)第一個(gè)會(huì)到右邊，所以設(shè)置第一個(gè)為最右邊的導(dǎo)航欄 代碼 lt！DOCTYPE；2通過列表制作ulul 3導(dǎo)航條的DIV樣式設(shè)置 4important實(shí)現(xiàn)對(duì)不同的瀏覽器設(shè)值，列表項(xiàng)樣式 5但這樣看起來還是沒有任何效果，只是顯示文本一樣為此，我們就需要在lili標(biāo)簽中嵌套a超鏈接標(biāo)簽，超鏈接標(biāo)簽。

3、aawidth100pxheight20pxbodersolid1px#f00定義搜索框的大小高度以及邊框顏色思路是放大鏡圖標(biāo)用個(gè)img寫進(jìn)來或者用其它標(biāo)簽用CSS做背景也可以下拉導(dǎo)航這種效果系統(tǒng)的Select下拉是最容易想到的，但是別想著；1登陸淘寶賣家中心，進(jìn)入淘寶店鋪裝修后臺(tái)頁(yè)面，鼠標(biāo)放在導(dǎo)航欄位置，出現(xiàn)編輯窗口，2點(diǎn)擊編輯，找到“顯示設(shè)置”，點(diǎn)擊后看到白框就是CSS自定義框3將我們上面提供的透明代碼復(fù)制進(jìn)去，導(dǎo)航欄就會(huì)透明顯示了 簡(jiǎn)單的淘寶；3將下面對(duì)應(yīng)的透明代碼復(fù)制進(jìn)去，導(dǎo)航欄就會(huì)透明顯示如圖A簡(jiǎn)單的淘寶新旺鋪?zhàn)远xCSS導(dǎo)航透明背景代碼skinboxbdbackground menulistbackgroundlinkbackground menubackground。

4、設(shè)置導(dǎo)航條內(nèi)的“所有分類”*所有分類背景色* allcats linkbackground repeat scroll 0 0 #00ad08 *所有分類文字樣式* allcats titlecolor#顏色代碼fontsize字號(hào)px 修改“所有寶貝”；所有代碼 ！DOCTYPE html html head meta charset=#34UTF8#34 title橫向?qū)Ш讲藛蝨itle style type=#34textcss#34 nav li backgroundcolor red padding 8px 15px float left liststyle；瀏覽器首頁(yè) * 網(wǎng)頁(yè)樣式 * body fontfamily Arial， sansserifmargin 0padding 0 container maxwidth 1024pxmargin 0 autopadding 20px h1 fontsize 36pxtextalign center；css中導(dǎo)航條設(shè)置1二個(gè)簡(jiǎn)單的菜單導(dǎo)航條示例代碼 這篇文章主要介紹了二個(gè)簡(jiǎn)單的菜單導(dǎo)航條示例，需要的朋友可以參考下，使用代碼案例詳解導(dǎo)航條設(shè)置，簡(jiǎn)單明了的代碼可以做到舉一反三效果2CSS實(shí)現(xiàn)導(dǎo)航條Tab切換的三種方法。