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

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

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

4、設(shè)置導(dǎo)航條內(nèi)的“所有分類”*所有分類背景色* allcats linkbackground repeat scroll 0 0 #00ad08 *所有分類文字樣式* allcats titlecolor#顏色代碼fontsize字號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；瀏覽器首頁 * 網(wǎng)頁樣式 * body fontfamily Arial， sansserifmargin 0padding 0 container maxwidth 1024pxmargin 0 autopadding 20px h1 fontsize 36pxtextalign center；css中導(dǎo)航條設(shè)置1二個簡單的菜單導(dǎo)航條示例代碼 這篇文章主要介紹了二個簡單的菜單導(dǎo)航條示例，需要的朋友可以參考下，使用代碼案例詳解導(dǎo)航條設(shè)置，簡單明了的代碼可以做到舉一反三效果2CSS實現(xiàn)導(dǎo)航條Tab切換的三種方法。