CSS縱向?qū)Ш讲藛蝊Div+CSS教程
CSS縱向?qū)Ш讲藛慰v向?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部分的代碼橫向代碼略有不同,我們沒有繼續(xù)使用ul和li標(biāo)簽,其實(shí)繼續(xù)使用ul元素也能完好的實(shí)現(xiàn)縱向?qū)Ш较到y(tǒng),但是在這風(fēng)景點(diǎn)我們希望更多的提供不同途徑來展現(xiàn)css而已設(shè)計(jì)的靈活與方便性以便于拋磚引玉,開拓更多的設(shè)計(jì)思想。
這一次采用的是div+h1+h2的形式。我們使用div標(biāo)簽設(shè)定了一個(gè)導(dǎo)航的結(jié)構(gòu)區(qū)域。在這個(gè)區(qū)域中我們使用了h1來作二級(jí)分類的標(biāo)題,h2來做二級(jí)分類下面的細(xì)節(jié)內(nèi)容。在XHTML的講法意義中,h1,h2,h3這些標(biāo)簽本身就具有用于對(duì)文本進(jìn)行層級(jí)劃分的意義,直接使用h1,h2來表示層級(jí)關(guān)系,相對(duì)于在標(biāo)簽中加入id或class來做層級(jí)的標(biāo)記更為簡(jiǎn)單和直觀,在這里使用h1,h2來標(biāo)記不同級(jí)別的分類名稱也實(shí)在是再合適不過了。我們來看一看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)過這樣幾次練習(xí),這些代碼您已經(jīng)能完全看懂了,說明您離高手又近了一步了。
大家可能已經(jīng)注意到了,#nav的邊框本例中只設(shè)置了左右下和一像素,而沒有上,而在h1的樣式里設(shè)置了上部的上像素?這是為什么呢?因?yàn)閔1的樣式上部都有一條橫線,如果nav上部再有一條橫線的話成長(zhǎng)兩條了,結(jié)果顯示出來就是兩像素的高度了。
好了,完整的效果可以預(yù)覽一下:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- CSS網(wǎng)站橫向?qū)Ш?/a>
- 運(yùn)用DIVCSS進(jìn)行網(wǎng)站構(gòu)架的一般流程參考
- Web標(biāo)準(zhǔn)化之form語(yǔ)義結(jié)構(gòu)的實(shí)例
- DIV元素和SPAN元素的區(qū)別和應(yīng)用
- 如何使用list-style項(xiàng)目符號(hào)?
- 段落前面空兩個(gè)字,不使用空格。怎么做?
- CSS帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш?/a>
- CSS網(wǎng)頁(yè)布局開發(fā)時(shí)的常見問題小結(jié)
- CSS hack 用CSS條件注釋實(shí)現(xiàn)
- 如何用CSS自定義鼠標(biāo)顯示的形狀?
猜你也喜歡看這些
- CSS背景圖片background-image須注意路徑問題!
- CSS布局欣賞:淘寶首頁(yè)布局效果
- css javascript圖片自動(dòng)同比例縮小并且實(shí)現(xiàn)垂直居中
- HowCSSLayoutWorks-如何進(jìn)行CSS布局
- DIV CSS布局入門示例(一)頁(yè)面布局與規(guī)劃
- DivCSS布局實(shí)例:三行單列上下固定高度中間自適應(yīng)
- 用css制作有滾動(dòng)條的居中彈出框
- CSS菜單:基本橫向菜單效果超炫
- DIV CSS布局實(shí)例:半透明陰影效果的實(shí)現(xiàn)
- DIVCSS菜單:縱向CSS菜單實(shí)例之橙色記憶
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-CSS縱向?qū)Ш讲藛?/strong>。