仿QQ消息管理器的样式[修正版]
<!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:#000; } div {text-align:left;} .msgbox { padding:5px; width:auto; height:auto; overflow:hidden; margin:10px; 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:3px 10px; margin:0; line-height:20px; } .msgbox li p { text-indent:1em; padding:0; margin:0; } .msgbox li p a { margin:0 4px;color:#BD0000; text-decoration:none; } .msgbox li p a:hover { color:#006EFE; text-decoration:underline; } .msgbox li span { color:#006EFE; display:block; } .msgbox_a { border:1px solid #fff; } .msgbox_hover { border:1px solid #C3DFF4; background: #F1FAFE; } --> </style></head> <body> <div class="msgbox"> <h1>日期：2008-9-9</h1> <ul> <li class="msgbox_a" onmouseout="this.className='msgbox_a'" onmouseover="this.className='msgbox_hover'"> <span>系统消息 11:07:06</span> <p>网址: <a href="http://myeducs.cn" _fcksavedurl="http://myeducs.cn">http://myeducs.cn</a> 消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容</p> </li> <li class="msgbox_a" onmouseout="this.className='msgbox_a'" onmouseover="this.className='msgbox_hover'"> <span>系统消息 11:07:06</span> <p>消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容</p> </li> <li class="msgbox_a" onmouseout="this.className='msgbox_a'" onmouseover="this.className='msgbox_hover'"> <span>系统消息 11:07:06</span> <p>HI</p> </li> <li class="msgbox_a" onmouseout="this.className='msgbox_a'" onmouseover="this.className='msgbox_hover'"> <span>系统消息 11:07:06</span> <p>内容测试</p> </li> <li class="msgbox_a" onmouseout="this.className='msgbox_a'" onmouseover="this.className='msgbox_hover'"> <span>系统消息 11:07:06</span> <p>你好.</p> </li> <li class="msgbox_a" onmouseout="this.className='msgbox_a'" onmouseover="this.className='msgbox_hover'"> <span>系统消息 11:07:06</span> <p>连接网址<a href="http://myeducs.cn" _fcksavedurl="http://myeducs.cn">http://myeducs.cn</a>内容</p> </li> <li class="msgbox_a" onmouseout="this.className='msgbox_a'" onmouseover="this.className='msgbox_hover'"> <span>系统消息 11:07:06</span> <p><img src="/uploadfile/200904/18/83211831445.gif" _fcksavedurl="/uploadfile/200904/18/83211831445.gif" />图片内容</p> </li> <li class="msgbox_a" onmouseout="this.className='msgbox_a'" onmouseover="this.className='msgbox_hover'"> <span>系统消息 11:07:06</span> <p>消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容</p> </li> <li class="msgbox_a" onmouseout="this.className='msgbox_a'" onmouseover="this.className='msgbox_hover'"> <span>系统消息 11:07:06</span> <p>HI</p> </li> <li class="msgbox_a" onmouseout="this.className='msgbox_a'" onmouseover="this.className='msgbox_hover'"> <span>系统消息 11:07:06</span> <p>内容测试</p> </li> <li class="msgbox_a" onmouseout="this.className='msgbox_a'" onmouseover="this.className='msgbox_hover'"> <span>系统消息 11:07:06</span> <p>连接网址<a href="http://myeducs.cn" _fcksavedurl="http://myeducs.cn">http://myeducs.cn</a>内容</p> </li> </ul> </div> </body> </html>
