Css collection community Avatar Display Effect

Code Description:

In this section, A large block DIV is defined, and an ID is assigned to it. There are four tabs: LI, A, SPAN, and IMG; in this way, we can set these four labels in CSS to achieve the desired effect;

<Div id = "zishu_test">
<Ul>
<Li> <a href = "64d '> http://www.zishu.cn/blogview.asp? LogID = 553 "> <span> 64d/47 hits </span> pixu </a> </li>
...........
The following section defines the basic content and link style of the webpage;

Body {font-size: 12px; line-height: 1.8; font-family: Verdana, "", Arial, Sans; text-align: center; background: # FFF; color: #666; margin: 50px; padding: 0; list-style: none ;}
A: link, a: visited {color: #000099; text-decoration: underline ;}
A: hover, a: active {color: #000; text-decoration: none ;}
The following line defines the horizontal display of the list, with each LI representing 14% in width; 14% equals to 100% divided by 7; and the Content in LI should be centered; margin: 0 auto; this statement is used to enable the center display of FIREFOX;

# Zishu_test li {float: left; width: 14%; text-align: center; margin: 0 auto; list-style: none}
The following lines define the tag, border, width, and background. In fact, there is A border, but it is the same as the background color. You cannot see it. If you change the background color of the webpage; you will see the effect;

# Zishu_test li a {border-right: 1px solid # fff; border-bottom: 1px solid # fff; width: 100px; height: 110px; background: # fff; display: block; padding-top: 10px; margin: auto}
The following defines the image, and adds the white effect to the image side; and the border effect;

# Zishu_test li img {width: 75px; height: 75px; display: block; text-align: center; margin: auto; background: # FFF; padding: 3px; border: 1px solid # D8A18B ;}
The following line hides the content in the SPAN label;

# Zishu_test li span {display: none ;}
The following line defines the effect of moving the mouse over the SPAN. It mainly displays the content in the SPAN and defines the position of the SPAN content. Note; in this way, defining the SPAN position will have different effects in different browsers; so the two lines of code are available. Note that only SPAN is defined here;

# Zishu_test li a: hover span {margin-top:-10px; display: block; border-bottom: 1px solid #666; border-right: 1px solid #666; background: # FA9000; width: 100px; color: # FFF; position: absolute ;}
The following two lines are written in order to see the same effect in different browsers. They are mainly written in IE6 and IE7. Why not write IMPORTANT in the previous line? You can try again and think about it. I use this method to change IE6 and IE7. I don't know how it works, because I really didn't come up with a better solution;

* Html # zishu_test li a: hover span {margin-left:-8px;}/* IE6 */
* + Html # zishu_test li a: hover span {margin-left:-8px;}/* IE7 */
The last line is simple. It just changes the color of the border, giving people the feeling that the mouse is moving up and changing;

# Zishu_test li a: hover {border-right: 1px solid # D8A18B; border-bottom: 1px solid # D8A18B; width: 100px; height: 110px; background: # F5F5F5; display: block; padding-top: 10px ;}
<! 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> zishu.cn test </title> <style> body {font-size: 12px; line-height: 1.8; font-family: Verdana, "", Arial, Sans; text-align: center; background: # FFF; color: #66 6; margin: 50px; padding: 0; list-style: none;} a: link, a: visited {color: #000099; text-decoration: underline;}: hover, a: active {color: #000; text-decoration: none ;}# zishu_test li {float: left; width: 14%; text-align: center; margin: 0 auto; list-style: none} # zishu_test li a {border-right: 1px solid # fff; border-bottom: 1px solid # fff; width: 100px; height: 110px; background: # fff; display: block; padding-top: 10px; Margin: auto} # zishu_test li img {width: 75px; height: 75px; display: block; text-align: center; margin: auto; background: # FFF; padding: 3px; border: 1px solid # D8A18B;} # zishu_test li span {display: none;} # zishu_test li a: hover span {margin-top:-10px; display: block; border-bottom: 1px solid #666; border-right: 1px solid #666; background: # FA9000; width: 100px; color: # FFF; position: absolute ;} * html # zishu_tes T li a: hover span {margin-left:-8px;}/* IE6 */* + html # zishu_test li a: hover span {margin-left:-8px ;} /* IE7 */# zishu_test li a: hover {border-right: 1px solid # D8A18B; border-bottom: 1px solid # D8A18B; width: 100px; height: 110px; background: # F5F5F5; display: block; padding-top: 10px ;} </style> </pead> <body> <ul> <li> 64d/47 hitspixu </li> <li> 24d/35 hits talent </li> <li> 66d/87 hits disclosure </li> <li> 40d/34 HitsLIVID </li> <li> 47d/56 hits </li> <li> 42d/36hits Xiaoyu </li> <li> 63d/67 hitspixu </li> </ul> <p style = "clear: both; "> the source post address is a http://www.zishu.cn/blogview.asp? Log id = 553 </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]