css利用A標(biāo)簽的背景可能作出很有意思的效果
更新時間:2007年12月11日 19:14:57 作者:
看完了,其實這東西一點技術(shù)含量也沒有,就是用了兩張圖片。但是,如果你能讓這兩張圖片有更多的變化,而且能組合得非常好,那一定可能用這樣簡單的代碼來作出很有意思的效果,那時就不是模仿FLASH了,而是FLASH來模仿CSS了。
另然用A標(biāo)簽加寬度或高度不是一個很好的主意,但如果能用簡單的代碼來實現(xiàn)同樣的效果,而且利于維護(hù),我們不用去計較這些東西。就像前段時間聽同事說:“技術(shù)只是手段”。對,用技術(shù)提供好的服務(wù)才是最好的,不用特別計較一些東西。就像家里的椅子是用來坐的,而我卻用它來當(dāng)飯桌吃飯,因為在我家這樣是最合適的。如果用FLASH來作這樣的顯示,我想FLASH里邊的文字在百度中一定搜不到,而且可不是百分百的用戶都有FLASH插件的。
類例的效果應(yīng)該用客齊集首頁的地圖上,如果感興趣可以看一下:http://www.kijiji.cn/index.html
好了,晚安。
應(yīng)要求,CSS部分我解釋一下!
程序代碼
<style>l
//*代表全部的標(biāo)簽,這里我把所有的標(biāo)簽的marging和padding處理掉;list-style對一些標(biāo)簽不起作用,主要處理掉ul前的序列標(biāo)記的;
*{ margin:0; padding:0; list-style:none; }
//這個定義網(wǎng)頁的文字大小為12px; 行高是正常的1.8倍,和180%是一個意思;還在文字字體和背景色
body{ font-size:12px; line-height:1.8; padding:50px; background: #333; font-family:Verdana;}
//定義ID為test的標(biāo)簽:邊框為一個像素的黑色邊;左浮動;
#test{ border:1px solid #000; padding:20px; float:left; background:#666666}
//ID用test下邊的li標(biāo)簽全部左浮動,并距左邊為20個像素
#test li{float:left;margin-left:20px;}
//定義ID為test下邊的a標(biāo)簽為block(塊);又定義了寬和高,還有邊框等;
#test a{display:block;width:83px; line-height:79px;text-decoration:none; border:1px solid #000; text-align:center;}
//這里就是本文最上邊寫的兩種狀態(tài)的簡寫詳細(xì)見下邊的注解1,這里定義了兩種狀態(tài)下的背景圖片和文字色;
#test a:link,#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}
//見下邊注解1;這里定義了文字色和背景圖片還有邊框色;
#test a:hover,#test a:active{color:#000;background:url(/upload/20071211191456897.gif); border:1px solid #FF6600;}
</style>
注解1:
程序代碼
#test a:link,#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}
這行是簡寫的形式,不簡寫應(yīng)該是這樣的:
程序代碼
#test a:link{color:#000;background:url(/upload/20071211191456983.gif);}
#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}
前邊加了一個#test是這些設(shè)置只有在ID為test標(biāo)簽下才會有效,這樣不會影響其它地方的設(shè)置!
程序代碼
//這樣寫會對全網(wǎng)頁的a標(biāo)簽生效;
a:link{color:#000;background:url(/upload/20071211191456983.gif);}
//這樣寫會覆蓋上一行中重復(fù)的屬性
#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}
這里一定要注意的是:覆蓋上一行中重復(fù)的屬性 是“覆蓋”,并且是“重復(fù)的”標(biāo)簽;
例如以下測試代碼:
程序代碼
<style>
/*這里我定義了文字沒有下劃線,和文字是加粗的,還有文字的色*/
a:link,a:visited{color:#000099;text-decoration:none; font-weight:bold}
a:hover,a:active{color:#000;}
/*看這里,只有文字的色變了,而其它的屬性都是繼承下來的*/
#test a:link,#test a:visited{color:#0000FF;}
#test a:hover,#test a:active{color:#339900;}
</style>
看效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
學(xué)習(xí)WEB標(biāo)準(zhǔn)總結(jié)的一些CSS/XHTML知識小結(jié)
制作網(wǎng)頁過程中,總會遇到一些CSS/XHTML的各種問題,下面大體的總結(jié)了下2008-09-09firefox下rowspan+border+border-collapse的bug
好久沒有發(fā)相關(guān)瀏覽器的坑了。今天同事cy發(fā)現(xiàn),在firefox里rowspan不生效...2010-02-02推薦三種簡潔的Tab導(dǎo)航(網(wǎng)頁選項卡)簡析
推薦三種簡潔的Tab導(dǎo)航(網(wǎng)頁選項卡)簡析...2007-05-05