欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css利用A標(biāo)簽的背景可能作出很有意思的效果

 更新時(shí)間:2007年12月11日 19:14:57   作者:  

看完了,其實(shí)這東西一點(diǎn)技術(shù)含量也沒(méi)有,就是用了兩張圖片。但是,如果你能讓這兩張圖片有更多的變化,而且能組合得非常好,那一定可能用這樣簡(jiǎn)單的代碼來(lái)作出很有意思的效果,那時(shí)就不是模仿FLASH了,而是FLASH來(lái)模仿CSS了。

另然用A標(biāo)簽加寬度或高度不是一個(gè)很好的主意,但如果能用簡(jiǎn)單的代碼來(lái)實(shí)現(xiàn)同樣的效果,而且利于維護(hù),我們不用去計(jì)較這些東西。就像前段時(shí)間聽(tīng)同事說(shuō):“技術(shù)只是手段”。對(duì),用技術(shù)提供好的服務(wù)才是最好的,不用特別計(jì)較一些東西。就像家里的椅子是用來(lái)坐的,而我卻用它來(lái)當(dāng)飯桌吃飯,因?yàn)樵谖壹疫@樣是最合適的。如果用FLASH來(lái)作這樣的顯示,我想FLASH里邊的文字在百度中一定搜不到,而且可不是百分百的用戶(hù)都有FLASH插件的。

類(lèi)例的效果應(yīng)該用客齊集首頁(yè)的地圖上,如果感興趣可以看一下:http://www.kijiji.cn/index.html

好了,晚安。 

應(yīng)要求,CSS部分我解釋一下!

 程序代碼
<style>l
//*代表全部的標(biāo)簽,這里我把所有的標(biāo)簽的marging和padding處理掉;list-style對(duì)一些標(biāo)簽不起作用,主要處理掉ul前的序列標(biāo)記的;
*{ margin:0; padding:0; list-style:none; }
//這個(gè)定義網(wǎng)頁(yè)的文字大小為12px; 行高是正常的1.8倍,和180%是一個(gè)意思;還在文字字體和背景色
body{ font-size:12px; line-height:1.8; padding:50px; background: #333; font-family:Verdana;}

//定義ID為test的標(biāo)簽:邊框?yàn)橐粋€(gè)像素的黑色邊;左浮動(dòng);
#test{ border:1px solid #000; padding:20px; float:left; background:#666666}
//ID用test下邊的li標(biāo)簽全部左浮動(dòng),并距左邊為20個(gè)像素
#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;}
//這里就是本文最上邊寫(xiě)的兩種狀態(tài)的簡(jiǎn)寫(xiě)詳細(xì)見(jiàn)下邊的注解1,這里定義了兩種狀態(tài)下的背景圖片和文字色;
#test a:link,#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}
//見(jiàn)下邊注解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);}

這行是簡(jiǎn)寫(xiě)的形式,不簡(jiǎn)寫(xiě)應(yīng)該是這樣的:

 程序代碼
#test a:link{color:#000;background:url(/upload/20071211191456983.gif);}
#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}


前邊加了一個(gè)#test是這些設(shè)置只有在ID為test標(biāo)簽下才會(huì)有效,這樣不會(huì)影響其它地方的設(shè)置!


 程序代碼

//這樣寫(xiě)會(huì)對(duì)全網(wǎng)頁(yè)的a標(biāo)簽生效;
a:link{color:#000;background:url(/upload/20071211191456983.gif);}
//這樣寫(xiě)會(huì)覆蓋上一行中重復(fù)的屬性
#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}



這里一定要注意的是:覆蓋上一行中重復(fù)的屬性 是“覆蓋”,并且是“重復(fù)的”標(biāo)簽;

例如以下測(cè)試代碼:

 程序代碼
<style>
 /*這里我定義了文字沒(méi)有下劃線(xiàn),和文字是加粗的,還有文字的色*/
 a:link,a:visited{color:#000099;text-decoration:none; font-weight:bold}
 a:hover,a:active{color:#000;}

 /*看這里,只有文字的色變了,而其它的屬性都是繼承下來(lái)的*/
 #test a:link,#test a:visited{color:#0000FF;}
 #test a:hover,#test a:active{color:#339900;} 
</style>
看效果:

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

相關(guān)文章

最新評(píng)論