This effect is an effect that someone wrote an email to me today. I wrote a similar effect using the background of tag a before. So I wrote the effect he requested when I got back! By the way, I will share with you that if you are very creative, you will certainly be able to make more interesting results.
The effect he proposed is the effect of a flash on the nine-day music homepage. It may be because he does not want to use flash or SEO to imitate the same effect. So I used FW to make two GIF images to imitate this effect. Because it is used for testing, I did not consider the pictures in many aspects. It's a bit rough, but it seems so interesting ......
A: Link, A: visited, A: hover, A: active, what others tell you is always faster than self-understanding.CopyCodeThe Code is as follows: A: link {}
A: visited {}
A: hover {}
A: active {}
The preceding statements define the "normal link", "accessed link", "mouse over top", and "mouse over.
For beginners, please note that during the writing process, the four rows must be written in the order above. Otherwise, the displayed results will be different from expected. The simple memory is "lvha ". Love ha.
The following figure shows two images used for this effect:
The following is the CSS section:Copy codeThe Code is 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 layout section is as follows:
ProgramCodeCopy codeThe Code is 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>
The following are the results:Xmlns = "http://www.w3.org/1999/xhtml">