纯CSS仿QQ消息管理器的样式 2022-07-15 80酷酷网 80kuku.com 以下是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></font><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]