CSS網頁布局入門教程12：縱嚮導航菜單_基礎教程
來源：互聯網
上載者：User
縱嚮導航菜單也是網站應用程式中的一種重要形式，所謂縱嚮導航菜單是指放置在網頁左側或右側的從上至下排列的一種導航形式。先看一下效果吧！
的效果，我們先看一下代碼結構：
CSS
css入門
css進階
css進階
webUI
理論知識
實戰應用
進階技巧
DOM
DOM入門
DOM應用
DOM與瀏覽器
XHTML
參考手冊
交流論壇
從以上可以看出，這次的XHTML部分的代碼橫向代碼略有不同，我們沒有繼續使用ul和li標籤，其實繼續使用ul元素也能完好的實現縱嚮導航系統，但是在這風景點我們希望更多的提供不同途徑來展現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上部再有一條橫線的話成長兩條了，結果顯示出來就是兩像素的高度了。
好了，完整的效果可以預覽一下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>縱嚮導航菜單</title> <style> #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;} </style> </head> <body> <h1>CSS</h1> <h2>css入門</h2> <h2>css進階</h2> <h2>css進階</h2> <h1>webUI</h1> <h2>理論知識</h2> <h2>實戰應用</h2> <h2>進階技巧</h2> <h1>DOM</h1> <h2>DOM入門</h2> <h2>DOM應用</h2> <h2>DOM與瀏覽器</h2> <h1>XHTML</h1> <h2>參考手冊</h2> <h2>交流論壇</h2> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
