纯css效果-------Stri's Blog

» 2009-8-30 11:36:40 已被归档于 Html/Css

PS:只能看效果,本人觉得.应用到网站还是用JS比较好

<!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=utf-8" />
<title>demo</title>
<style type="text/css">
* { padding:0px; margin:0px; list-style:none; }

img { border:0px; }

body { font-size:14px; font-family:Verdana, Geneva, sans-serif; line-height:22px; }

#wrap { width:960px; margin:0 auto; }

.face_box { width:150px; float:left; height:600px; position:relative; background-color:#F6F6F6; padding-top:200px; }

.face_box a { display:block; padding:10px; color:#555; text-decoration:none; border:1px solid #f6f6f6; width:78px; height:78px; }

.face_box a span.left { float:left; width:150px; }

.face_box a span.right { display:none; float:left; }

.face_box a img { padding-bottom:10px; }

.face_box a:hover span.right { display:block; margin-left:10px; }

.face_box a:hover span.right span { height:18px; line-height:18px; }

.face_box a:hover span.right img { float:none; margin:0 2px; cursor:pointer; }

.face_box a:hover span.right span { display:block; height:20px; line-height:20px; }

.face_box a:hover span.right span img { margin:0 5px; }

.face_box a:hover span.right span span { display:block; width:150px; float:left; font-size:12px; font-weight:normal; color:#666; }

.face_box a:hover span.right span em { background:url(http://www.qicailife.com/image/magic/invisible.small.gif) no-repeat; font-size:12px; color:#000; font-weight:normal; font-style:normal; height:22px; padding:2px 0; color:#f60; padding-left:17px; line-height:22px; }

.face_box a:hover { text-decoration:none; height:150px; color:#555; border:1px solid #fff; width:500px; border:1px solid #e5e5e5; position:absolute; z-index:9999; background-color:#fff; }
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrap">
  <div class="face_box"><a href="javascript:void(0);"><span class="left"><img src="http://center.blueidea.com/avatar.php?uid=502502&size=big" width="64" height="64" /></span><span class="right"><span><em>ㄑ可乐ㄑㄑ</em></span><span><span>UID:44</span><span>帖子:9</span></span><span><span>精华:11</span><span>积分:39</span></span><span><span>阅读权限:20</span><span>在线时间:125小时</span></span><span><span>注册时间:2008-12-31</span><span>最后登陆:2009-8-27</span></span><span><img src="http://www.l2caise.cn/templates/gray_1/real_pic/qq.gif" alt="qq" onclick="ddd();" /><img src="http://www.l2caise.cn/templates/gray_1/real_pic/forumlink.gif" /><img src="http://www.l2caise.cn/templates/gray_1/real_pic/userinfo.gif" /></span></span> </a> </div>
  <div class="fdsaf" style="float:left; padding-top:200px;">
    <p>兄弟,你的心就在这里.不管别人怎么.哥几个挺你.</p>
    <p>今晚的任务,哥几个全醉~!</p>
  </div>
</div>
</body>
</html>

订阅此文章

纯css效果

相关评论(共3条)

分类

最新文章

最新回复

良师益友

日志归档