CSS uses the background of tag a to make interesting results page 1/2

Source: Internet
Author: User

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


    • Test1
    • Test2
    • Test3
    • Test4
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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.