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

來源:互聯網
上載者:User

這個效果是今天有人寫郵件給我問的一個效果,記前以前利用A標籤的背景寫過一個類似的效果。於是剛剛回來就寫了一下他要求的效果!順便貼出來和大家分享一下,如果你很有創意,那麼你一定能作出更有意思的效果。

他提出來的效果,是九天音樂首頁一個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://www.jb51.net">test1</a></li>
<li><a href="http://www.jb51.net">test2</a></li>
<li><a href="http://www.jb51.net">test3</a></li>
<li><a href="http://www.jb51.net">test4</a></li>
</ul>
</div>

以下是效果: xmlns="http://www.w3.org/1999/xhtml">


  • test1
  • test2
  • test3
  • test4
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.