45IT.COM- 电脑学习从此开始!
DIY硬件教程攒机经验装机配置
设计Photoshop网页设计特效
系统注册表DOS系统命令其它
存储主板显卡外设键鼠内存
维修显卡CPU内存打印机
WinXPVistaWin7unix/linux
CPU光驱电源/散热显示器其它
修技主板硬盘键鼠显示器光驱
办公ExcelWordPowerPointWPS
编程数据库CSS脚本PHP
网络局域网QQ服务器
软件网络系统图像安全
页面导航: 首页 > 设计学院 > 网络编程 > CSS教程 >

纯CSS仿QQ消息管理器的样式

电脑软硬件应用网 45IT.COM 时间:2008-11-26 13:38 作者:转载未知

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

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: baidushare.htm
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
推荐知识