CSS技巧篇(position屬性的運(yùn)用技巧)
下面開始我們的分析了,先來看看這段XHTML代碼:
<ul class="tabs" id="news"> <li class="first" id="news-0"><a href="news/news0.htm">網(wǎng)站重構(gòu)</a><span></span></li> <li id="news-1"><a href="news/news1.htm">CSS布局實錄</a><span></span></li> <li id="news-2"><a href="news/news2.htm">海嘯的地盤</a><span></span></li> <li id="news-3"><a href="news/news3.htm">Ajax高級編程</a><span></span></li> </ul> <div class="clearfix cnt" id="newsCnt"> <img src="img/girl-1.jpg" alt="林志琳" /> <ul> <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li> <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li> <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li> <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li> <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li> <li><a href="#">PRG全棉短袖襯衣最后的搶購機(jī)搶購機(jī)</a> 2006-08-15</li> </ul> </div>
id="news" - news就是我們的導(dǎo)航標(biāo)簽的ID; id="newsCnt" - newsCnt就是我們要寫入信息的目標(biāo)DOM節(jié)點(diǎn); class="first" - first當(dāng)前(第一個)標(biāo)簽的樣式; id="news-0" - news-0 通過”-“分開,我們就分別可以得到news(導(dǎo)航標(biāo)簽ID),0(標(biāo)簽[li]在導(dǎo)航標(biāo)簽中的索引值) <a href="news/news0.htm">網(wǎng)站重構(gòu)</a> - 超鏈接 <span></span> - 標(biāo)簽間的分割線
我羅列的這些東西,相信大家開始看出了些頭緒了,呵呵,不過別急!在我們看處理的腳本之前,先讓我們來看看導(dǎo)航標(biāo)簽的樣式,主要是看看我們對分割線的處理(一點(diǎn)CSS處理的技巧)。
/* 導(dǎo)航標(biāo)簽的樣式 */ .tabs li{ float:left; display:inline; text-align:center; width:120px; height:12px; padding:4px 0 6px 0; overflow:hidden; letter-spacing:1px; position:relative; }
/* 標(biāo)簽分割線的樣式 */ .tabs li span{ position:absolute; right:0; top:3px; width:2px; height:16px; overflow:hidden; font-size:1px; background-image:url(../img/tab_sline.gif); }
技巧就是.tab li中的”position:relative;“和.tabs li span中”position:absolute;“結(jié)合使用的技巧(呵呵,其實我也是看了YAHOO的標(biāo)簽后才這么用的),F(xiàn)在我們就來了解下position屬性吧(CSS講座開始,不過是好東西哦,呵呵。
position:絕對定位,指本體對上級的定位(本人理解的說法),有3個可選值static(靜態(tài)定位-默認(rèn)值)、relative(絕對相對定位)、absolute(絕對定位)。
relative:他是參照父級的原始點(diǎn)為原始點(diǎn),無父級則以BODY的原始點(diǎn)為原始點(diǎn),配合top、right、bottom、left進(jìn)行定位,當(dāng)父級內(nèi)有padding等CSS屬性時,當(dāng)前級的原始點(diǎn)則參照父級內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位。如下圖一:
absolute:他的意思是絕對定位,他是參照瀏覽器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進(jìn)行定位,在沒有設(shè)定TRBL,默認(rèn)依據(jù)父級的做標(biāo)原始點(diǎn)為原始點(diǎn)。如果設(shè)定TRBL并且父級沒有設(shè)定position屬性,那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位,位置將由TRBL決定。如下圖二:
不知道你看出些其他的什么特性出來了沒有?我們仔細(xì)看下圖二,你發(fā)現(xiàn)沒有,在用absolute定位的時候,它可以覆蓋在與其相鄰的節(jié)點(diǎn)上(不是因為它設(shè)置了z-index屬性),而是它的一個特性--不占布局或者說不影響鄰居節(jié)點(diǎn)的布局。而relative則不一樣,它會影響鄰居節(jié)點(diǎn)的布局。我們通過圖一還看不出來,來看圖三:
大家注意到圖片中的灰色部分沒有?這個就是我要說的,這塊灰色的部分的大小就是#relative的大小,這個說明了什么?表明它會影響鄰居節(jié)點(diǎn)的布局,而且鄰居節(jié)點(diǎn)接下來的位置就是#relative使用一般margin定位的末端。講詳細(xì)點(diǎn),就是說雖然#relative顯示的在屏幕的位置是紅色塊的地方,但是實際仍然要占據(jù)它起始位置所在的布局(它的寬和高)的大小。這里#relative的起點(diǎn)是body,那么它站的布局就是從body起點(diǎn)開始width:250px;height:250px;(加padding:5px)的布局(大。,也就是我們看到圖中灰色部分。呵呵,好繞是嗎?仔細(xì)看看,多用下就明白了。
好了,現(xiàn)在就我們ajax標(biāo)簽導(dǎo)航中使用的是relative+absolute的結(jié)合,當(dāng)一個absolute的節(jié)點(diǎn)包含在一個relative的節(jié)點(diǎn)中時,它的”原始點(diǎn)“就是relative節(jié)點(diǎn)了,而不是“參照瀏覽器的左上角-body”了,而它又不影響其鄰居節(jié)點(diǎn)的布局,所以它就不會影響<li></li>中間文字(文本節(jié)點(diǎn))的布局了(這里li的空間夠大)。這樣以來,就得到了我們標(biāo)簽中,每個標(biāo)簽后有一個分隔線的樣式了。如圖四:
OK,我們對position屬性和它的值的使用搞清楚了。接下來就來看看是怎么來更改當(dāng)前選中標(biāo)簽(li)的樣式吧:
.tabs li{ float:left; display:inline; text-align:center; width:120px; height:12px; padding:4px 0 6px 0; overflow:hidden; letter-spacing:1px; position:relative; }
/* 第一項被選中的樣式 */ .tabs li.first{ background-image:url(../img/tab_active1.gif); }
/* 其他項被選中的樣式 */ .tabs li.current{ background-image:url(../img/tab_active2.gif); }
/* 被選中項的字體樣式 */ .tabs li.current, .tabs li.first{ font-weight:bold; }
/* 被選中項的鏈接顏色樣式 */ .tabs li.current a, .tabs li.first a{ color:#D45417; }
.tabs li span{ position:absolute; right:0; top:3px; width:2px; height:16px; overflow:hidden; font-size:1px; background-image:url(../img/tab_sline.gif); }
/* 選中項和選中項前一項的樣式 */ .tabs li.first span, .tabs li.current span, .tabs li.off span{/* 選中項前一項 */ display:none; }
這里要簡單說的就是樣式表CSS繼承(層疊)的順序,一定要是先寫標(biāo)簽(li)標(biāo)簽?zāi)J(rèn)(背景)樣式再寫選中時的(背景)樣式,然后是默認(rèn)分隔線(span)-> 選中時 -> 失去焦點(diǎn)時這樣一個順序。至于CSS的繼承順序的具體只是,大家可以google一下。
出處:藍(lán)色理想
責(zé)任編輯:moby
上一頁 代碼篇 下一頁 Javascript技巧篇
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|