css利用A標簽的背景可能作出很有意思的效果第1/2頁

更新時間：2007年12月11日 19:14:57 作者：

這個效果是今天有人寫郵件給我問的一個效果，記前以前利用A標簽的背景寫過一個類似的效果。于是剛剛回來就寫了一下他要求的效果！順便貼出來和大家分享一下，如果你很有創(chuàng)意，那么你一定能作出更有意思的效果。

他提出來的效果，是九天音樂首頁一個FLASH的作的效果，要用CSS模仿同樣的效果，可能是因為不想用FLASH或是SEO之類的目地。于是用FW作了兩張GIF的圖片，來模仿這樣的效果，由于是是測試用，所以圖片等很多方面沒有考慮的特別細。有些粗糙，但看上去還是有那么點意思的，呵呵……

首先說一下：a:link、a:visited、a:hover、a : active：可能有人說我這是廢話，但如果是新手看到了這個，會很有用的，別人告訴你的東西，總比自已悟上半天的快。

復制代碼代碼如下:

a:link{}  
a:visited {}  
a:hover {}  
a:active {}  

以上語句分別定義了“正常鏈接”“已訪問過的鏈接”“鼠標停在上方時”“點下鼠標時”的樣式。

對于新手，這里千萬要注意，在書寫的過程中，這四行的順序千萬要按上邊的次序來寫，否則顯示出來的效果會和預想的不一樣。簡單的記憶方面就是“LVHA”。love ha.

以下是制用這個效果要用到的兩張圖片：

以下是CSS部分：

復制代碼代碼如下:

<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> 

以下是布局部分：
程序代碼

復制代碼代碼如下:

<div id="test">  
  <ul>  
    <li><a href="http://m.fzitv.net">test1</a></li>  
    <li><a href="http://m.fzitv.net">test2</a></li>  
    <li><a href="http://m.fzitv.net">test3</a></li>  
    <li><a href="http://m.fzitv.net">test4</a></li>  
  </ul>  
</div> 

以下是效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css test</title> <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> </head> <body> <div   class="wppm3vysvbp"   id="test">   <ul>     <li><a href="http://m.fzitv.net">test1</a></li>     <li><a href="http://m.fzitv.net">test2</a></li>     <li><a href="http://m.fzitv.net">test3</a></li>     <li><a href="http://m.fzitv.net">test4</a></li>   </ul> </div> </body> </html>

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

12 下一頁閱讀全文