仿QQ消息管理器的样式.
[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>无标题文档</title>
<style type="text/css">
<!--
body { background: #fff; text-align: center; font-family: Verdana, sans-serif; margin:0; padding:0; font-size:12px; color:#333; }
div,form,img,ul,ol,li,dl,dt,dd,p {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}
div {text-align:left;}
.h { overflow:hidden; }
.l { float:left; }
.r { float:right; }
.m { margin:auto; }
.c { clear:both; }
.n { display:none; }
.fb { font-weight:bold; }
.fc1 { color:#3E659F; }
.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 li { padding:0; margin:0; }
.msgbox li p { line-height:22px; }
.msgbox li p span { color:#4167A7; }
.msgbox a { color:#333; border:1px solid #fff; display:block; padding:3px 10px 1px 10px; text-decoration:none; }
.msgbox a:hover { color:#333; border:1px solid #C3DFF4; text-decoration:none; background: #F1FAFE; }
-->
</style></head>
<body>
<div class="msgbox">
<h1>日期：2008-8-28</h1>
<ul>
<li>
<a href="#">
<p><span>系统消息 11:07:06</span></p>
<p>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</p>
</a>
</li>
<li>
<a href="#">
<p><span>系统消息 11:07:06</span></p>
<p>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</p>
</a>
</li>
<li>
<a href="#">
<p><span>系统消息 11:07:06</span></p>
<p></p>
</a>
</li>
<li>
<a href="#">
<p><span>系统消息 11:07:06</span></p>
<p>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</p>
</a>
</li>
<li>
<a href="#">
<p><span>系统消息 11:07:06</span></p>
<p>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</p>
</a>
</li>
<li>
<a href="#">
<p><span>系统消息 11:07:06</span></p>
<p>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</p>
</a>
</li>
<li>
<a href="#">
<p><span>系统消息 11:07:06</span></p>
<p>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</p>
</a>
</li>
<li>
<a href="#">
<p><span>系统消息 11:07:06</span></p>
<p>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</p>
</a>
</li>
</ul>
</div>
</body>
</html>
[/html]
[url=http://wangyesucai.com]http://wangyesucai.com[/url] 挺不错
用a:hover 做的移行换色 <a></a>是行内元素，<p>/<p>块级元素，块级元素是不能够嵌套在行内元素中的 [html]
<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>
[/html]
这样写是不是更符合语义呢 把P换成span ，呵呵。 [quote]原帖由 [i]weams[/i] 于 2008-8-30 06:51 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4186333&ptid=2882557][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]
是行内元素，/块级元素，块级元素是不能够嵌套在行内元素中的 [/quote]
请问 定义a为块状元素也不行么？
页:
[1]