|
Jorux注：導航條之所以放在第九步講，是因為導航條制作是本教程中最難的部分，自然也是技術含量最高的地方.導航條的制作可易可難，但這里介紹的相對較難，您能堅持到這一步已經(jīng)很不易，如果你只是有個導航條就滿足的話，請參看第八步的副導航條的制作。
先去掉導航條的紅色背景，還有就是移除html文件中main-nav層的"class="hidden"",使導航條的內(nèi)容顯示出來。我們實現(xiàn)導航條圖片的變換的方法是純css代碼的，不包含任何js或是flash，因此我們所用的圖片是4幅分別由三個小圖組合而成的圖片，如下所示，并將這4幅圖保存于/images/nav/文件夾中:（另存圖片后 改成相應的文件名）
   
我們實現(xiàn)導航條的動態(tài)效果如下圖所示：（GIF動畫）
在網(wǎng)頁顯示的只是圖中紅框標出的部分，如果把每幅圖分為上，中，下三部分的話，未發(fā)生動作時顯示上部，當光標懸停時，顯示的是中部，被選擇時則顯示下部。
接下來進入css代碼部分，先往css文件中寫入：
/* Main Navigation */
#main-nav { height: 50px; }
#main-nav ul { margin: 0; padding: 0; }
注意：/* Main Navigation */為增加css文件可讀性的說明，不會影響表現(xiàn)。
#main-nav的height屬性定義了main-nav層的高度；"#main-nav ul" 則定義main-nav層中列表的屬性，在這里先定義其margin和padding為0。
根據(jù)先前的設計，導航條應該和左邊有一定的距離，這就需要設置main-nav層的左邊距(padding-left)為11px,但由于IE5和Mac瀏覽器的BUG，需要加入以下代碼：
/* IE5 Mac Hack \*/
#main-nav { padding-left: 11px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */
現(xiàn)在你可以看到導航列表距左邊有11px的距離，但是列表項目是豎排的，將<li>，即列表項目向左對齊就能使其從左到右橫向排列：
#main-nav li { float: left; }
為了使列表項目的尺寸和容納它的層保持一致，并利用浮動屬性使列表項目的文本隱藏，寫入：
#main-nav li a {
display: block;
height: 0px !important;
height /**/:50px; /* IE 5/Win hack */
padding: 50px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}
接著，要實現(xiàn)當光標懸停于列表項目上時，顯示背景圖片的中部，因此需要將背景圖片向上移動50px，寫入：
#main-nav li a:hover {
background-position: 0 -50px;
}
給各個列表項目設置寬度和背景圖片的路徑：
#main-nav li#about,
#main-nav li#about a { width: 71px; background-image: url(../images/nav/about.gif); }
#main-nav li#services,
#main-nav li#services a { width: 84px; background-image: url(../images/nav/services.gif); }
#main-nav li#portfolio,
#main-nav li#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }
#main-nav li#contact,
#main-nav li#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }
最后我們要做的就是，當列表項目被選時，顯示背景圖片的下部。為此我們需要增加一些css代碼對原有的css表現(xiàn)作一些修改：
body.about li#about,
body.about li#about a,
body.services li#services,
body.services li#services a,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.contact li#contact,
body.contact li#contact a {
background-position: 0 -100px;
}
以上看似龐大的css選擇器可以識別body標簽的類(class)，如html中為：
<body class="about">
以上css選擇器就讓li#about,li#about a,的背景向上移動100px，使其顯示背景圖片的下部。
如果我們希望網(wǎng)站頭部背景圖片也根據(jù)body標簽的類進行變換，就需修改css的#header為：
body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
至此就完成了"About"網(wǎng)頁的制作,依此類推，修改html中body的類為services/portfolio/contact制作相應html文件并分別保存。
在css文件中添加各個網(wǎng)頁相應的頭部背景圖片路徑(如services網(wǎng)頁的頭部背景圖片為services.jpg,在css中添加如下代碼)：
body.services #header {
height: 150px;
background: #db6d16
url(../images/headers/services.jpg);
}
然后用超級鏈接將這些網(wǎng)頁連接起來，就組成了一個網(wǎng)站了。
出處：Jorux Notebook
責任編輯：moby
上一頁 頁腳信息的表現(xiàn)設置 下一頁 解決IE瀏覽器的顯示BUG
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 9 頁 導航條的制作
