作者：webflash 時間： 2007-03-28 文件類型：原創 來自：藍色理想
作者：唐國輝
實現原理動畫示範：http://www.blueidea.com/articleimg/2007/03/4563/cssNav.swf
自本人教程《徹底弄懂CSS盒子模式(DIV布局快速入門)》發表以來，一直獲得各位網友的好評與支援，今天應各位網友的要求，也為了答謝各位網友的支援，本人將推出續篇教程，以加深各位網友對CSS盒子模式的理解。此教程面向讀者還是DIV排版入門者，如果你是高手，那就不要浪費自己時間了。
本人這次將講解一個縱向CSS導覽列執行個體的製作，在講解過程中將會延用之前發表教程所講到的“盒子”概念，如果你沒有看過本人之前的那篇教程，又或者你還不理解什麼是“盒子”這一概念，請先通過下面的兩個連結閱讀本人之前發表的教程，看完之後再回來看此教程，如有不便敬請原諒。
1．徹底弄懂CSS盒子模式(DIV布局快速入門)
2．徹底弄懂CSS盒子模式(DIV布局快速入門)
用CSS做導覽列也是輕而易舉事情，在本人之前發表的教程中其實也有一個簡單的橫嚮導航欄製作，那時只給出了樣式代碼並沒有作太多的解釋，這次要做一個相對複雜點的導覽列，為了加深大家對CSS盒子模式的理解，特別選做一個有多個盒子嵌套實現的導覽列。
先看實現原理動畫示範：
運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>徹底弄懂CSS盒子模式(導覽列執行個體詳解)</title><br /><style type="text/css"><br /><!--<br />* {<br />margin: 0px;<br />padding: 0px;<br />}<br />#nav {<br />background: url(http://www.hsptc.com/cssImg/bj.jpg) repeat-y;<br />width: 200px;<br />overflow: hidden;<br />}<br />#nav li {<br />background: url(http://www.hsptc.com/cssImg/mylan.gif) no-repeat left center ;<br />height: 35px;<br />width: 190px;<br />padding-top:15px;<br />}<br />#nav a {<br />background: url(http://www.hsptc.com/cssImg/lanbj2.gif) no-repeat left center;<br />text-decoration: none;<br />height: 20px;<br />width: 155px;<br />display: block;<br />float: right;<br />padding: 0px 0px 0px 5px;<br />font-weight: bold;<br />font-size: 9pt;<br />line-height: 20px;<br />color: #630;<br />border-left:10px solid #f90;<br />}<br />#nav a:hover {<br />background-image: url(http://www.hsptc.com/cssImg/lanbj3.gif);<br />color: #FFFFFF;<br />}<br />--><br /></style><br /></head><br /><body><br /><ul id="nav"><br /><li><br /><a href="#">徹底弄懂CSS盒子模式1</a><br /></li><br /><li><br /><a href="#">徹底弄懂CSS盒子模式2</a><br /></li><br /><li><br /><a href="#">徹底弄懂CSS盒子模式3</a><br /></li><br /><li><br /><a href="#">徹底弄懂CSS盒子模式4</a><br /></li><br /><li><br /><a href="#">徹底弄懂CSS盒子模式5</a><br /></li><br /></ul><br /></body><br /></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
現在再看結果圖：
這個導覽列中的連結用到了背景圖片的轉場效果，滑鼠移到連結上導覽列背景圖片和文字顏色都會跟著改變，整個導航用到下列4幅圖片素材：
即連結不同狀態的兩張背景圖片，每條導航左邊的“勾月”圖形，最外邊大盒子1像素高的背景圖片。
看了動畫示範和結果圖，也瞭解了用到那些素材，現在就請你帶著一股好奇和我一起來完成這個導覽列吧，當做完這個導覽列之後你會發現原來DIV排版那麼簡單。願你更有信心學好DIV排版！
先來分析一下這個導覽列要用到多少個盒子，在分析之前我們還是要形成一種思想：盡量減少和最佳化XHTML代碼，讓他們基本上都有語義。這個導覽列最少的盒子實現是：最外邊一個大盒子(ul)，這個盒子與1像素高的背景圖片等寬，裡面又有五個小盒子(li)分別裝著每一個導覽列，這個盒子與“勾月”圖形等高，導覽列這個盒子裡面又裝著一個稍小的盒子(a)，這個盒子又裝著一個黃色的修飾盒子(a的左邊框，這裡勉強理解為盒子，因為它不像一般的邊框那麼細，在網頁中看起來像個盒子)和一個有文字的連結盒子(a的內容)。
網頁結構代碼：
1
1．現在正式開始做，做之前初始化一下各簽標的邊界和填充，這裡用樣式：
1* {}{2．組裝最外邊的大盒子ul，寬200px,高為自動auto或者乾脆不要，背景圖片為bj.jpg，背景縱向重複，用<ul id=”nav”>方式引用樣式，用到樣式：
1#nav {}{3．組裝每條導航的盒子li，這個盒子與“勾月”圖形等高，並把“勾月”圖形以背景形式放在這個盒子的左邊，並用15px的填充把盒子內容區塊推向正中合適位置（當然你也可以考慮給子級a指定邊界屬性來實現），並讓這個盒子靠左邊對齊（因為這個盒子的寬度比外邊的大盒子小，如果相等則可以不用考慮對齊），這裡用到樣式float的屬性，本人沒有寫入樣式中則取其預設值，樣式代碼如下：
1#nav li {}{4．組裝連結盒子a，這裡用到樣式： display: block;讓連結以塊狀方式呈現，並為連結安排背景圖片，為了安全起見設定背景不重複，垂直置中（如果瀏覽器出錯解釋錯誤，而你的背景又不是純色的，那麼盒子過大導致的背景重複將會影響網頁美觀），連結文字樣式去除底線，整個盒子靠右對齊，樣式如下：
1#nav a {}{5．組裝黃色修飾塊盒子(a的左邊框，如果又獨立用一個盒子來做就不科學了，因為此方法最簡單)，直接給a加入下面一條樣式即可，樣式代碼如下：
#nav a {
border-left:10px solid #f90;
}
6．最後簡單為滑鼠移到連結上時，連結風格的改變指定一個樣式：
#nav a:hover {
background-image: url(lanbj3.gif);
color: #FFFFFF;
}
至此完成樣式代碼編寫，上面已給出內容部分的結構代碼，把它們結合到網頁中就算是完成本次導覽列的製作。再次感謝本專欄斑竹blankzheng指點最佳化。
源檔案打包下載 xhtml.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
