第7章使用CSS制作網(wǎng)站導(dǎo)航網(wǎng)站導(dǎo)航（Navigation）是一個(gè)通稱(chēng)，方便用戶(hù)瀏覽網(wǎng)站信息和獲取網(wǎng)站服務(wù)。它的基本作用就是讓用戶(hù)在瀏覽網(wǎng)站過(guò)程中不致迷失，并且可以方便地回到網(wǎng)站首頁(yè)以及其他相關(guān)內(nèi)容的頁(yè)面。網(wǎng)站導(dǎo)航一般位于網(wǎng)站的banner下面或是網(wǎng)頁(yè)的頂部。網(wǎng)站導(dǎo)航是網(wǎng)站中最重要的元素，主要有橫向?qū)Ш健⒖v向?qū)Ш健⑾吕瓕?dǎo)航及多級(jí)導(dǎo)航等幾種形式。本章將介紹如何使用CSS來(lái)制作各種美觀實(shí)用的網(wǎng)站導(dǎo)航。7.1制作一個(gè)簡(jiǎn)單的橫向文字導(dǎo)航條門(mén)戶(hù)網(wǎng)站的主導(dǎo)航一般都是選用橫向?qū)Ш降男问健＿@是因?yàn)殚T(mén)戶(hù)網(wǎng)站下方文字較多，而且每個(gè)頻道又都有不同的樣式區(qū)別，因此在頂部固定一個(gè)區(qū)域，設(shè)計(jì)統(tǒng)一風(fēng)格又不占用過(guò)多空間的橫向?qū)Ш绞亲罾硐氲倪x擇。例如、及國(guó)內(nèi)的新浪、網(wǎng)易、騰訊等網(wǎng)站都是采用此種導(dǎo)航形式。1．display屬性2．list-style-type屬性3．制作橫向文字導(dǎo)航條的實(shí)例7.2制作方塊導(dǎo)航條設(shè)計(jì)師天馬行空的進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，導(dǎo)航條自然也不拘泥于一個(gè)簡(jiǎn)單的文字鏈接形式。方塊導(dǎo)航條可以為設(shè)計(jì)師提供一些設(shè)計(jì)靈感。制作方塊導(dǎo)航條，先制作一個(gè)最基本的水平導(dǎo)航條，然后在a元素的樣式中使用background-color屬性將其定義成有顏色的區(qū)塊，最后使用a:hover達(dá)到當(dāng)光標(biāo)經(jīng)過(guò)時(shí)改變其顏色的效果。下面分別講解文本對(duì)齊屬性的使用方法和具體實(shí)例應(yīng)用。1．文本對(duì)齊屬性2．制作方塊導(dǎo)航條實(shí)例7.3制作標(biāo)簽式導(dǎo)航在簡(jiǎn)單的導(dǎo)航系統(tǒng)制作完成后，有必要再為導(dǎo)航增加更多豐富的可用性設(shè)計(jì)。它的導(dǎo)航采用的是類(lèi)似文件夾標(biāo)簽的樣式，這樣的導(dǎo)航樣式正是目前網(wǎng)站上常見(jiàn)的，既美觀又能讓用戶(hù)非常方便地知道自己所處的位置。本節(jié)中也制作這樣的一套導(dǎo)航系統(tǒng)。1．邊框樣式屬性2．制作標(biāo)簽式導(dǎo)航實(shí)例7.4制作按鈕導(dǎo)航條目前在網(wǎng)頁(yè)中普遍出現(xiàn)的按鈕可以分為兩類(lèi)：一種是有提交功能的按鈕；另一種是僅僅表示鏈接的按鈕。網(wǎng)站導(dǎo)航可以使用按鈕形式來(lái)進(jìn)行設(shè)計(jì)，這樣的按鈕實(shí)現(xiàn)的是一種從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面的功能。1．內(nèi)邊距屬性2．制作按鈕導(dǎo)航條實(shí)例7.5CSS盒模型及盒模型hackCSS盒模型（BoxModel）是從CSS誕生之時(shí)便產(chǎn)生的一個(gè)概念，對(duì)于網(wǎng)頁(yè)中的大部分對(duì)象，實(shí)際呈現(xiàn)的形式都是一個(gè)盒子形狀對(duì)象，即塊狀對(duì)象。在CSS設(shè)計(jì)過(guò)程中，要做的就是安排一個(gè)個(gè)盒子的內(nèi)容。盒子的尺寸與類(lèi)型：包含盒子的具體大小、邊框及display的類(lèi)型。盒子的布局：盒子中內(nèi)容的流動(dòng)方式、自身的浮動(dòng)方式及是否絕對(duì)定位等。與其他元素的關(guān)系：兩個(gè)盒對(duì)象排列時(shí)的邊距累加及樣式中的繼承關(guān)系等。7.5.1盒模型尺寸一個(gè)完整的盒對(duì)象，由眾多屬性構(gòu)成，每個(gè)屬性在實(shí)際的盒對(duì)象顯示中，占據(jù)不同的位置。對(duì)于盒對(duì)象而言，除去用于position的top、left、bottom和right屬性，還有如下幾點(diǎn)。margin的值將占據(jù)margin邊界線到border邊界線之間的區(qū)域。border的值將占據(jù)border邊界線到padding邊界線之間的區(qū)域。padding的值將占據(jù)padding邊界線到內(nèi)容邊界線之間的區(qū)域。7.5.2盒模型hack了解了盒模型尺寸的計(jì)算原理之后，現(xiàn)在使用CSS模擬一個(gè)盒模型，觀察盒模型會(huì)帶來(lái)什么樣的問(wèn)題。在標(biāo)準(zhǔn)方式下，樣式表應(yīng)當(dāng)如下。div.box{ border:20pxsolid; /*設(shè)置邊框樣式*/ padding:20px;/*設(shè)置內(nèi)邊距*/ margin:20px; /*設(shè)置外邊距*/ background:#ffc; /*設(shè)置背景色*/ width:500px; /*設(shè)置寬度*/}7.5.3簡(jiǎn)單盒模型hack方法令人振奮的是，研究盒模型在不同瀏覽器下hack的時(shí)候，開(kāi)發(fā)者也找到了另一種更簡(jiǎn)單的hack方法，稱(chēng)為SBMH（SimpleBoxModelHack，簡(jiǎn)單盒模型hack）。根據(jù)上面的代碼，可以使用簡(jiǎn)單代碼進(jìn)行替代處理。div.box{border:20pxsolid;/*設(shè)置邊框樣式*/padding:20px;/*設(shè)置內(nèi)邊距*/margin:20px;/*設(shè)置外邊距*/background:#ffc;/*設(shè)置背景色*/width:500px;/*設(shè)置寬度*/\width:580px;/*設(shè)置寬度，僅限在IE5.5瀏覽器下顯示*/}7.6制作會(huì)動(dòng)的長(zhǎng)城形導(dǎo)航條長(zhǎng)城形導(dǎo)航條，即像長(zhǎng)城烽火臺(tái)一個(gè)接一個(gè)似的導(dǎo)航條?；驹矶际鞘褂昧斜碓刂谱鳈M向?qū)Ш綏l，重點(diǎn)是樣式上的設(shè)計(jì)，效果如圖所示。1．定位元素屬性position定位元素屬性position的語(yǔ)法結(jié)構(gòu)如下。position:static|relative|absolute|fixed2．制作會(huì)動(dòng)的長(zhǎng)城形導(dǎo)航條實(shí)例3．兼容問(wèn)題7.7制作基于背景控制的導(dǎo)航條現(xiàn)在結(jié)合背景控制的知識(shí)，可以嘗試制作導(dǎo)航系統(tǒng)，并在此基礎(chǔ)上對(duì)導(dǎo)航進(jìn)行改進(jìn)?；诘?章背景的基本控制方法和本章前面介紹的導(dǎo)航制作方法，制作一個(gè)基于背景控制的導(dǎo)航條?；诒尘翱刂频膶?dǎo)航條，就是利用a:link和a:hover等不同狀態(tài)下顯示同一張的背景圖片，但是控制這張背景圖片的不同坐標(biāo)來(lái)實(shí)現(xiàn)交互性的導(dǎo)航系統(tǒng)。這樣做的優(yōu)點(diǎn)就在于優(yōu)化代碼，減小網(wǎng)頁(yè)下載的文件量，既能減輕網(wǎng)絡(luò)服務(wù)器端的負(fù)擔(dān)，也能為瀏覽者打開(kāi)網(wǎng)頁(yè)減少不必要的時(shí)間等待。以一種形象化的圖示表示。7.8制作左右自由伸展的導(dǎo)航條在7.7節(jié)的實(shí)例中，使用了圖片翻轉(zhuǎn)技術(shù)實(shí)現(xiàn)了帶圓角的圖片背景，并實(shí)現(xiàn)了交互效果。但是它卻只能夠做到使用同一個(gè)背景進(jìn)行設(shè)計(jì)，并沒(méi)有實(shí)現(xiàn)根據(jù)導(dǎo)航文字的長(zhǎng)度，自由變化的圓角導(dǎo)航標(biāo)簽。本節(jié)將介紹一種新的方法，利用九宮格方式能夠?qū)崿F(xiàn)任意擴(kuò)展的圓角樣式的功能，改進(jìn)導(dǎo)航系統(tǒng)，制作可以左右自由伸展的導(dǎo)航條，這種方法又叫做——滑動(dòng)門(mén)技術(shù)（SlidingDoors）。7.8.1九宮格技術(shù)原理在一個(gè)3×3的表格之中，左上、右上、右下、左下分別放入4個(gè)圓角圖案，內(nèi)容放置在中間的方格中，其上下左右4個(gè)方向的方格放置用于拉伸的圖案，最終形成了一種可任意變化大小的圓角方框。九宮格技術(shù)也是軟件的外觀設(shè)計(jì)中常用的技術(shù)之一，包括我們使用的Windows軟件，打開(kāi)的每一個(gè)窗口基本上都是使用九宮格方式進(jìn)行的樣式設(shè)計(jì)。在表格式布局中通過(guò)表格實(shí)現(xiàn)圓角樣式，而CSS2.0本身是不提供圓角設(shè)計(jì)模式。注意：CSS3.0將提供直接對(duì)九宮格樣式設(shè)計(jì)的支持。7.8.2制作自由伸展的導(dǎo)航條實(shí)例九宮格使用4個(gè)圓角圖片的模式，是為了上下左右4個(gè)邊都可以自由擴(kuò)展，而對(duì)于導(dǎo)航標(biāo)簽來(lái)說(shuō)只需要左右兩個(gè)方向的擴(kuò)展即可。按此原理導(dǎo)航的結(jié)構(gòu)如左圖所示。進(jìn)一步優(yōu)化這樣的結(jié)構(gòu)，使用二層嵌套完成，因?yàn)锽和C或者A和B，都可以合在一起，使B部分延續(xù)得較長(zhǎng)一些，因此滑動(dòng)門(mén)結(jié)構(gòu)應(yīng)該如右圖所示。2 7.9制作一個(gè)簡(jiǎn)單的縱向?qū)Ш綏l縱向?qū)Ш揭彩蔷W(wǎng)站應(yīng)用中的一種重要形式。所謂縱向?qū)Ш剑侵阜胖迷诰W(wǎng)頁(yè)左邊或右邊的從上至下排列的一種導(dǎo)航形式?，F(xiàn)在希望設(shè)計(jì)一套縱向?qū)Ш絹?lái)幫助用戶(hù)瀏覽網(wǎng)站。類(lèi)似于電子商務(wù)網(wǎng)站，在每一個(gè)頁(yè)面都需要一套輔助的導(dǎo)航系統(tǒng)來(lái)幫助用戶(hù)查找各個(gè)分類(lèi)的商品，這個(gè)時(shí)候縱向?qū)Ш骄湍芘缮嫌脠?chǎng)了。7.9.1使用ul、li列表標(biāo)簽制作導(dǎo)航條本章的7.1節(jié)講解過(guò)制作橫向?qū)Ш降姆椒?，是使用ul、li列表元素，默認(rèn)情況下，呈現(xiàn)的效果便是導(dǎo)航項(xiàng)縱向排列。制作頁(yè)面的XHTML代碼。<ulid="navlist"><li><ahref="#">Itemone</a></li><li><ahref="#">Itemtwo</a></li><li><ahref="#">Itemthree</a></li><li><ahref="#">Itemfour</a></li><li><ahref="#">Itemfive</a></li></ul>7.9.2使用div+h1標(biāo)簽制作延續(xù)橫向?qū)Ш降脑O(shè)計(jì)思路，但換一種方式來(lái)組織我們的導(dǎo)航部分的XHTML結(jié)構(gòu)代碼。為了便于讀者閱讀，在本段代碼中不再給每段文字加上鏈接<a>標(biāo)簽。這次的XHTML部分的代碼與橫向?qū)Ш铰杂胁煌?，沒(méi)有繼續(xù)使用ul和li標(biāo)簽，其實(shí)繼續(xù)使用ul元素也能完好地實(shí)現(xiàn)縱向?qū)Ш较到y(tǒng)，但是在這里需要更多方法來(lái)展現(xiàn)CSS布局設(shè)計(jì)的靈活與方便性，以便于拋磚引玉，開(kāi)拓更多的設(shè)計(jì)思想。1．h標(biāo)簽2．制作縱向?qū)Ш綏l實(shí)例7.10制作分行導(dǎo)航條分行導(dǎo)航條是縱向?qū)Ш降囊环N形式，主要特點(diǎn)就是在導(dǎo)航項(xiàng)之間加入了分割線。分行導(dǎo)航能夠清晰地突出導(dǎo)航項(xiàng)之間的關(guān)系。7.11制作增亮導(dǎo)航條有一種交互效果，當(dāng)光標(biāo)移到某一區(qū)域的時(shí)候，該區(qū)域的背景顏色改變。導(dǎo)航系統(tǒng)同樣可以應(yīng)用這種交互效果，實(shí)現(xiàn)更人性化的用戶(hù)體驗(yàn)。如圖所示是一個(gè)使用了縱向?qū)Ш剑?dāng)光標(biāo)經(jīng)過(guò)時(shí)導(dǎo)航項(xiàng)變成橙色的網(wǎng)頁(yè)。

7.12制作動(dòng)感的導(dǎo)航條用一個(gè)簡(jiǎn)單的列表元素（list）和CSS制作不同的導(dǎo)航條，是本章的特色所在。現(xiàn)在就來(lái)看看當(dāng)CSS用于簡(jiǎn)單的list時(shí)的強(qiáng)大威力。如圖所示是一個(gè)使用了動(dòng)感縱向?qū)Ш綏l的網(wǎng)頁(yè)。7.13制作下拉式導(dǎo)航條下拉式導(dǎo)航是網(wǎng)頁(yè)設(shè)計(jì)中常用的導(dǎo)航形式，這種菜單形式能夠充分利用頁(yè)面現(xiàn)有空間隱藏與顯示更多內(nèi)容，并能對(duì)內(nèi)容進(jìn)行合理的分類(lèi)顯示，是一種非常優(yōu)秀的導(dǎo)航形式。網(wǎng)站采用的是下拉式導(dǎo)航，如下圖所示。7.13.1制作實(shí)例本節(jié)使用ul列表標(biāo)簽以及CSS實(shí)現(xiàn)樣式制作下拉式導(dǎo)航系統(tǒng)，需要應(yīng)用一段JavaScript腳本來(lái)實(shí)現(xiàn)下拉交互效果。7.13.2兼容問(wèn)題為了符合Web標(biāo)準(zhǔn)，制作完成的頁(yè)面至少需要在3個(gè)主流瀏覽器（IE7、Firefox、IE6）中測(cè)試。由于本書(shū)所有實(shí)例都是使用IE7作為默認(rèn)瀏覽器預(yù)覽的，所以現(xiàn)在需要在其他兩個(gè)瀏覽器再做測(cè)試，預(yù)覽效果。1．Firefox瀏覽器測(cè)試2．IE6瀏覽器測(cè)試7.14制作多級(jí)彈出導(dǎo)航條多級(jí)彈出導(dǎo)航系統(tǒng)，就是在縱向下拉彈出菜單導(dǎo)航基礎(chǔ)上，添加了橫向彈出菜單。簡(jiǎn)單地說(shuō)，就是彈出菜單的復(fù)合應(yīng)用。本節(jié)通過(guò)一個(gè)實(shí)例，講解如何實(shí)現(xiàn)多級(jí)彈出導(dǎo)航的CSS設(shè)計(jì)。7.14.1制作實(shí)