CSS can use the background of A tag to make interesting effects Page 2/2

After reading it, I actually had no technical content at all, so I just used two pictures. However, if you can make these two images more variations and combine them very well, you may use such simple code to create interesting effects. At that time, it is not to imitate FLASH, but to imitate CSS.

Also, using A tag to add width or height is not a good idea, but if we can achieve the same effect with simple code and facilitate maintenance, we don't have to worry about these things. Just like when I heard a colleague say some time ago, "Technology is just a means." Yes, it is best to use technology to provide good services, and don’t worry about anything. Just like the chairs at home are for sitting, but I use them as a dining table for eating, because this is the most suitable one in my house. If you use FLASH to display this way, I think the text in FLASH will definitely not be searched on Baidu, and not 100% of users have FLASH plug-in.

The effect of the class example should be on the map of the homepage. If you are interested, you can check it out:/

OK, good night.

On request, I will explain the CSS part!

Program code
<style>l
//* represents all tags. Here I will process all tags in margin and padding; list-style does not work for some tags, mainly dealing with sequence tags before ul;
*{ margin:0; padding:0; list-style:none; }
//This defines the text size of the web page is 12px; the line height is 1.8 times that of normal, and it means 180%; it also has the same meaning in the text font and background color.
body{ font-size:12px; line-height:1.8; padding:50px; background: #333; font-family:Verdana;}

//Define the label with ID test: the border is a black edge of one pixel; float left;
#test{ border:1px solid #000; padding:20px; float:left; background:#666666}
//The ID is all floating on the left with the li tag below the test, and is 20 pixels from the left
#test li{float:left;margin-left:20px;}

//Define the ID as the a tag below the test as block (block); it also defines width and height, borders, etc.;
#test a{display:block;width:83px; line-height:79px;text-decoration:none; border:1px solid #000; text-align:center;}
//This is the abbreviation of the two states written at the top of this article, see Note 1 below in detail, where the background picture and text color in the two states are defined;
#test a:link,#test a:visited{color:#000;background:url(/upload/);}
//See Note 1 below; here defines the text color, background picture and border color;
#test a:hover,#test a:active{color:#000;background:url(/upload/); border:1px solid #FF6600;} 
</style>


Note 1:

Program code
#test a:link,#test a:visited{color:#000;background:url(/upload/);}

This line is in the form of abbreviation, and the abbreviation should be like this:

Program code
#test a:link{color:#000;background:url(/upload/);}
#test a:visited{color:#000;background:url(/upload/);}


A #test was added in front, and these settings will only be valid under the ID of the test tag, which will not affect the settings in other places!


Program code

//Writing this will take effect on the A-label on the entire web page;
a:link{color:#000;background:url(/upload/);}
//Writing this will overwrite the duplicate properties in the previous line
#test a:visited{color:#000;background:url(/upload/);}



It is important to note here that the properties that overwrite the duplicate in the previous line are "overwrite" and are "repeated" tags;

For example, the following test code:

Program code
<style>
/* Here I have defined that the text has no underlines, and the text is bold, and the text has the color*/
 a:link,a:visited{color:#000099;text-decoration:none; font-weight:bold}
 a:hover,a:active{color:#000;}

/*Look here, only the color of the text has changed, while other attributes are inherited*/
 #test a:link,#test a:visited{color:#0000FF;}
 #test a:hover,#test a:active{color:#339900;} 
</style>
Look at the effect: