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

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

類例的效果應該用客齊集首頁的地圖上，如果感興趣可以看一下：http://www.kijiji.cn/index.html

好了，晚安。 

應要求，CSS部分我解釋一下！

 程序代碼
<style>l
//*代表全部的標簽，這里我把所有的標簽的marging和padding處理掉；list-style對一些標簽不起作用，主要處理掉ul前的序列標記的；
*{ 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的標簽：邊框為一個像素的黑色邊；左浮動；
#test{ border:1px solid #000; padding:20px; float:left; background:#666666}
//ID用test下邊的li標簽全部左浮動，并距左邊為20個像素
#test li{float:left;margin-left:20px;}

//定義ID為test下邊的a標簽為block（塊）；又定義了寬和高，還有邊框等；
#test a{display:block;width:83px; line-height:79px;text-decoration:none; border:1px solid #000; text-align:center;}
//這里就是本文最上邊寫的兩種狀態(tài)的簡寫詳細見下邊的注解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);}

這行是簡寫的形式，不簡寫應該是這樣的：

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


前邊加了一個#test是這些設(shè)置只有在ID為test標簽下才會有效，這樣不會影響其它地方的設(shè)置！


 程序代碼

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



這里一定要注意的是：覆蓋上一行中重復的屬性 是“覆蓋”，并且是“重復的”標簽；

例如以下測試代碼：

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

最新評論