div css縱向導航菜單的方法

歡迎大家在這裡學習div css縱向導航菜單!下面是我們給大家整理出來的精彩內容。希望大家在這裡學習!

這一次采用的是div+h1+h2的形式。我們使用div標簽設定了一個導航的結構區域。在這個區域中我們使用了h1來作二級分類的標題，h2來做二級分類下面的細節內容。在XHTML的講法意義中，h1,h2,h3這些標簽本身就具有用於對文本進行層級劃分的意義，直接使用h1,h2來表示層級關系，相對於在標簽中加入id或class來做層級的標記更為簡單和直觀，在這裡使用h1,h2來標記不同級別的分類名稱也實在是再合適不過了。我們來看一看css代碼的設計：

#nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;}

#nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;}

#nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;}

#nav h2 a { color:#666666; text-decoration:none;}

#nav h2 a:hover { color:#999999; text-decoration:underline;}

本css代碼部分采用了簡化寫法，如果哪句意思看不懂，您可以在Dreamweaver中打開選擇編輯樣式表即可查看具體是哪一項了，相信經過這樣幾次練習，這些代碼您已經能完全看懂了，說明您離高手又近了一步了。

大家可能已經注意到了，#nav的邊框本例中只設置了左右下和一像素，而沒有上，而在h1的樣式裡設置了上部的上像素?這是為什麼呢?因為h1的樣式上部都有一條橫線，如果nav上部再有一條橫線的話成長兩條了，結果顯示出來就是兩像素的高度了。

好了，div css縱向導航菜單內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

div css長鏈接換行的方法