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

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

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

4、設置導航條內(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中導航條設置1二個簡單的菜單導航條示例代碼 這篇文章主要介紹了二個簡單的菜單導航條示例，需要的朋友可以參考下，使用代碼案例詳解導航條設置，簡單明了的代碼可以做到舉一反三效果2CSS實現(xiàn)導航條Tab切換的三種方法。