[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" c />
<title>用div-css实现的比较酷的头像显示效果</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:#009;
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;
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_test 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>
</head>
<body>
<div id="zishu_test">
<ul>
<li><a href="#"><span>64d / 47 hits</span><img src="
http://yy.kijiji.cn/img/p/10000009.jpg">pixu</a></li>
<li><a href="#"><span>24d / 35 hits</span><img src="
http://yy.kijiji.cn/img/p/294343.jpg">秀才</a></li>
<li><a href="#"><span>66d / 87 hits</span><img src="
http://yy.kijiji.cn/img/p/10000010.jpg">透露</a></li>
<li><a href="#"><span>40d / 34 hits</span><img src="
http://yy.kijiji.cn/img/p/11709126.jpg">LIVID</a></li>
<li><a href="#"><span>47d / 56 hits</span><img src="
http://yy.kijiji.cn/img/p/10000002.jpg">老孟</a></li>
<li><a href="#"><span>42d / 36hits</span><img src="
http://yy.kijiji.cn/img/p/11695932.jpg">小玉</a></li>
<li><a href="#"><span>63d / 67 hits</span><img src="
http://yy.kijiji.cn/img/p/10000025.jpg">pixu</a></li>
</ul>
</div>
</body>
</html>
[/html]
[
本帖最后由 fcnanhai 于 2007-11-17 21:01 编辑 ]
