首頁 > web前端 > css教學 > css利用A標籤的背景可能作出很有趣的效果第1/2頁_經驗交流

css利用A標籤的背景可能作出很有趣的效果第1/2頁_經驗交流

PHP中文网
發布: 2016-05-16 12:06:37
原創
1801 人瀏覽過

這個效果是今天有人寫email給我問的效果,記前以前利用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部分:

class="codetitle">複製程式碼 程式碼如下:


 


以下是佈局部分:
 程式碼

複製程式碼 程式碼如下:


 

以下是效果:


[Ctrl A 全選注:如需引入外部Js需刷新才能執行]



相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板