主頁(yè) > 知識(shí)庫(kù) > CSS網(wǎng)頁(yè)布局入門教程12：縱向?qū)Ш讲藛?/div>

CSS網(wǎng)頁(yè)布局入門教程12：縱向?qū)Ш讲藛?/h1>

縱向?qū)Ш讲藛我彩蔷W(wǎng)站應(yīng)用中的一種重要形式，所謂縱向?qū)Ш讲藛问侵阜胖迷诰W(wǎng)頁(yè)左側(cè)或右側(cè)的從上至下排列的一種導(dǎo)航形式。先看一下效果吧！

如圖所示的效果，我們先看一下代碼結(jié)構(gòu)：

div id="nav">
    h1>CSS/h1>
        h2>a href="#">css入門/a>/h2>
        h2>a href="#">css進(jìn)階/a>/h2>
        h2>a href="#">css高級(jí)/a>/h2>
    h1>webUI/h1>
        h2>a href="#">理論知識(shí)/a>/h2>
        h2>a href="#">實(shí)戰(zhàn)應(yīng)用/a>/h2>
        h2>a href="#">高級(jí)技巧/a>/h2>
    h1>DOM/h1>
        h2>a href="#">DOM入門/a>/h2>
        h2>a href="#">DOM應(yīng)用/a>/h2>
        h2>a href="#">DOM與瀏覽器/a>/h2>
    h1>XHTML/h1>
        h2>a href="#">參考手冊(cè)/a>/h2>
        h2>a href="#">交流論壇/a>/h2>
/div>

　　從以上可以看出，這次的XHTML部分的代碼橫向代碼略有不同，我們沒(méi)有繼續(xù)使用ul和li標(biāo)簽，其實(shí)繼續(xù)使用ul元素也能完好的實(shí)現(xiàn)縱向?qū)Ш较到y(tǒng)，但是在這風(fēng)景點(diǎn)我們希望更多的提供不同途徑來(lái)展現(xiàn)css而已設(shè)計(jì)的靈活與方便性以便于拋磚引玉，開拓更多的設(shè)計(jì)思想。
　　這一次采用的是div+h1+h2的形式。我們使用div標(biāo)簽設(shè)定了一個(gè)導(dǎo)航的結(jié)構(gòu)區(qū)域。在這個(gè)區(qū)域中我們使用了h1來(lái)作二級(jí)分類的標(biāo)題，h2來(lái)做二級(jí)分類下面的細(xì)節(jié)內(nèi)容。在XHTML的講法意義中，h1,h2,h3這些標(biāo)簽本身就具有用于對(duì)文本進(jìn)行層級(jí)劃分的意義，直接使用h1,h2來(lái)表示層級(jí)關(guān)系，相對(duì)于在標(biāo)簽中加入id或class來(lái)做層級(jí)的標(biāo)記更為簡(jiǎn)單和直觀，在這里使用h1,h2來(lái)標(biāo)記不同級(jí)別的分類名稱也實(shí)在是再合適不過(guò)了。我們來(lái)看一看css代碼的設(shè)計(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代碼部分采用了簡(jiǎn)化寫法，如果哪句意思看不懂，您可以在Dreamweaver中打開選擇編輯樣式表即可查看具體是哪一項(xiàng)了，相信經(jīng)過(guò)這樣幾次練習(xí)，這些代碼您已經(jīng)能完全看懂了，說(shuō)明您離高手又近了一步了。
　　大家可能已經(jīng)注意到了，#nav的邊框本例中只設(shè)置了左右下和一像素，而沒(méi)有上，而在h1的樣式里設(shè)置了上部的上像素？這是為什么呢？因?yàn)閔1的樣式上部都有一條橫線，如果nav上部再有一條橫線的話成長(zhǎng)兩條了，結(jié)果顯示出來(lái)就是兩像素的高度了。
　　好了，完整的效果可以預(yù)覽一下：

<!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>縱向?qū)Ш讲藛?/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> <div   class="1jrp0gx"   id="nav">     <h1>CSS</h1>         <h2>css入門</h2>         <h2>css進(jìn)階</h2>         <h2>css高級(jí)</h2>     <h1>webUI</h1>         <h2>理論知識(shí)</h2>         <h2>實(shí)戰(zhàn)應(yīng)用</h2>         <h2>高級(jí)技巧</h2>     <h1>DOM</h1>         <h2>DOM入門</h2>         <h2>DOM應(yīng)用</h2>         <h2>DOM與瀏覽器</h2>     <h1>XHTML</h1>         <h2>參考手冊(cè)</h2>         <h2>交流論壇</h2> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

標(biāo)簽：邯鄲東莞南充濱州陽(yáng)泉喀什海東遼源

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《CSS網(wǎng)頁(yè)布局入門教程12：縱向?qū)Ш讲藛巍?，本文關(guān)鍵詞 CSS,網(wǎng)頁(yè),布局,入門教程,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。