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

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






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



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


　　注重：/* Main Navigation */為增加css文件可讀性的說明，不會影響表現(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)目向左對齊就能使其從左到右橫向排列：


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


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


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


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


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


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


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


　　然后用超級鏈接將這些網(wǎng)頁連接起來，就組成了一個網(wǎng)站了。