這個(gè)效果是今天有人寫郵件給我問的一個(gè)效果，記前以前利用A標(biāo)簽的背景寫過一個(gè)類似的效果。于是剛剛回來就寫了一下他要求的效果！順便貼出來和大家分享一下，如果你很有創(chuàng)意，那么你一定能作出更有意思的效果。
他提出來的效果，是九天音樂首頁一個(gè)FLASH的作的效果，要用CSS模仿同樣的效果，可能是因?yàn)椴幌胗肍LASH或是SEO之類的目地。于是用FW作了兩張GIF的圖片，來模仿這樣的效果，由于是是測(cè)試用，所以圖片等很多方面沒有考慮的特別細(xì)。有些粗糙，但看上去還是有那么點(diǎn)意思的，呵呵……
首先說一下：a:link、a:visited、a:hover、a : active：可能有人說我這是廢話，但如果是新手看到了這個(gè)，會(huì)很有用的，別人告訴你的東西，總比自已悟上半天的快。
復(fù)制代碼 代碼如下:
a:link{}
a:visited {}
a:hover {}
a:active {}
以上語句分別定義了“正常鏈接”“已訪問過的鏈接”“鼠標(biāo)停在上方時(shí)”“點(diǎn)下鼠標(biāo)時(shí)”的樣式。
對(duì)于新手，這里千萬要注意，在書寫的過程中，這四行的順序千萬要按上邊的次序來寫，否則顯示出來的效果會(huì)和預(yù)想的不一樣。簡(jiǎn)單的記憶方面就是“LVHA”。love ha.
以下是制用這個(gè)效果要用到的兩張圖片：
以下是CSS部分：
復(fù)制代碼 代碼如下:
style>
*{ margin:0; padding:0; list-style:none; }
body{ font-size:12px; line-height:1.8; padding:50px; background: #333; font-family:Verdana;}
#test{ border:1px solid #000; padding:20px; float:left; background:#666666}
#test li{float:left;margin-left:20px;}
#test a{display:block;width:83px; line-height:79px;text-decoration:none; border:1px solid #000; text-align:center;}
#test a:link,#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}
#test a:hover,#test a:active{color:#000;background:url(/upload/20071211191456897.gif); border:1px solid #FF6600;}
/style>
以下是布局部分：
程序代碼
復(fù)制代碼 代碼如下:
div id="test">
ul>
li>a href="https://www.jb51.net">test1/a>/li>
li>a href="https://www.jb51.net">test2/a>/li>
li>a href="https://www.jb51.net">test3/a>/li>
li>a href="https://www.jb51.net">test4/a>/li>
/ul>
/div>
以下是效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
12下一頁閱讀全文
