CSS盒子模式詳解二

　　自本人教程《CSS盒子模式詳解》發表以來，一直獲得各位網友的好評與支援，今天應各位網友的要求，也為了答謝各位網友的支援，本人將推出續篇教程，以加深各位網友對CSS盒子模式的理解。此教程面向讀者還是DIV排版入門者，如果你是高手，那就不要浪費自己時間了。

　　本人這次將講解一個縱向CSS導覽列執行個體的製作，在講解過程中將會延用之前發表教程所講到的“盒子”概念，如果你沒有看過本人之前的那篇教程，又或者你還不理解什麼是“盒子”這一概念，請先通過下面的兩個連結閱讀本人之前發表的教程，看完之後再回來看此教程，如有不便敬請原諒。

　　用CSS做導覽列也是輕而易舉事情，在本人之前發表的教程中其實也有一個簡單的橫嚮導航欄製作，那時只給出了樣式代碼並沒有作太多的解釋，這次要做一個相對複雜點的導覽列，為了加深大家對CSS盒子模式的理解，特別選做一個有多層DIV嵌套實現的導覽列。

　　先看實現原理動畫示範：

　　

　　範例程式碼運行瀏覽：http://tech.ddvip.com/yssl/29811/29811.html

　　在再看結果圖：

　　

　　這個導覽列中的連結用到了背景圖片的轉場效果，滑鼠移到連結上導覽列背景圖片和文字顏色都會跟著改變，整個導航用到下列4幅圖片素材：

　　

[1] [2] [3] [4]  下一頁