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

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

類例的效果應(yīng)該用客齊集首頁的地圖上，如果感興趣可以看一下：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)頁的文字大小為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;}
//這里就是本文最上邊寫的兩種狀態(tài)的簡(jiǎn)寫詳細(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);}

這行是簡(jiǎn)寫的形式，不簡(jiǎn)寫應(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è)置！


 程序代碼

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



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

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

 程序代碼
<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>
看效果：

最新評(píng)論