第7章使用CSS制作網(wǎng)站導(dǎo)航

1、第第7 7章章 使用使用CSSCSS制作網(wǎng)站導(dǎo)航制作網(wǎng)站導(dǎo)航網(wǎng)站導(dǎo)航（網(wǎng)站導(dǎo)航（Navigation）是一個(gè)通稱，方便用戶瀏覽網(wǎng)）是一個(gè)通稱，方便用戶瀏覽網(wǎng)站信息和獲取網(wǎng)站服務(wù)。它的基本作用就是讓用戶在瀏覽網(wǎng)站信息和獲取網(wǎng)站服務(wù)。它的基本作用就是讓用戶在瀏覽網(wǎng)站過(guò)程中不致迷失，并且可以方便地回到網(wǎng)站首頁(yè)以及其他站過(guò)程中不致迷失，并且可以方便地回到網(wǎng)站首頁(yè)以及其他相關(guān)內(nèi)容的頁(yè)面。相關(guān)內(nèi)容的頁(yè)面。網(wǎng)站導(dǎo)航一般位于網(wǎng)站的網(wǎng)站導(dǎo)航一般位于網(wǎng)站的banner下面或是網(wǎng)頁(yè)的頂部。下面或是網(wǎng)頁(yè)的頂部。網(wǎng)站導(dǎo)航是網(wǎng)站中最重要的元素，主要有橫向?qū)Ш?、縱向?qū)ЬW(wǎng)站導(dǎo)航是網(wǎng)站中最重要的元素，主要有橫向?qū)Ш?、縱向?qū)Ш健?/p>

2、下拉導(dǎo)航及多級(jí)導(dǎo)航等幾種形式。本章將介紹如何使用航、下拉導(dǎo)航及多級(jí)導(dǎo)航等幾種形式。本章將介紹如何使用CSS來(lái)制作各種美觀實(shí)用的網(wǎng)站導(dǎo)航。來(lái)制作各種美觀實(shí)用的網(wǎng)站導(dǎo)航。7.1 7.1 制作一個(gè)簡(jiǎn)單的橫向文字導(dǎo)航條制作一個(gè)簡(jiǎn)單的橫向文字導(dǎo)航條門(mén)戶網(wǎng)站的主導(dǎo)航一般都是選用橫向?qū)Ш降男问健＿@門(mén)戶網(wǎng)站的主導(dǎo)航一般都是選用橫向?qū)Ш降男问?。這是因?yàn)殚T(mén)戶網(wǎng)站下方文字較多，而且每個(gè)頻道又都有不同的是因?yàn)殚T(mén)戶網(wǎng)站下方文字較多，而且每個(gè)頻道又都有不同的樣式區(qū)別，因此在頂部固定一個(gè)區(qū)域，設(shè)計(jì)統(tǒng)一風(fēng)格又不占樣式區(qū)別，因此在頂部固定一個(gè)區(qū)域，設(shè)計(jì)統(tǒng)一風(fēng)格又不占用過(guò)多空間的橫向?qū)Ш绞亲罾硐氲倪x擇。例如用過(guò)多空間的橫向?qū)Ш绞?/p>

3、最理想的選擇。例如、及國(guó)內(nèi)的新浪、網(wǎng)易、騰訊等網(wǎng)站都是采用此種及國(guó)內(nèi)的新浪、網(wǎng)易、騰訊等網(wǎng)站都是采用此種導(dǎo)航形式。導(dǎo)航形式。1display屬性2list-style-type屬性3制作橫向文字導(dǎo)航條的實(shí)例7.2 7.2 制作方塊導(dǎo)航條制作方塊導(dǎo)航條設(shè)計(jì)師天馬行空的進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，導(dǎo)航條自然也不拘設(shè)計(jì)師天馬行空的進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，導(dǎo)航條自然也不拘泥于一個(gè)簡(jiǎn)單的文字鏈接形式。方塊導(dǎo)航條可以為設(shè)計(jì)師提泥于一個(gè)簡(jiǎn)單的文字鏈接形式。方塊導(dǎo)航條可以為設(shè)計(jì)師提供一些設(shè)計(jì)靈感。供一些設(shè)計(jì)靈感。制作方塊導(dǎo)航條，先制作一個(gè)最基本的水平導(dǎo)航條，制作方塊導(dǎo)航條，先制作一個(gè)最基本的水平導(dǎo)航條，然后在然后在a元素的樣式中使用

4、元素的樣式中使用background-color屬性將其定義屬性將其定義成有顏色的區(qū)塊，最后使用成有顏色的區(qū)塊，最后使用a:hover達(dá)到當(dāng)光標(biāo)經(jīng)過(guò)時(shí)改變達(dá)到當(dāng)光標(biāo)經(jīng)過(guò)時(shí)改變其顏色的效果。下面分別講解文本對(duì)齊屬性的使用方法和具其顏色的效果。下面分別講解文本對(duì)齊屬性的使用方法和具體實(shí)例應(yīng)用。體實(shí)例應(yīng)用。1文本對(duì)齊屬性2制作方塊導(dǎo)航條實(shí)例7.3 7.3 制作標(biāo)簽式導(dǎo)航制作標(biāo)簽式導(dǎo)航在簡(jiǎn)單的導(dǎo)航系統(tǒng)制作完成后，有必要再為導(dǎo)航增加更在簡(jiǎn)單的導(dǎo)航系統(tǒng)制作完成后，有必要再為導(dǎo)航增加更多豐富的可用性設(shè)計(jì)。多豐富的可用性設(shè)計(jì)。它的導(dǎo)航采用的是類(lèi)似文件夾標(biāo)簽的樣式，這樣的導(dǎo)航它的導(dǎo)航采用的是類(lèi)似文件夾標(biāo)簽的樣式

5、，這樣的導(dǎo)航樣式正是目前網(wǎng)站上常見(jiàn)的，既美觀又能讓用戶非常方便地樣式正是目前網(wǎng)站上常見(jiàn)的，既美觀又能讓用戶非常方便地知道自己所處的位置。本節(jié)中也制作這樣的一套導(dǎo)航系統(tǒng)。知道自己所處的位置。本節(jié)中也制作這樣的一套導(dǎo)航系統(tǒng)。1邊框樣式屬性2制作標(biāo)簽式導(dǎo)航實(shí)例7.4 7.4 制作按鈕導(dǎo)航條制作按鈕導(dǎo)航條目前在網(wǎng)頁(yè)中普遍出現(xiàn)的按鈕可以分為兩類(lèi)：一種是目前在網(wǎng)頁(yè)中普遍出現(xiàn)的按鈕可以分為兩類(lèi)：一種是有提交功能的按鈕；另一種是僅僅表示鏈接的按鈕。網(wǎng)站導(dǎo)有提交功能的按鈕；另一種是僅僅表示鏈接的按鈕。網(wǎng)站導(dǎo)航可以使用按鈕形式來(lái)進(jìn)行設(shè)計(jì)，這樣的按鈕實(shí)現(xiàn)的是一種航可以使用按鈕形式來(lái)進(jìn)行設(shè)計(jì)，這樣的按鈕實(shí)現(xiàn)的是一種從

6、一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面的功能。從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面的功能。1內(nèi)邊距屬性2制作按鈕導(dǎo)航條實(shí)例7.5 CSS7.5 CSS盒模型及盒模型盒模型及盒模型hackhackCSS盒模型（盒模型（Box Model）是從）是從CSS誕生之時(shí)便產(chǎn)生誕生之時(shí)便產(chǎn)生的一個(gè)概念，對(duì)于網(wǎng)頁(yè)中的大部分對(duì)象，實(shí)際呈現(xiàn)的形式都的一個(gè)概念，對(duì)于網(wǎng)頁(yè)中的大部分對(duì)象，實(shí)際呈現(xiàn)的形式都是一個(gè)盒子形狀對(duì)象，即塊狀對(duì)象。在是一個(gè)盒子形狀對(duì)象，即塊狀對(duì)象。在CSS設(shè)計(jì)過(guò)程中，要設(shè)計(jì)過(guò)程中，要做的就是安排一個(gè)個(gè)盒子的內(nèi)容。做的就是安排一個(gè)個(gè)盒子的內(nèi)容。盒子的尺寸與類(lèi)型：包含盒子的具體大小、邊框及盒子的尺寸與類(lèi)型：包含盒子的具體大

7、小、邊框及display的類(lèi)型。的類(lèi)型。盒子的布局：盒子中內(nèi)容的流動(dòng)方式、自身的浮動(dòng)方盒子的布局：盒子中內(nèi)容的流動(dòng)方式、自身的浮動(dòng)方式及是否絕對(duì)定位等。式及是否絕對(duì)定位等。與其他元素的關(guān)系：兩個(gè)盒對(duì)象排列時(shí)的邊距累加及與其他元素的關(guān)系：兩個(gè)盒對(duì)象排列時(shí)的邊距累加及樣式中的繼承關(guān)系等。樣式中的繼承關(guān)系等。7.5.1 7.5.1 盒模型尺寸盒模型尺寸一個(gè)完整的盒對(duì)象，由眾多屬性構(gòu)成，每個(gè)屬性在實(shí)一個(gè)完整的盒對(duì)象，由眾多屬性構(gòu)成，每個(gè)屬性在實(shí)際的盒對(duì)象顯示中，占據(jù)不同的位置。對(duì)于盒對(duì)象而言，除際的盒對(duì)象顯示中，占據(jù)不同的位置。對(duì)于盒對(duì)象而言，除去用于去用于position的的top、left、bot

8、tom和和right屬性，還有如屬性，還有如下幾點(diǎn)。下幾點(diǎn)。margin的值將占據(jù)的值將占據(jù)margin邊界線到邊界線到border邊界線之間邊界線之間的區(qū)域。的區(qū)域。border的值將占據(jù)的值將占據(jù)border邊界線到邊界線到padding邊界線之邊界線之間的區(qū)域。間的區(qū)域。padding的值將占據(jù)的值將占據(jù)padding邊界線到內(nèi)容邊界線之間邊界線到內(nèi)容邊界線之間的區(qū)域。的區(qū)域。7.5.2 7.5.2 盒模型盒模型hackhack了解了盒模型尺寸的計(jì)算原理之后，現(xiàn)在使用了解了盒模型尺寸的計(jì)算原理之后，現(xiàn)在使用CSS模模擬一個(gè)盒模型，觀察盒模型會(huì)帶來(lái)什么樣的問(wèn)題。在標(biāo)準(zhǔn)方擬一個(gè)盒模型，觀察盒

9、模型會(huì)帶來(lái)什么樣的問(wèn)題。在標(biāo)準(zhǔn)方式下，樣式表應(yīng)當(dāng)如下。式下，樣式表應(yīng)當(dāng)如下。div.box border: 20px solid; /*設(shè)置邊框樣式設(shè)置邊框樣式*/padding: 20px; /*設(shè)置內(nèi)邊距設(shè)置內(nèi)邊距*/margin: 20px; /*設(shè)置外邊距設(shè)置外邊距*/background: #ffc; /*設(shè)置背景色設(shè)置背景色*/width: 500px; /*設(shè)置寬度設(shè)置寬度*/7.5.3 7.5.3 簡(jiǎn)單盒模型簡(jiǎn)單盒模型hackhack方法方法令人振奮的是，研究盒模型在不同瀏覽器下令人振奮的是，研究盒模型在不同瀏覽器下hack的時(shí)的時(shí)候，開(kāi)發(fā)者也找到了另一種更簡(jiǎn)單的候，開(kāi)發(fā)者也找

10、到了另一種更簡(jiǎn)單的hack方法，稱為方法，稱為SBMH（Simple Box Model Hack，簡(jiǎn)單盒模型，簡(jiǎn)單盒模型hack）。）。根據(jù)上面的代碼，可以使用簡(jiǎn)單代碼進(jìn)行替代處理。根據(jù)上面的代碼，可以使用簡(jiǎn)單代碼進(jìn)行替代處理。div.boxborder: 20px solid; /*設(shè)置邊框樣式設(shè)置邊框樣式*/padding: 20px; /*設(shè)置內(nèi)邊距設(shè)置內(nèi)邊距*/margin: 20px; /*設(shè)置外邊距設(shè)置外邊距*/background: #ffc; /*設(shè)置背景色設(shè)置背景色*/width: 500px; /*設(shè)置寬度設(shè)置寬度*/width: 580px; /*設(shè)置寬度，僅限在IE5

11、.5瀏覽器下顯示*/7.6 7.6 制作會(huì)動(dòng)的長(zhǎng)城形導(dǎo)航條制作會(huì)動(dòng)的長(zhǎng)城形導(dǎo)航條長(zhǎng)城形導(dǎo)航條，即像長(zhǎng)城烽火臺(tái)一個(gè)接一個(gè)似的導(dǎo)航長(zhǎng)城形導(dǎo)航條，即像長(zhǎng)城烽火臺(tái)一個(gè)接一個(gè)似的導(dǎo)航條?；驹矶际鞘褂昧斜碓刂谱鳈M向?qū)Ш綏l，重點(diǎn)是樣條?；驹矶际鞘褂昧斜碓刂谱鳈M向?qū)Ш綏l，重點(diǎn)是樣式上的設(shè)計(jì)，效果如圖所示。式上的設(shè)計(jì)，效果如圖所示。1定位元素屬性position定位元素屬性定位元素屬性position的語(yǔ)法結(jié)構(gòu)如下。的語(yǔ)法結(jié)構(gòu)如下。position: static | relative | absolute | fixed2制作會(huì)動(dòng)的長(zhǎng)城形導(dǎo)航條實(shí)例3兼容問(wèn)題7.7 7.7 制作基于背景控制的導(dǎo)航條

12、制作基于背景控制的導(dǎo)航條現(xiàn)在結(jié)合背景控制的知識(shí)，可以嘗試制作導(dǎo)航系統(tǒng)，現(xiàn)在結(jié)合背景控制的知識(shí)，可以嘗試制作導(dǎo)航系統(tǒng)，并在此基礎(chǔ)上對(duì)導(dǎo)航進(jìn)行改進(jìn)?；诘诓⒃诖嘶A(chǔ)上對(duì)導(dǎo)航進(jìn)行改進(jìn)?；诘?章背景的基本控制章背景的基本控制方法和本章前面介紹的導(dǎo)航制作方法，制作一個(gè)基于背景控方法和本章前面介紹的導(dǎo)航制作方法，制作一個(gè)基于背景控制的導(dǎo)航條。制的導(dǎo)航條?；诒尘翱刂频膶?dǎo)航條，就是利用基于背景控制的導(dǎo)航條，就是利用a:link和和a:hover等等不同狀態(tài)下顯示同一張的背景圖片，但是控制這張背景圖片不同狀態(tài)下顯示同一張的背景圖片，但是控制這張背景圖片的不同坐標(biāo)來(lái)實(shí)現(xiàn)交互性的導(dǎo)航系統(tǒng)。這樣做的優(yōu)點(diǎn)就在于的不

13、同坐標(biāo)來(lái)實(shí)現(xiàn)交互性的導(dǎo)航系統(tǒng)。這樣做的優(yōu)點(diǎn)就在于優(yōu)化代碼，減小網(wǎng)頁(yè)下載的文件量，既能減輕網(wǎng)絡(luò)服務(wù)器端優(yōu)化代碼，減小網(wǎng)頁(yè)下載的文件量，既能減輕網(wǎng)絡(luò)服務(wù)器端的負(fù)擔(dān)，也能為瀏覽者打開(kāi)網(wǎng)頁(yè)減少不必要的時(shí)間等待。以的負(fù)擔(dān)，也能為瀏覽者打開(kāi)網(wǎng)頁(yè)減少不必要的時(shí)間等待。以一種形象化的圖示表示。一種形象化的圖示表示。7.8 7.8 制作左右自由伸展的導(dǎo)航條制作左右自由伸展的導(dǎo)航條在在7.7節(jié)的實(shí)例中，使用了圖片翻轉(zhuǎn)技術(shù)實(shí)現(xiàn)了帶圓角節(jié)的實(shí)例中，使用了圖片翻轉(zhuǎn)技術(shù)實(shí)現(xiàn)了帶圓角的圖片背景，并實(shí)現(xiàn)了交互效果。但是它卻只能夠做到使用的圖片背景，并實(shí)現(xiàn)了交互效果。但是它卻只能夠做到使用同一個(gè)背景進(jìn)行設(shè)計(jì)，并沒(méi)有實(shí)現(xiàn)根據(jù)導(dǎo)航

14、文字的長(zhǎng)度，自同一個(gè)背景進(jìn)行設(shè)計(jì)，并沒(méi)有實(shí)現(xiàn)根據(jù)導(dǎo)航文字的長(zhǎng)度，自由變化的圓角導(dǎo)航標(biāo)簽。本節(jié)將介紹一種新的方法，利用九由變化的圓角導(dǎo)航標(biāo)簽。本節(jié)將介紹一種新的方法，利用九宮格方式能夠?qū)崿F(xiàn)任意擴(kuò)展的圓角樣式的功能，改進(jìn)導(dǎo)航系宮格方式能夠?qū)崿F(xiàn)任意擴(kuò)展的圓角樣式的功能，改進(jìn)導(dǎo)航系統(tǒng)，制作可以左右自由伸展的導(dǎo)航條，這種方法又叫做統(tǒng)，制作可以左右自由伸展的導(dǎo)航條，這種方法又叫做滑動(dòng)門(mén)技術(shù)（滑動(dòng)門(mén)技術(shù)（Sliding Doors）。）。7.8.1 7.8.1 九宮格技術(shù)原理九宮格技術(shù)原理在一個(gè)在一個(gè)33的表格之中，左上、右上、右下、左下分的表格之中，左上、右上、右下、左下分別放入別放入4個(gè)圓角圖案，內(nèi)容放

15、置在中間的方格中，其上下左個(gè)圓角圖案，內(nèi)容放置在中間的方格中，其上下左右右4個(gè)方向的方格放置用于拉伸的圖案，最終形成了一種可個(gè)方向的方格放置用于拉伸的圖案，最終形成了一種可任意變化大小的圓角方框。九宮格技術(shù)也是軟件的外觀設(shè)計(jì)任意變化大小的圓角方框。九宮格技術(shù)也是軟件的外觀設(shè)計(jì)中常用的技術(shù)之一，包括我們使用的中常用的技術(shù)之一，包括我們使用的Windows軟件，打開(kāi)軟件，打開(kāi)的每一個(gè)窗口基本上都是使用九宮格方式進(jìn)行的樣式設(shè)計(jì)。的每一個(gè)窗口基本上都是使用九宮格方式進(jìn)行的樣式設(shè)計(jì)。在表格式布局中通過(guò)表格實(shí)現(xiàn)圓角樣式，而在表格式布局中通過(guò)表格實(shí)現(xiàn)圓角樣式，而CSS 2.0本身是本身是不提供圓角設(shè)計(jì)模式。

16、不提供圓角設(shè)計(jì)模式。注意：注意：CSS 3.0將提供直接對(duì)九宮格樣式設(shè)計(jì)的支持。將提供直接對(duì)九宮格樣式設(shè)計(jì)的支持。7.8.2 7.8.2 制作自由伸展的導(dǎo)航條實(shí)例制作自由伸展的導(dǎo)航條實(shí)例九宮格使用九宮格使用4個(gè)圓角圖片的模式，是為了上下左右個(gè)圓角圖片的模式，是為了上下左右4個(gè)個(gè)邊都可以自由擴(kuò)展，而對(duì)于導(dǎo)航標(biāo)簽來(lái)說(shuō)只需要左右兩個(gè)方邊都可以自由擴(kuò)展，而對(duì)于導(dǎo)航標(biāo)簽來(lái)說(shuō)只需要左右兩個(gè)方向的擴(kuò)展即可。按此原理導(dǎo)航的結(jié)構(gòu)如左圖所示。向的擴(kuò)展即可。按此原理導(dǎo)航的結(jié)構(gòu)如左圖所示。進(jìn)一步優(yōu)化這樣的結(jié)構(gòu)，使用二層嵌套完成，因?yàn)檫M(jìn)一步優(yōu)化這樣的結(jié)構(gòu)，使用二層嵌套完成，因?yàn)锽和和C或者或者A和和B，都可以合在一起，

17、使，都可以合在一起，使B部分延續(xù)得較長(zhǎng)一些，部分延續(xù)得較長(zhǎng)一些，因此滑動(dòng)門(mén)結(jié)構(gòu)應(yīng)該如右圖所示。因此滑動(dòng)門(mén)結(jié)構(gòu)應(yīng)該如右圖所示。27.9 7.9 制作一個(gè)簡(jiǎn)單的縱向?qū)Ш綏l制作一個(gè)簡(jiǎn)單的縱向?qū)Ш綏l縱向?qū)Ш揭彩蔷W(wǎng)站應(yīng)用中的一種重要形式。所謂縱向縱向?qū)Ш揭彩蔷W(wǎng)站應(yīng)用中的一種重要形式。所謂縱向?qū)Ш?，是指放置在網(wǎng)頁(yè)左邊或右邊的從上至下排列的一種導(dǎo)導(dǎo)航，是指放置在網(wǎng)頁(yè)左邊或右邊的從上至下排列的一種導(dǎo)航形式?，F(xiàn)在希望設(shè)計(jì)一套縱向?qū)Ш絹?lái)幫助用戶瀏覽網(wǎng)站。航形式?，F(xiàn)在希望設(shè)計(jì)一套縱向?qū)Ш絹?lái)幫助用戶瀏覽網(wǎng)站。類(lèi)似于電子商務(wù)網(wǎng)站，在每一個(gè)頁(yè)面都需要一套輔助的導(dǎo)航類(lèi)似于電子商務(wù)網(wǎng)站，在每一個(gè)頁(yè)面都需要一套輔助的導(dǎo)航系統(tǒng)來(lái)

18、幫助用戶查找各個(gè)分類(lèi)的商品，這個(gè)時(shí)候縱向?qū)Ш骄拖到y(tǒng)來(lái)幫助用戶查找各個(gè)分類(lèi)的商品，這個(gè)時(shí)候縱向?qū)Ш骄湍芘缮嫌脠?chǎng)了。能派上用場(chǎng)了。7.9.1 7.9.1 使用使用ul ul、li li列表標(biāo)簽制作導(dǎo)航條列表標(biāo)簽制作導(dǎo)航條本章的本章的7.1節(jié)講解過(guò)制作橫向?qū)Ш降姆椒ǎ鞘褂霉?jié)講解過(guò)制作橫向?qū)Ш降姆椒?，是使用ul、li列表元素，默認(rèn)情況下，呈現(xiàn)的效果便是導(dǎo)航項(xiàng)縱向排列。列表元素，默認(rèn)情況下，呈現(xiàn)的效果便是導(dǎo)航項(xiàng)縱向排列。制作頁(yè)面的制作頁(yè)面的XHTML代碼。代碼。Item oneItem twoItem threeItem fourItem five7.9.2 7.9.2 使用使用div+h1div+h

19、1標(biāo)簽制作標(biāo)簽制作延續(xù)橫向?qū)Ш降脑O(shè)計(jì)思路，但換一種方式來(lái)組織我們延續(xù)橫向?qū)Ш降脑O(shè)計(jì)思路，但換一種方式來(lái)組織我們的導(dǎo)航部分的的導(dǎo)航部分的XHTML結(jié)構(gòu)代碼。結(jié)構(gòu)代碼。為了便于讀者閱讀，在本段代碼中不再給每段文字加為了便于讀者閱讀，在本段代碼中不再給每段文字加上鏈接上鏈接標(biāo)簽。這次的標(biāo)簽。這次的XHTML部分的代碼與橫向?qū)Ш铰杂胁糠值拇a與橫向?qū)Ш铰杂胁煌?，沒(méi)有繼續(xù)使用不同，沒(méi)有繼續(xù)使用ul和和li標(biāo)簽，其實(shí)繼續(xù)使用標(biāo)簽，其實(shí)繼續(xù)使用ul元素也能元素也能完好地實(shí)現(xiàn)縱向?qū)Ш较到y(tǒng)，但是在這里需要更多方法來(lái)展現(xiàn)完好地實(shí)現(xiàn)縱向?qū)Ш较到y(tǒng)，但是在這里需要更多方法來(lái)展現(xiàn)CSS布局設(shè)計(jì)的靈活與方便性，以便于拋磚引

20、玉，開(kāi)拓更多布局設(shè)計(jì)的靈活與方便性，以便于拋磚引玉，開(kāi)拓更多的設(shè)計(jì)思想。的設(shè)計(jì)思想。1h標(biāo)簽2制作縱向?qū)Ш綏l實(shí)例7.10 7.10 制作分行導(dǎo)航條制作分行導(dǎo)航條分行導(dǎo)航條是縱向?qū)Ш降囊环N形式，主要特點(diǎn)就是在分行導(dǎo)航條是縱向?qū)Ш降囊环N形式，主要特點(diǎn)就是在導(dǎo)航項(xiàng)之間加入了分割線。分行導(dǎo)航能夠清晰地突出導(dǎo)航項(xiàng)導(dǎo)航項(xiàng)之間加入了分割線。分行導(dǎo)航能夠清晰地突出導(dǎo)航項(xiàng)之間的關(guān)系。之間的關(guān)系。7.11 7.11 制作增亮導(dǎo)航條制作增亮導(dǎo)航條有一種交互效果，當(dāng)光標(biāo)移到某一區(qū)域的時(shí)候，該區(qū)域有一種交互效果，當(dāng)光標(biāo)移到某一區(qū)域的時(shí)候，該區(qū)域的背景顏色改變。導(dǎo)航系統(tǒng)同樣可以應(yīng)用這種交互效果，實(shí)現(xiàn)的背景顏色改變。導(dǎo)航系

21、統(tǒng)同樣可以應(yīng)用這種交互效果，實(shí)現(xiàn)更人性化的用戶體驗(yàn)。如圖所示是一個(gè)使用了縱向?qū)Ш?，?dāng)光更人性化的用戶體驗(yàn)。如圖所示是一個(gè)使用了縱向?qū)Ш?，?dāng)光標(biāo)經(jīng)過(guò)時(shí)導(dǎo)航項(xiàng)變成橙色的網(wǎng)頁(yè)。標(biāo)經(jīng)過(guò)時(shí)導(dǎo)航項(xiàng)變成橙色的網(wǎng)頁(yè)。 7.12 7.12 制作動(dòng)感的導(dǎo)航條制作動(dòng)感的導(dǎo)航條用一個(gè)簡(jiǎn)單的列表元素（用一個(gè)簡(jiǎn)單的列表元素（list）和）和CSS制作不同的導(dǎo)航制作不同的導(dǎo)航條，是本章的特色所在。現(xiàn)在就來(lái)看看當(dāng)條，是本章的特色所在?，F(xiàn)在就來(lái)看看當(dāng)CSS用于簡(jiǎn)單的用于簡(jiǎn)單的list時(shí)的強(qiáng)大威力。如圖所示是一個(gè)使用了動(dòng)感縱向?qū)Ш綏l時(shí)的強(qiáng)大威力。如圖所示是一個(gè)使用了動(dòng)感縱向?qū)Ш綏l的網(wǎng)頁(yè)。的網(wǎng)頁(yè)。7.13 7.13 制作下拉式導(dǎo)航

22、條制作下拉式導(dǎo)航條下拉式導(dǎo)航是網(wǎng)頁(yè)設(shè)計(jì)中常用的導(dǎo)航形式，這種菜單形式能下拉式導(dǎo)航是網(wǎng)頁(yè)設(shè)計(jì)中常用的導(dǎo)航形式，這種菜單形式能夠充分利用頁(yè)面現(xiàn)有空間隱藏與顯示更多內(nèi)容，并能對(duì)內(nèi)容進(jìn)行夠充分利用頁(yè)面現(xiàn)有空間隱藏與顯示更多內(nèi)容，并能對(duì)內(nèi)容進(jìn)行合理的分類(lèi)顯示，是一種非常優(yōu)秀的導(dǎo)航形式。合理的分類(lèi)顯示，是一種非常優(yōu)秀的導(dǎo)航形式。網(wǎng)站網(wǎng)站采用的是下拉式導(dǎo)航，如下圖所示。采用的是下拉式導(dǎo)航，如下圖所示。7.13.1 7.13.1 制作實(shí)例制作實(shí)例本節(jié)使用本節(jié)使用ul列表標(biāo)簽以及列表標(biāo)簽以及CSS實(shí)現(xiàn)樣式制作下拉式實(shí)現(xiàn)樣式制作下拉式導(dǎo)航系統(tǒng)，需要應(yīng)用一段導(dǎo)航系統(tǒng)，需要應(yīng)用一段JavaScript腳本來(lái)實(shí)現(xiàn)下拉交腳本來(lái)實(shí)現(xiàn)下拉交互效果?；バЧ?。7.13.2 7.13.2 兼容問(wèn)題兼容問(wèn)題為了符合為了符合Web標(biāo)準(zhǔn)，制作完成的頁(yè)面至少需要在標(biāo)準(zhǔn)，制作完成的頁(yè)面至少需要在3個(gè)主個(gè)主流瀏