电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文
纯CSS仿QQ消息管理器的样式
纯CSS仿QQ消息管理器的样式
2008-11-26 13:38:15  文/转载未知   出处:电脑软硬件应用网   

以下是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>

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    CSS伪类选择器nth-child()
    css3教程:background属性调整增强
    css教程:CSS3 Media Queries 详解
    CSS 类名的长命名和短命名
    CSS实例教程:非浮动区域设置宽度
    如何使用css约束一个层不可见?
    CSS的list-style解释
    小议使用“完整”的CSS的缺点
    CSS中的相对定位与绝对定位详解
    实例使用DIV+CSS制作圆角边框加阴影…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号