1首先創(chuàng)建一個(gè)1x6的表格，參數(shù)為border=0 cellspacing=3 cellpadding=02在這個(gè)表格的每個(gè)單元格內(nèi)分別插入一個(gè)表格，寬度和高度設(shè)為100%3建立一個(gè)CSS樣式up和down代碼如下styleupborder4 outset royal。

2然后點(diǎn)擊導(dǎo)航欄的“窗口”，在其子菜單中會(huì)看到“屬性”選項(xiàng)，可以點(diǎn)擊一下3這時(shí)候就發(fā)現(xiàn)頁面底部有工具欄面板彈出來了將光標(biāo)定位到某個(gè)標(biāo)簽，下面屬性欄就顯示某個(gè)標(biāo)簽的相關(guān)屬性 4點(diǎn)擊屬性面板右側(cè)的菜單圖標(biāo)。

添加樣式為 ul li floatleft width80px height30px background#900 lineheight30px textaligncenter marginright2px color#fff 效果，第六，如果需要為導(dǎo)航添加鏈接，同時(shí)獲得鼠標(biāo)滑。

#39Microsoft Yahei#39，宋體，sansserif，tahoma fontweight bold lineheight 30px color # cursor pointer。

在此設(shè)置一個(gè)導(dǎo)航條的導(dǎo)航條背景色為綠色，將代碼改為00FF00，即可附顏色代碼1白顏色#FFFFFF2紅顏色#FF00003綠顏色#00FF004藍(lán)顏色#0000FF5牡丹紅#FF00FF6青顏色#00FFFF7黃顏色#FFFF008黑顏色#0000009海顏藍(lán)#70DB。

想用DW做出導(dǎo)航欄必熟知div+css，基本代碼ul#navwidth100%height60pxbackground#00A2CAmargin0autoul#navlidisplayinlineheight60pxul#navliadisplayinlineblockpadding020pxheight60pxline。

我們需要實(shí)現(xiàn)的效果主要有兩點(diǎn) 1點(diǎn)擊側(cè)邊豎滑動(dòng)條的圓點(diǎn)時(shí)，能跳轉(zhuǎn)定位到對(duì)應(yīng)的板塊區(qū)域點(diǎn)擊箭頭圓點(diǎn)時(shí)回到頂部 2滾動(dòng)屏幕時(shí)，瀏覽到某個(gè)板塊時(shí)，側(cè)邊欄圓點(diǎn)導(dǎo)航的圓點(diǎn)也會(huì)相應(yīng)被選中我們先來實(shí)現(xiàn)第一個(gè)。

首先打開SublimeText軟件，新建一個(gè)html頁面，并且在html頁面中準(zhǔn)備好html結(jié)構(gòu)，如下圖所示 接下來我們?cè)趆tml的body結(jié)構(gòu)里添加導(dǎo)航條的內(nèi)容，如下圖所示 然后就需要在style標(biāo)簽中用CSS對(duì)導(dǎo)航條的樣式進(jìn)行定義了，如下圖所示。

01首先打開SublimeText軟件，新建一個(gè)html頁面，在html頁面中準(zhǔn)備好html結(jié)構(gòu)，如下圖所示02接下來，我們?cè)趆tml的body結(jié)構(gòu)中添加導(dǎo)航欄的內(nèi)容，如下圖所示03然后需要在style標(biāo)簽中用CSS定義導(dǎo)航條的樣式，如下圖所示寫。

兄弟，你要做網(wǎng)頁，代碼肯定是要學(xué)的 不懂可以私 相信我，慢慢來不難的，我?guī)湍銓懞昧耍阒恍枰薷淖约合矚g的樣式即可 并且所有要修改樣式的地方我都幫你備注好了 您只需要把 這堆東西放入兩個(gè)標(biāo)簽之間的中間 ul。

一樣設(shè)為紅色 * allcats linkbackgroundred * 到這里，發(fā)覺右邊的顏色還沒有變呢，好的，接著下一步 * * 3導(dǎo)航條整個(gè)分類段背景色，還是要設(shè)為紅色，整體布局好看些 * skinboxbd menu。

并設(shè)置大小為360px使用畫筆，在導(dǎo)航條上方中心畫一個(gè)圓形區(qū)域，設(shè)置圖層透明度為65%自己可斟酌減少或增加，選擇橡皮擦工具擦去不屬于導(dǎo)航條的發(fā)光區(qū)域，剩下要做的就是添加菜單按鈕自行設(shè)計(jì)，使用白色或灰色即可。

很多小伙伴學(xué)習(xí)了一段時(shí)間的HTML和css，就想自己動(dòng)手試試制作導(dǎo)航條菜單，不過卻沒有思路，今天小編我就來分享一下HTML和css制作導(dǎo)航條的實(shí)例，大家可以參考參考如圖，制作導(dǎo)航條菜單一般是用一個(gè)div嵌套u(yù)l和li標(biāo)簽，然后li。

width960px height28pxbackground# d1 ahover displayblockbackgroundurlimagesforumMenuBgjpg 0 0 repeatx 這是我以前寫的導(dǎo)航代碼，圖片和顏色你自己改下，希望能夠幫到你。

用CSS控制的下拉菜單，在各個(gè)瀏覽器中表現(xiàn)的不夠完美，最佳的方法是使用jQuery來制作，代碼如下，加了一個(gè)緩動(dòng)的效果HTML部分 菜單零 菜單一 子菜單 子菜單 子菜單 子菜單。

lt！One step to installing this script lt！1 Simply add the below to your BODY lt！ For this script， visit。