CSS網(wǎng)頁布局入門教程12：縱向?qū)Ш讲藛?/h1>
更新時間：2007年09月13日 22:45:51 作者：
縱向?qū)Ш讲藛我彩蔷W(wǎng)站應用中的一種重要形式，所謂縱向?qū)Ш讲藛问侵阜胖迷诰W(wǎng)頁左側(cè)或右側(cè)的從上至下排列的一種導航形式。先看一下效果吧！
如圖所示的效果，我們先看一下代碼結(jié)構(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="#">實戰(zhàn)應用</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>
從以上可以看出，這次的XHTML部分的代碼橫向代碼略有不同，我們沒有繼續(xù)使用ul和li標簽，其實繼續(xù)使用ul元素也能完好的實現(xiàn)縱向?qū)Ш较到y(tǒng)，但是在這風景點我們希望更多的提供不同途徑來展現(xiàn)css而已設計的靈活與方便性以便于拋磚引玉，開拓更多的設計思想。
這一次采用的是div+h1+h2的形式。我們使用div標簽設定了一個導航的結(jié)構(gòu)區(qū)域。在這個區(qū)域中我們使用了h1來作二級分類的標題，h2來做二級分類下面的細節(jié)內(nèi)容。在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中打開選擇編輯樣式表即可查看具體是哪一項了，相信經(jīng)過這樣幾次練習，這些代碼您已經(jīng)能完全看懂了，說明您離高手又近了一步了。
大家可能已經(jīng)注意到了，#nav的邊框本例中只設置了左右下和一像素，而沒有上，而在h1的樣式里設置了上部的上像素？這是為什么呢？因為h1的樣式上部都有一條橫線，如果nav上部再有一條橫線的話成長兩條了，結(jié)果顯示出來就是兩像素的高度了。
好了，完整的效果可以預覽一下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關文章
-
這篇文章主要介紹了Lesson02_04 表單標簽(2) 2007-02-02
-
第4天:調(diào)用樣式表... 2006-12-12
-
CSS網(wǎng)頁布局入門教程8：三列浮動中間列寬度自適應
CSS網(wǎng)頁布局入門教程8：三列浮動中間列寬度自適應... 2007-09-09
-
Lesson01_05 HTML中的超鏈接... 2007-02-02
-
一般來說，網(wǎng)頁的背景色應該柔和一些、素一些、淡一些，再配上深色的文字，使人看起來自然、舒暢 2007-03-03
-
CSS網(wǎng)頁布局入門教程5：二列寬度自適應... 2007-09-09
-
詳細分析css float 屬性以及position:absolute 的區(qū)別
相信很多人都有這樣的問題，在頁面布局中float和position:absolute哪個更好用呢？既然是布局，就用float好，這個我比較常用。這個浮動是可以清除的，一般不會影響整體布局。
而position，定位，是不受約束的，這個貌似都談不上布局了，一般要是做什么特殊的定位或者浮動層的時候，可以考慮使用。正常頁面布局，我個人建議用FLOAT 2014-05-05
-
Default style sheet for HTML 4
Default style sheet for HTML 4... 2007-03-03
-
Lesson03_02 樣式規(guī)則選擇器... 2007-02-02
-
CSS網(wǎng)頁布局入門教程13：下拉及多級彈出式菜單
CSS網(wǎng)頁布局入門教程13：下拉及多級彈出式菜單... 2007-09-09
最新評論
如圖所示的效果，我們先看一下代碼結(jié)構(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="#">實戰(zhàn)應用</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>
從以上可以看出，這次的XHTML部分的代碼橫向代碼略有不同，我們沒有繼續(xù)使用ul和li標簽，其實繼續(xù)使用ul元素也能完好的實現(xiàn)縱向?qū)Ш较到y(tǒng)，但是在這風景點我們希望更多的提供不同途徑來展現(xiàn)css而已設計的靈活與方便性以便于拋磚引玉，開拓更多的設計思想。
這一次采用的是div+h1+h2的形式。我們使用div標簽設定了一個導航的結(jié)構(gòu)區(qū)域。在這個區(qū)域中我們使用了h1來作二級分類的標題，h2來做二級分類下面的細節(jié)內(nèi)容。在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中打開選擇編輯樣式表即可查看具體是哪一項了，相信經(jīng)過這樣幾次練習，這些代碼您已經(jīng)能完全看懂了，說明您離高手又近了一步了。
大家可能已經(jīng)注意到了，#nav的邊框本例中只設置了左右下和一像素，而沒有上，而在h1的樣式里設置了上部的上像素？這是為什么呢？因為h1的樣式上部都有一條橫線，如果nav上部再有一條橫線的話成長兩條了，結(jié)果顯示出來就是兩像素的高度了。
好了，完整的效果可以預覽一下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關文章
- 這篇文章主要介紹了Lesson02_04 表單標簽(2)2007-02-02
- 第4天:調(diào)用樣式表...2006-12-12
-
CSS網(wǎng)頁布局入門教程8：三列浮動中間列寬度自適應
CSS網(wǎng)頁布局入門教程8：三列浮動中間列寬度自適應...2007-09-09 - Lesson01_05 HTML中的超鏈接...2007-02-02
- 一般來說，網(wǎng)頁的背景色應該柔和一些、素一些、淡一些，再配上深色的文字，使人看起來自然、舒暢2007-03-03
- CSS網(wǎng)頁布局入門教程5：二列寬度自適應...2007-09-09
-
詳細分析css float 屬性以及position:absolute 的區(qū)別
相信很多人都有這樣的問題，在頁面布局中float和position:absolute哪個更好用呢？既然是布局，就用float好，這個我比較常用。這個浮動是可以清除的，一般不會影響整體布局。 而position，定位，是不受約束的，這個貌似都談不上布局了，一般要是做什么特殊的定位或者浮動層的時候，可以考慮使用。正常頁面布局，我個人建議用FLOAT2014-05-05 -
Default style sheet for HTML 4
Default style sheet for HTML 4...2007-03-03 - Lesson03_02 樣式規(guī)則選擇器...2007-02-02
-
CSS網(wǎng)頁布局入門教程13：下拉及多級彈出式菜單
CSS網(wǎng)頁布局入門教程13：下拉及多級彈出式菜單...2007-09-09