Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1417603
  • 博文数量: 239
  • 博客积分: 5909
  • 博客等级: 大校
  • 技术积分: 2715
  • 用 户 组: 普通用户
  • 注册时间: 2010-07-24 20:19
文章分类

全部博文(239)

文章存档

2014年(4)

2013年(22)

2012年(140)

2011年(14)

2010年(59)

我的朋友

分类: Html/Css

2013-12-26 11:04:28

隔行变色CSS代码:

点击(此处)折叠或打开

  1.     body{ margin:0 auto; text-align:center}
  2.     table{margin:0 auto; width:410px}
  3.     table{ border:1px solid #000}
  4.     table tr th{ height:28px; line-height:28px; background:#999}
  5.     table.stripe tr td{ height:28px; line-height:28px; text-align:center;background:#FFF;vertical-align:middle;}
  6.     /* css注释:默认css背景被白色 */
  7.     table.stripe tr.alt td { background:#F2F2F2;}
  8.     /* css 注释:默认隔行背景颜色 */
  9.     table.stripe tr.over td {background:#EEECEB;}
  10.     /* css注释:鼠标经过时候背景颜色 */
隔行变色JQuery代码:

点击(此处)折叠或打开

  1. $(document).ready(function(){ //这个就是传说的ready
  2.         $(".stripe tr").mouseover(function(){
  3.            //如果鼠标移到class为stripe的表格的tr上时,执行函数
  4.           $(this).addClass("over");}).mouseout(function(){
  5.                 //给这行添加class值为over,并且当鼠标一出该行时执行函数
  6.                 $(this).removeClass("over");}) //移除该行的class
  7.       $(".stripe tr:even").addClass("alt");
  8.         //给class为stripe的表格的偶数行添加class值为alt
  9.         // 整理特效
  10.       });

隔行换色HTML代码:

点击(此处)折叠或打开

  1. <table width="400" border="0" class="stripe" cellpadding="0" cellspacing="1">
  2.       <tr>
  3.         <th width="92">编号</th>
  4.         <th width="339">网站名称</th>
  5.         <th width="465">网址</th>
  6.       </tr>
  7.        
  8.       <tr>
  9.         <td width="92">1</td>
  10.         <td width="339"><a href="http:///">CSS教程网</a></td>
  11.         <td width="465"><a href="http:///">www.divcss5.com</a></td>
  12.       </tr>
  13.       <tr>
  14.         <td width="92">2</td>
  15.         <td width="339"><a href="http:///">DIVCSS5</a></td>
  16.         <td width="465"><a href="http:///">www.divcss5.com</a></td>
  17.       </tr>
  18.       <tr>
  19.         <td width="92">3</td>
  20.         <td width="339"><a href="">CSS5</a></td>
  21.         <td width="465"><a href="">www.css5.com.cn</a></td>
  22.       </tr>
  23.     </table>

转自 http:///css-texiao/texiao444.shtml

阅读(3974) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~