|
導(dǎo)航清單
在我的個人網(wǎng)站(www.simplebits.com)里我分享了幾種將無序清單轉(zhuǎn)化為水平導(dǎo)航條的方法,用普通的,結(jié)構(gòu)化的XHTML就像我們的食品清單示例那樣創(chuàng)造一個類似分頁標(biāo)簽(Tab)的效果.
我們把那個食品清單轉(zhuǎn)換成一個網(wǎng)上超市的導(dǎo)航條(這個超市只賣幾種東西就是了...).
我們想要這個導(dǎo)航條以水平的方式呈現(xiàn),并且能夠在鼠標(biāo)劃過,選中時(shí)有某種強(qiáng)調(diào)顯示,以便我們模擬分頁標(biāo)簽的效果.
首先,我們?yōu)榍鍐渭由弦粋�id,這樣我們就可以為它單獨(dú)定義css樣式了,同時(shí)我們也將把每個食品項(xiàng)目轉(zhuǎn)成鏈接.
<ul id="minitabs">
<li><a href="/apples/">Apples</a></li>
<li><a href="/spaghetti/">Spaghetti</a></li>
<li><a href="/greenbeans/">Green Beans</a></li>
<li><a href="/milk/">Milk</a></li>
</ul>
現(xiàn)在,開始加上一些輔助的css:
#minitabs{
margin:0;
padding:0 0 20px 10px;
border-bottom:1px solid #696;
}
#minitabs li{
margin:0;
padding:0;
display:inline;
list-style:none;
}
在這里我們已經(jīng)完成了去掉默認(rèn)圓點(diǎn)符號和行內(nèi)縮進(jìn)的工作,我們也把 display設(shè)置成inline,往垂直清單轉(zhuǎn)化成水平清單邁出了第一步,同時(shí)我們也加上了底部邊框以便區(qū)分出整個鏈接組.
把清單轉(zhuǎn)化成水平導(dǎo)航條的第二步,是將我們的鏈接全部浮動到左邊顯示,我們同樣為所有的超鏈接加上簡單的樣式:定義外邊距和內(nèi)補(bǔ)丁的大小:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #9c9;
}
在這里我們將清單中所有的元素都定義float:left,是為了讓他們能水平顯示排列于一行之內(nèi),同時(shí)我們也加上了了一些色彩,把鏈接改成粗體,拿掉了鏈接底部的下劃線.
然后,為鼠標(biāo)滑過或選中的鏈接創(chuàng)建一個模擬分頁標(biāo)簽的邊線:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #9c9;
}
#minitabs a.active, #minitabs a:hover {
border-bottom: 4px solid #696;
padding-bottom: 2px;
color: #363;
}
#minitabs a:hover {
color: #696;
}
為了強(qiáng)調(diào)鏈接,我們在鼠標(biāo)劃過或選中時(shí)增加一個4像素高的底邊,我們也可以使選中的<a>標(biāo)簽保持強(qiáng)調(diào)效果,只要加上class="active":
<li><a href="/spaghetti/" class="active">spaghetti</a></li>
這個 active類別與 a:hover的共用相同的css樣式.(圖 1 - 7)
圖1 - 7
我在自己的網(wǎng)站(www.simlpebits.com)以及2003年7月重構(gòu)Inc.com(www.inc.com)里面都用到了這個技巧.如果你需要更多的示例代碼,可以自由訪問這兩個網(wǎng)站并查看他們的源代碼.
只需要加上一些內(nèi)補(bǔ)丁和邊框,就可以達(dá)到各種類似分頁標(biāo)簽的效果了,到目前為止,我們甚至連一張圖,一句javascript都沒有使用,而僅僅只用到了基本的xhtml結(jié)構(gòu)就構(gòu)成了我們的食品清單,這實(shí)在是太棒了!
迷你分頁標(biāo)簽的外觀
如果你想要和平常的,方方正正的css邊框不太一樣的效果的話,只需要作出一點(diǎn)點(diǎn)小修改,我們就可以使用圖片來創(chuàng)建有趣的導(dǎo)航條了.
我們使用和之前完全一樣的無序清單,以及十分類似的css:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
#minitabs a.active, #minitabs a:hover {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
這段css大概看起來和上一個示例中的幾乎一樣,最主要的區(qū)別在我們用 background-image 定義了在鼠標(biāo)劃過或選中的時(shí)候顯示在鏈接底部中間的圖片來代替了原本的4個像素高的底部邊框.(圖 1 - 8)
圖 1 - 8: 使用背景圖的迷你分頁標(biāo)簽導(dǎo)航
這里的技巧在于選擇一個足夠窄的圖片,必須能夠塞進(jìn)最短的導(dǎo)航條項(xiàng)目下,這樣一來我們只需要一張圖片來強(qiáng)調(diào)導(dǎo)航鏈接而不必為各種不同寬度準(zhǔn)備不同的圖片,當(dāng)然,在你自己的項(xiàng)目中,你可以選擇各種圖片使用(圖 1 - 9):
圖 1 - 9: 使用其他圖片的例子
這些迷你分頁標(biāo)簽的源碼和示例都可以在www.simplebits.com/tips/ 找到,更多的為清單添加樣式的方法可以參考 Mark Newhouse在A List Apart雜志上發(fā)表的"Taming Lists"的文章(www.alistpart.com/stories/taminglists/)
下文：Chapter 2 標(biāo)題
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2823194-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2008/5284.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 標(biāo)記語言——清單 [8] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 9 頁 標(biāo)記語言——清單 [9]
