This effect is an effect that someone wrote to me today, remembering the background of a label before writing a similar effect. So just came back to write about the effect of his request! By the way, share with you, if you are creative, you will be able to make more interesting effects.
He put forward the effect is nine days of Music home page A flash effect, to use CSS to imitate the same effect, may be because do not want to use flash or SEO, such as the target. So with FW made two pictures of GIF, to imitate such effect, because it is testing, so many aspects of the picture and so did not consider the special fine. Some rough, but still seem to have so little meaning, hehe ...
First of all: A:link, a:visited, A:hover, a:active: Some people may say I this is nonsense, but if the novice saw this, will be very useful, others tell you things, always faster than the self-awareness of the half.
Copy Code code as follows:
a:link{}
a:visited {}
a:hover {}
a:active {}
The above statement defines the style of "when the mouse is clicked" when "normal link" "Visited link" is stopped above.
For beginners, here must be noted that in the process of writing, the order of these four lines must be written in the order above, otherwise the display will be different from the expected effect. The simple memory aspect is "LVHA". Love ha.
Here are two pictures to use for this effect:
Here is the CSS section:
Copy Code code as follows:
<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>
The following is the Layout section:
Program code
Copy Code code as follows:
<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>
Here is the effect:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <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> </pead> <body> <div id= "Test" > <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> </ul > </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Current 1/2 page
12 Next read the full text
