CSS縱向?qū)Ш讲藛螌崿F(xiàn)代碼
這里向大家描述一下CSS縱向?qū)Ш讲藛螌崿F(xiàn)方法，CSS縱向?qū)Ш讲藛问侵阜胖迷诰W(wǎng)頁左側(cè)或右側(cè)的從上至下排列的一種導(dǎo)航形式，這里通過實例向大家講解一下它的實現(xiàn)方法，相信本文介紹一定會讓你有所收獲。
CSS縱向?qū)Ш讲藛螌崿F(xiàn)
縱向?qū)Ш讲藛我彩蔷W(wǎng)站應(yīng)用中的一種重要形式，所謂CSS縱向?qū)Ш讲藛问侵阜胖迷诰W(wǎng)頁左側(cè)或右側(cè)的從上至下排列的一種導(dǎo)航形式。先看一下效果吧！
如圖所示的CSS縱向?qū)Ш讲藛涡Ч?，我們先看一下代碼結(jié)構(gòu)：
- <dividdivid="nav">
- <h1>CSS</h1>
- <h2><ahrefahref="#">css入門</a></h2>
- <h2><ahrefahref="#">css進階</a></h2>
- <h2><ahrefahref="#">css高級</a></h2>
- <h1>webUI</h1>
- <h2><ahrefahref="#">理論知識</a></h2>
- <h2><ahrefahref="#">實戰(zhàn)應(yīng)用</a></h2>
- <h2><ahrefahref="#">高級技巧</a></h2>
- <h1>DOM</h1>
- <h2><ahrefahref="#">DOM入門</a></h2>
- <h2><ahrefahref="#">DOM應(yīng)用</a></h2>
- <h2><ahrefahref="#">DOM與瀏覽器</a></h2>
- <h1>XHTML</h1>
- <h2><ahrefahref="#">參考手冊</a></h2>
- <h2><ahrefahref="#">交流論壇</a></h2>
- </div>
從以上可以看出，這次的XHTML部分的代碼橫向代碼略有不同，我們沒有繼續(xù)使用ul和li標(biāo)簽，其實繼續(xù)使用ul元素也能完好的實現(xiàn)縱向?qū)Ш较到y(tǒng)，但是在這風(fēng)景點我們希望更多的提供不同途徑來展現(xiàn)css而已設(shè)計的靈活與方便性以便于拋磚引玉，開拓更多的設(shè)計思想。
這一次采用的是div+h1+h2的形式。我們使用div標(biāo)簽設(shè)定了一個導(dǎo)航的結(jié)構(gòu)區(qū)域。在這個區(qū)域中我們使用了h1來作二級分類的標(biāo)題，h2來做二級分類下面的細(xì)節(jié)內(nèi)容。在XHTML的講法意義中，h1,h2,h3這些標(biāo)簽本身就具有用于對文本進行層級劃分的意義，直接使用h1,h2來表示層級關(guān)系，相對于在標(biāo)簽中加入id或class來做層級的標(biāo)記更為簡單和直觀，在這里使用h1,h2來標(biāo)記不同級別的分類名稱也實在是再合適不過了。我們來看一看css代碼的設(shè)計：
- #nav{width:100px;border-color:#c5c6c4;
- border-style:solid;border-width:0px1px1px1px;}
- #navh1{margin:0px;padding:4px;font-size:12px;
- font-weight:bold;font-family:Verdana;
- border-top:1pxsolid#c5c6c4;background-color:#CCCCCC;}
- #navh2{margin:0px;padding:4px;
- font-size:12px;font-family:Verdana;font-weight:normal;}
- #navh2a{color:#666666;text-decoration:none;}
- #navh2a:hover{color:#999999;text-decoration:underline;}
此實現(xiàn)CSS縱向?qū)Ш讲藛蔚腃SS代碼部分采用了簡化寫法，如果哪句意思看不懂，您可以在Dreamweaver中打開選擇編輯樣式表即可查看具體是哪一項了，相信經(jīng)過這樣幾次練習(xí)，這些代碼您已經(jīng)能完全看懂了，說明您離高手又近了一步了。
大家可能已經(jīng)注意到了，#nav的邊框本例中只設(shè)置了左右下和一像素，而沒有上，而在h1的樣式里設(shè)置了上部的上像素？這是為什么呢？因為h1的樣式上部都有一條橫線，如果nav上部再有一條橫線的話成長兩條了，結(jié)果顯示出來就是兩像素的高度了。#p#
完整代碼如下：
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
- <title>CSS縱向?qū)Ш讲藛?/span></title>
- <style>
- #nav{width:100px;border-color:#c5c6c4;
- border-style:solid;border-width:0px1px1px1px;}
- #navh1{margin:0px;padding:4px;font-size:12px;
- font-weight:bold;font-family:Verdana;
- border-top:1pxsolid#c5c6c4;background-color:#CCCCCC;}
- #navh2{margin:0px;padding:4px;font-size:12px;
- font-family:Verdana;font-weight:normal;}
- #navh2a{color:#666666;text-decoration:none;}
- #navh2a:hover{color:#999999;text-decoration:underline;}
- </style>
- </head>
- <body>
- <dividdivid="nav">
- <h1>CSS</h1>
- <h2><ahrefahref="#">css入門</a></h2>
- <h2><ahrefahref="#">css進階</a></h2>
- <h2><ahrefahref="#">css高級</a></h2>
- <h1>webUI</h1>
- <h2><ahrefahref="#">理論知識</a></h2>
- <h2><ahrefahref="#">實戰(zhàn)應(yīng)用</a></h2>
- <h2><ahrefahref="#">高級技巧</a></h2>
- <h1>DOM</h1>
- <h2><ahrefahref="#">DOM入門</a></h2>
- <h2><ahrefahref="#">DOM應(yīng)用</a></h2>
- <h2><ahrefahref="#">DOM與瀏覽器</a></h2>
- <h1>XHTML</h1>
- <h2><ahrefahref="#">參考手冊</a></h2>
- <h2><ahrefahref="#">交流論壇</a></h2>
- </div>
- </body>
- </html>
【編輯推薦】
- DIV+CSS滑動門技術(shù)簡介
- 暢談DIV排版和table排版的區(qū)別
- 14大CSS工具提高網(wǎng)頁設(shè)計效率
- 實現(xiàn)DIV圖片居中方法揭秘
- 鼠標(biāo)經(jīng)過時改變DIV背景顏色的三種途徑
