纯CSS仿QQ消息管理器的样式
<html>
<head>
<title> </title>
<style type="text/css">
.msgbox { padding:5px; width:700px; height:600px; overflow:hidden; margin:100px auto; border:1px solid #83B8DC; background:#fff; }
.msgbox h1 { color:#3E659F; font-size:14px; border-bottom:1px solid #BBCDDE; height:30px; line-height:30px; padding:0 10px; }
.msgbox ul { padding:0; margin:10px 0; list-style:none; }
.msgbox a { color:#333; border:1px solid #fff; display:block; padding:10px 10px 1px 10px; text-decoration:none; }
.msgbox a:hover { color:#333; border:1px solid #C3DFF4; text-decoration:none; background: #F1FAFE; }
.msgbox span{display:block;
color:#4167A7;}
</style>
</head>
<body>
<div class="msgbox">
<h1>日期：2008-8-28</h1>
<ul>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
</ul>
</div>
</body>
</html>
