Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 76319
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
jQuery+CSS实现的UL表格，带边框提示

分类： Html/Css

2014-07-07 16:03:49


点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <style>
  7. ul,li{ margin:0; padding:0; list-style:none; }
  8. .bbb{ width:900px;;height:auto; padding-bottom:50px; overflow:hidden; padding-top:30px; padding-left:50px;}
  9. .aaa{width:755px; display:block; float:left; zoom:1; border-top:1px solid #6CF; border-left:1px solid #6CF; clear:both;}
  10. .aaa li{ display: block; border-right:1px solid #6CF;border-bottom:1px solid #6CF; float:left; width:150px; height:75px; position:relative; padding:0px}
  11. .aaa li:hover{ border:5px solid #F30; margin-left:-5px; margin-top:-5px; margin-right:-4px; margin-bottom:-4px; z-index:999}
  12. .ccc{ width:135px; height:15px; background-color:black; opacity:0.5; position:absolute; top:32px; left:7px}
  13. </style>
  14. <script type="text/javascript" src="/images/jquery-1.6.2.min.js"></script>
  15. <script type="text/javascript">
  16.   $(document).ready(function(){
  17.             $(".aaa li").hover(
  18.             function(){
  19.                 $(this).append('
    '    );                
  20.             },
  21.             function(){
  22.                 $(this).children(".ccc").remove();                
  23.             });
  24.       })
  25. </script>
  26. </head>
  27. <body style="margin:0; padding:0">
  28. <div style="margin-top:100px; margin-left:auto; margin-right:auto;" class="bbb">
  29. <ul class="aaa">
  30.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  31.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  32.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  33.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  34.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  35.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  36.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  37.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  38.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  39.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  40.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  41.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  42.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  43.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  44.  <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li>
  45. </ul>
  46. </div>
  47. </body>
  48. </html>
阅读(481) | 评论(0) | 转发(0) |
0

上一篇：js个性拼图样式的下拉导航菜单代码

下一篇：CSS实现背景图片居中

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6