CSS Guest gathered community avatar display effect _javascript skills

Code Description:

In this paragraph, a large block div is defined; and gave him an ID; Below the li,a,span,img four labels respectively; So we can set the four tags in the CSS to achieve the desired effect;

<div id= "Zishu_test" >
<ul>
<li><a href= "64d ' >http://www.zishu.cn/blogview.asp?logid=553" &GT;&LT;SPAN&GT;64D/47 Hits</span >pixu</a></li>
...........
The following section defines the basic content of the Web page and the style of the link;

body{font-size:12px; line-height:1.8 Font-family:verdana, "XXFarEastFont-Arial", 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% of the width, and 14% by 100% divided by 7 blocks equal; And the contents of Li inside should be centered; margin:0 Auto; This sentence is to achieve the center of Firefox display;

#zishu_test li{float:left; width:14%;text-align:center; margin:0 auto; List-style:none}
The following line defines a label for a uniform, border, width, background, etc. In fact, there is already a border, just like the background color; If you change the background color of the Web page; You will see the effect;

#zishu_test Li a{border-right:1px solid #fff border-bottom:1px solid #fff; width:100px; height:110px: #fff; Display:block; padding-top:10px; Margin:auto}
The following definition of the picture, to the edge of the picture added to the effect of white, and 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 contents of the span tag;

#zishu_test Li Span{display:none;}
The following line is to define the effect of the mouse move up; It mainly shows the contents in span; and define the location of span content; Note that this defines the location of the span to have different effects in different browsers, so there are two lines of code behind it, and 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 b Ackground: #FA9000; width:100px; Color: #FFF; Position:absolute; }
The following two lines are written for the same effect as seen in different browsers, mainly for IE6 and IE7; Some people ask why not write important in the last line? You try to think about it and you know it. I use this method to change IE6 and IE7; I don't know how, because I really didn't think of a better way;

* 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; just change the color of the border, giving people the feeling that the mouse is moving up to change;

#zishu_test Li a:hover{border-right:1px solid #D8A18B; border-bottom:1px solid #D8A18B; width:100px; height:110px; Background: #F5F5F5;d isplay: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 T-family:verdana, "Song Body", 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;} #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;d isplay: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 b Ackground: #FA9000; width:100px; Color: #FFF; Position:absolute; * HTML #zishu_test li a:hover span {margin-left:-8px}/* IE6/*+html #zishu_test li A:hover span {margin-left:-8 px }/* ie7*/#zishu_test Li a:hover{border-right:1px solid #D8A18B border-bottom:1px solid #D8A18B; width:100px 0px; Background: #F5F5F5;d isplay:block; padding-top:10px;} </style> </pead> <body> <div id= "Zishu_test" > <ul> <li><span>64d/47 Hits</span>pixu</li> <li><span>24d/35 hits</span> scholar </li> <li><sp an>66d/87 hits</span> revealed </li> <li><span>40d/34 hits</span>livid</li> & LT;LI&GT;&LT;SPAN&GT;47D/56 hits</span> Lao Meng </li> &LT;LI&GT;&LT;SPAN&Gt;42d/36hits</span> Small Jade </li> <li><span>63d/67 hits</span>pixu</li> &LT;/UL&G T </div> <p > Source paste address for http://www.zishu.cn/blogview.asp?logid=553</p> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]