第九步：導(dǎo)航條的制作

　　導(dǎo)航條之所以放在第九步講，是因?yàn)閷?dǎo)航條制作是本教程中最難的部分，自然也是技術(shù)含量最高的地方.導(dǎo)航條的制作可易可難，但這里介紹的相對(duì)較難，您能堅(jiān)持到這一步已經(jīng)很不易，假如你只是有個(gè)導(dǎo)航條就滿足的話，請(qǐng)參看第八步的副導(dǎo)航條的制作。
　　先去掉導(dǎo)航條的紅色背景，還有就是移除html文件中main-nav層的"class="hidden"",使導(dǎo)航條的內(nèi)容顯示出來(lái)。我們實(shí)現(xiàn)導(dǎo)航條圖片的變換的方法是純css代碼的，不包含任何js或是flash，因此我們所用的圖片是4幅分別由三個(gè)小圖組合而成的圖片，如下所示，并將這4幅圖保存于/images/nav/文件夾中:（另存圖片后 改成相應(yīng)的文件名）






　　我們實(shí)現(xiàn)導(dǎo)航條的動(dòng)態(tài)效果如下圖所示：（GIF動(dòng)畫(huà)）



　　在網(wǎng)頁(yè)顯示的只是圖中紅框標(biāo)出的部分，假如把每幅圖分為上，中，下三部分的話，未發(fā)生動(dòng)作時(shí)顯示上部，當(dāng)光標(biāo)懸停時(shí)，顯示的是中部，被選擇時(shí)則顯示下部。
　　接下來(lái)進(jìn)入css代碼部分，先往css文件中寫(xiě)入：


　　注重：/* Main Navigation */為增加css文件可讀性的說(shuō)明，不會(huì)影響表現(xiàn)。
　　#main-nav的height屬性定義了main-nav層的高度；"#main-nav ul" 則定義main-nav層中列表的屬性，在這里先定義其margin和padding為0。
　　根據(jù)先前的設(shè)計(jì)，導(dǎo)航條應(yīng)該和左邊有一定的距離，這就需要設(shè)置main-nav層的左邊距(padding-left)為11px,但由于IE5和Mac瀏覽器的BUG，需要加入以下代碼：


　　現(xiàn)在你可以看到導(dǎo)航列表距左邊有11px的距離，但是列表項(xiàng)目是豎排的，將<li>，即列表項(xiàng)目向左對(duì)齊就能使其從左到右橫向排列：


　　為了使列表項(xiàng)目的尺寸和容納它的層保持一致，并利用浮動(dòng)屬性使列表項(xiàng)目的文本隱藏，寫(xiě)入：


　　接著，要實(shí)現(xiàn)當(dāng)光標(biāo)懸停于列表項(xiàng)目上時(shí)，顯示背景圖片的中部，因此需要將背景圖片向上移動(dòng)50px，寫(xiě)入：


　　給各個(gè)列表項(xiàng)目設(shè)置寬度和背景圖片的路徑：


　　最后我們要做的就是，當(dāng)列表項(xiàng)目被選時(shí)，顯示背景圖片的下部。為此我們需要增加一些css代碼對(duì)原有的css表現(xiàn)作一些修改：


　　以上看似龐大的css選擇器可以識(shí)別body標(biāo)簽的類(lèi)(class)，如html中為：


　　以上css選擇器就讓li#about,li#about a,的背景向上移動(dòng)100px，使其顯示背景圖片的下部。
　　假如我們希望網(wǎng)站頭部背景圖片也根據(jù)body標(biāo)簽的類(lèi)進(jìn)行變換，就需修改css的#header為：


　　至此就完成了"About"網(wǎng)頁(yè)的制作,依此類(lèi)推，修改html中body的類(lèi)為services/portfolio/contact制作相應(yīng)html文件并分別保存。
　　在css文件中添加各個(gè)網(wǎng)頁(yè)相應(yīng)的頭部背景圖片路徑(如services網(wǎng)頁(yè)的頭部背景圖片為services.jpg,在css中添加如下代碼)：


　　然后用超級(jí)鏈接將這些網(wǎng)頁(yè)連接起來(lái)，就組成了一個(gè)網(wǎng)站了。