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

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

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

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

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

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

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

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

8、tom和和right屬性，還有如屬性，還有如下幾點。下幾點。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了解了盒模型尺寸的計算原理之后，現(xiàn)在使用了解了盒模型尺寸的計算原理之后，現(xiàn)在使用CSS模模擬一個盒模型，觀察盒模型會帶來什么樣的問題。在標準方擬一個盒模型，觀察盒

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

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

11、.5瀏覽器下顯示*/7.6 7.6 制作會動的長城形導航條制作會動的長城形導航條長城形導航條，即像長城烽火臺一個接一個似的導航長城形導航條，即像長城烽火臺一個接一個似的導航條。基本原理都是使用列表元素制作橫向?qū)Ш綏l，重點是樣條。基本原理都是使用列表元素制作橫向?qū)Ш綏l，重點是樣式上的設計，效果如圖所示。式上的設計，效果如圖所示。1定位元素屬性position定位元素屬性定位元素屬性position的語法結構如下。的語法結構如下。position: static | relative | absolute | fixed2制作會動的長城形導航條實例3兼容問題7.7 7.7 制作基于背景控制的導航條

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

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

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

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

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

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

18、幫助用戶查找各個分類的商品，這個時候縱向?qū)Ш骄拖到y(tǒng)來幫助用戶查找各個分類的商品，這個時候縱向?qū)Ш骄湍芘缮嫌脠隽恕Ｄ芘缮嫌脠隽恕?.9.1 7.9.1 使用使用ul ul、li li列表標簽制作導航條列表標簽制作導航條本章的本章的7.1節(jié)講解過制作橫向?qū)Ш降姆椒?，是使用?jié)講解過制作橫向?qū)Ш降姆椒?，是使用ul、li列表元素，默認情況下，呈現(xiàn)的效果便是導航項縱向排列。列表元素，默認情況下，呈現(xiàn)的效果便是導航項縱向排列。制作頁面的制作頁面的XHTML代碼。代碼。Item oneItem twoItem threeItem fourItem five7.9.2 7.9.2 使用使用div+h1div+h

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

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

21、統(tǒng)同樣可以應用這種交互效果，實現(xiàn)更人性化的用戶體驗。如圖所示是一個使用了縱向?qū)Ш剑敼飧诵曰挠脩趔w驗。如圖所示是一個使用了縱向?qū)Ш剑敼鈽私?jīng)過時導航項變成橙色的網(wǎng)頁。標經(jīng)過時導航項變成橙色的網(wǎng)頁。 7.12 7.12 制作動感的導航條制作動感的導航條用一個簡單的列表元素（用一個簡單的列表元素（list）和）和CSS制作不同的導航制作不同的導航條，是本章的特色所在。現(xiàn)在就來看看當條，是本章的特色所在?，F(xiàn)在就來看看當CSS用于簡單的用于簡單的list時的強大威力。如圖所示是一個使用了動感縱向?qū)Ш綏l時的強大威力。如圖所示是一個使用了動感縱向?qū)Ш綏l的網(wǎng)頁。的網(wǎng)頁。7.13 7.13 制作下拉式導航

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