|
判別組件
首先必須先為導(dǎo)航條的每個(gè)<li>標(biāo)簽加上id屬性,這只需進(jìn)行一次,接著這個(gè)無(wú)序清單可以不經(jīng)變動(dòng)直接用在每一頁(yè)上,甚至能顯示"你在這里"的效果.
<ul id="minitabs">
<li id="apples_tab"><a href="/apples/">Apples</a></li>
<li id="spag_tab"><a href="/spaghetti/">Spaghetti</a></li>
<li id="beans_tab"><a href="/greenbeans/">Green Beans</a></li>
<li id="milk_tab"><a href="/milk/">Milk</a></li>
</ul>
在前面這一小段源代碼里,我們?yōu)槊總�(gè)li加了個(gè)簡(jiǎn)短的id,字字符串尾加上_tab以避免重復(fù).稍后就能看出道理何在.
現(xiàn)在完成了清單的標(biāo)記語(yǔ)法,現(xiàn)在我們能把它忘了,這可能很方便,視你使用的模板,內(nèi)容管理系統(tǒng)而定.
這個(gè)效果唯一需要變動(dòng)的地方只有<body>標(biāo)簽的id,這樣就能凸顯使用者所在的頁(yè)面.舉例來(lái)說(shuō),如果想告訴瀏覽器目前正位于Apples頁(yè),就可以像這樣為<body>加上id:
<body id="apples">
或者是,加上id代表目前正處在Beans頁(yè)面:
<body id="beans">
以此類推.
CSS的魔力
要根據(jù)<body>的id來(lái)"點(diǎn)亮"標(biāo)簽,只需要一組CSS聲明,告訴瀏覽器每種可能發(fā)生的組合:
body#apples #apples_tab a,
body#spag #spag_tab a,
body#beans #beans_tab a,
body#milk #milk_tab a {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
基本上這就代表了:當(dāng)<body>標(biāo)簽的id是apples的時(shí)候,就為#apples_tab清單項(xiàng)目加上鏈接背景,同時(shí)把連接色彩換成黑色,然后為,每個(gè)標(biāo)簽選項(xiàng)重復(fù)類似的聲明.
現(xiàn)在需要"點(diǎn)亮"導(dǎo)航條內(nèi)正確的動(dòng)作只剩下變更<body>標(biāo)簽的id了.這段CSS會(huì)處理好剩下的事情,同時(shí)能在未來(lái)網(wǎng)站新增頁(yè)面時(shí)進(jìn)行修改,以便處理更多種組合.
舉例來(lái)說(shuō),如果想根據(jù)使用者目前位于這一頁(yè),"點(diǎn)亮"Beans標(biāo)簽的話,只需要像這樣為<body>標(biāo)簽指定id即可.
<body id="beans_tab">
然后正確的標(biāo)簽就會(huì)凸顯出來(lái),就像圖15-4一樣(這邊我們用了第一章解釋的"mini-tab"樣式).
圖15-4 為<body>標(biāo)簽指定id所選定的標(biāo)簽
我們也能為<body>指定其他在標(biāo)記源代碼,CSS里都聲明過(guò)的id,"點(diǎn)亮"我們希望凸顯的其他分頁(yè)標(biāo)簽.
除此之外,你也能以相同的概念觸發(fā)頁(yè)面里其他與內(nèi)容相關(guān)的事件,像是子導(dǎo)航目錄,或者根據(jù)頁(yè)面的id輪換顏色.由于<body>標(biāo)簽位于頂層,因此它的id可以用來(lái)控制頁(yè)面里任何在它底下的標(biāo)簽.
下文：Chapter 16 下一步
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2824508-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2008/6233.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——為body指定樣式 [3] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) 標(biāo)記語(yǔ)言——為body指定樣式 [4]
