縱向(xiàng)導航(háng)菜單(dān)也是網(wǎng)站應(yīng)用(yòng)中(zhōng)的一種重要形(xíng)式(shì)，所謂(wèi)縱(zòng)向導航菜單(dān)是(shì)指放置(zhì)在網頁左(zuǒ)側或右(yòu)側(cè)的從(cóng)上至下排(pái)列(liè)的(dí)一種導航形式。先看一(yī)下效(xiào)果吧！
如(rú)圖所示(shì)的效(xiào)果(guǒ)，我(wǒ)們先看一下代(dài)碼結構(gòu)：
<div id="nav"> <h1>CSS</h1> <h2><a href="#">css入門</a></h2> <h2><a href="#">css進階</a></h2> <h2><a href="#">css高級</a></h2> <h1>webUI</h1> <h2><a href="#">理論知識</a></h2> <h2><a href="#">實戰應用</a></h2> <h2><a href="#">高級技巧</a></h2> <h1>DOM</h1> <h2><a href="#">DOM入門</a></h2> <h2><a href="#">DOM應用</a></h2> <h2><a href="#">DOM與瀏覽器</a></h2> <h1>XHTML</h1> <h2><a href="#">參考手冊</a></h2> <h2><a href="#">交流論壇</a></h2> </div>
從以(yǐ)上可(kě)以(yǐ)看出，這次的XHTML部分的(dí)代碼橫向(xiàng)代碼(mǎ)略(lüè)有不(bù)同，我們(mén)沒有繼續(xù)使用ul和(hé)li標(biāo)簽(qiān)，其(qí)實繼續(xù)使(shǐ)用ul元(yuán)素也能(néng)完(wán)好(hǎo)的實(shí)現(xiàn)縱向導(dǎo)航(háng)係統，但是在這(zhè)風景點(diǎn)我(wǒ)們(mén)希(xī)望更(gēng)多的(dí)提(tí)供不(bù)同途(tú)徑來展現(xiàn)css而(ér)已設計的靈活與(yǔ)方便性以便於(yú)拋磚(zhuān)引玉，開(kāi)拓更多(duō)的(dí)設計思想(xiǎng)。
這一(yī)次采(cǎi)用的是div+h1+h2的形(xíng)式。我們使(shǐ)用(yòng)div標簽設(shè)定了(liǎo)一個(gè)導(dǎo)航的結構(gòu)區域。在(zài)這個(gè)區域中(zhōng)我們使用了h1來作(zuò)二(èr)級分類(lèi)的標題，h2來(lái)做(zuò)二(èr)級分(fēn)類下麵的細節內(nèi)容。在XHTML的(dí)講(jiǎng)法意義(yì)中，h1,h2,h3這(zhè)些(xiē)標簽(qiān)本(běn)身就具有用(yòng)於對文本(běn)進行層級劃(huá)分的意義，直接使用(yòng)h1,h2來(lái)表示層(céng)級關(guān)係，相對(duì)於在(zài)標(biāo)簽(qiān)中(zhōng)加入(rù)id或(huò)class來做層(céng)級(jí)的(dí)標記更為簡(jiǎn)單和直觀(guān)，在(zài)這裏使(shǐ)用h1,h2來標(biāo)記不(bù)同(tóng)級別的(dí)分(fēn)類名稱(chēng)也(yě)實在(zài)是再(zài)合適(shì)不過(guò)了。我(wǒ)們來看(kàn)一看(kàn)css代(dài)碼的設計(jì)：
#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代(dài)碼部分采(cǎi)用(yòng)了簡(jiǎn)化寫法，如(rú)果哪句意(yì)思看不懂(dǒng)，您可以在(zài)Dreamweaver中打開(kāi)選擇(zé)編輯樣式表即(jí)可查看(kàn)具體(tǐ)是(shì)哪(nǎ)一項(xiàng)了，相信(xìn)經過這樣(yàng)幾(jī)次練(liàn)習，這(zhè)些代(dài)碼(mǎ)您(nín)已(yǐ)經(jīng)能(néng)完(wán)全(quán)看懂了，說(shuō)明(míng)您離(lí)高手(shǒu)又(yòu)近了一(yī)步(bù)了。
大家(jiā)可能(néng)已經注意到了(liǎo)，#nav的邊(biān)框(kuàng)本例(lì)中(zhōng)隻(zhī)設置(zhì)了左(zuǒ)右(yòu)下和(hé)一(yī)像素，而(ér)沒有(yǒu)上，而(ér)在h1的(dí)樣式裏設(shè)置了上(shàng)部的(dí)上像素(sù)？這(zhè)是(shì)為什麼呢？因為h1的樣式(shì)上部都有一條(tiáo)橫綫(xiàn)，如(rú)果nav上(shàng)部再有(yǒu)一條橫(héng)綫的(dí)話成長兩條了(liǎo)，結果顯示(shì)出來(lái)就(jiù)是兩(liǎng)像(xiàng)素(sù)的(dí)高度了。
轉載請保(bǎo)留原(yuán)文地(dì)址(zhǐ): https://antelcom.cn/show-468.html