今天看到客齐集社区的一个头像显示效果，感觉很漂亮就作了一下。以下是效果：
这个效果的代码写的有点特殊，主要是为了IE6和IE7分别写了两行CSS。在IE6和IE7和FIREFOX和OPEAR都测试过了，效果一样。
您可以先看一下效果:
实例运行代码框如下：
提示：您可以先修改部分代码再运行
HTML代码：
<div id="cssplay">
<ul>
<li><a href="http://www.cssplay.org.cn/"><span>64d / 47 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">pixu</a></li>
< li><a href="http://www.cssplay.org.cn/"><span>24d / 35 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">秀才</a></li>
< li><a href="http://www.cssplay.org.cn/"><span>66d / 87 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">透露</a></li>
<li><a href="http://www.cssplay.org.cn/"><span>40d / 34 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">LIVID</a></li>
< li><a href="http://www.cssplay.org.cn/"><span>47d / 56 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">老孟</a></li>
< li><a href="http://www.cssplay.org.cn/"><span>42d / 36hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">小玉</a></li>
<li><a href="http://www.cssplay.org.cn/"><span>63d / 67 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">pixu</a></li>
</ul>
</div>
CSS代码：
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;}
#cssplay li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none }
#cssplay 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}
#cssplay li img{ width:75px; height:75px; display:block; text-align:center; margin:auto; background:#FFF; padding:3px; border:1px solid #D8A18B;}
#cssplay li span{display:none;}
#cssplay 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 #cssplay li a:hover span {margin-left:-8px; } /* IE6 */
*+html #cssplay li a:hover span {margin-left:-8px; }/* IE7*/
#cssplay li a:hover{ border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; width:100px; height:110px; background:#F5F5F5;display:block; padding-top:10px;}
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>客齐集社区头像显示的一个效果t</title>
<style>
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;}
#cssplay li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none }
#cssplay 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}
#cssplay li img{ width:75px; height:75px; display:block; text-align:center; margin:auto; background:#FFF; padding:3px; border:1px solid #D8A18B;}
#cssplay li span{display:none;}
#cssplay 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 #cssplay li a:hover span {margin-left:-8px; } /* IE6 */
*+html #cssplay li a:hover span {margin-left:-8px; }/* IE7*/
#cssplay 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>
</head>
<body>
<div id="cssplay">
<ul>
<li><a href="http://www.cssplay.org.cn/"><span>64d / 47 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">pixu</a></li>
<li><a href="http://www.cssplay.org.cn/"><span>24d / 35 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">秀才</a></li>
<li><a href="http://www.cssplay.org.cn/"><span>66d / 87 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">透露</a></li>
<li><a href="http://www.cssplay.org.cn/"><span>40d / 34 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">LIVID</a></li>
<li><a href="http://www.cssplay.org.cn/"><span>47d / 56 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">老孟</a></li>
<li><a href="http://www.cssplay.org.cn/"><span>42d / 36hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">小玉</a></li>
<li><a href="http://www.cssplay.org.cn/"><span>63d / 67 hits</span><img src="http://www.cssplay.org.cn/uploads/allimg/080816/2105370.png">pixu</a></li>
</ul>
</div>
</body>
</html>