使用CSS3实现表格隔行/隔列变色

废话少说,先看效果,如果不是你想要的,你可以撤了~

使用CSS3实现表格隔行/隔列变色
这些都是css控制的,然后我们看下样式:

table tr:nth-child(odd){background:#F4F4F4;}
table td:nth-child(even){color:#C00;}
table tr:nth-child(5){background:#73B1E0;color:#FFF;}

分别选择为:奇数行、偶数列、第五行,下面是完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Css3实现表格隔行变色或隔列变色</title>
<style>
body{padding:0;margin:0;font:normal 12px/24px "\5FAE\8F6F\96C5\9ED1";color:#444;}
table{width:500px;border:0;margin:100px auto 0;text-align:center;border-collapse:collapse;border-spacing:0;}
table th{background:#0090D7;font-weight:normal;line-height:30px;font-size:14px;color:#FFF;}
table tr:nth-child(odd){background:#F4F4F4;}
table td:nth-child(even){color:#C00;}
table tr:nth-child(5){background:#73B1E0;color:#FFF;}
table tr:hover{background:#73B1E0;color:#FFF;}
table td,table th{border:1px solid #EEE;}
</style>
</head>
<body>
<table>
 <tr>
 <th>xHTML+CSS</th>
 <th>HTML5+CSS3</th>
 <th>Javascript</th>
 <th>jQurey</th>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
 <tr>
 <td>xHTML+CSS</td>
 <td>HTML5+CSS3</td>
 <td>Javascript</td>
 <td>jQurey</td>
 </tr>
</table>
</body>
</html>

 

主题测试文章,只做测试使用。发布者:小屋,转转请注明出处:http://www.rumenwu.com/site/1660.html

(5)
小屋的头像小屋
上一篇 2020年11月16日
下一篇 2020年11月24日

相关推荐

  • 大型行业网站为什么一定要SEO?

    对于大型行业网站,SEO显得特别重要。可以简单总结四个理由: 1、SEO让行业网站的产品和服务更完善、提升客户满意度。 行业网站的产品和服务是对本行业内的企业产品和服务进行归类和整合,通过类“大卖场模式”吸引采购商,从而为合作企业带来订单。然而,在一般情况下,行业网站在建站之初的一年内是不会有采购商的。正如沃尔玛如果没有好的选址,没有大量的宣传单,消费者怎么…

    建站入门 2018年2月21日
    19300
  • WordPress SMTP邮件发送插件:Easy WP SMTP

    现在很多站长问入门屋小编:WordPress如何实现注册、找回密码邮件验证通知功能,每次回答相同的问题,今天入门屋小编推荐一个WordPress SMTP邮件发送插件:Easy WP SMTP 邮件发送是网站的基础功能,WordPress在注册、找回密码、评论通知等地方也会涉及到邮件的发送。一般的虚拟主机都是有自带PHP邮件功能的,VPS、云服务器的话,则是…

    建站入门 2018年8月30日
    25300
  • 解读反向链接与外链的区别?

    对于SEO初学者而言,经常容易混淆反向链接与外部链接,大家并不清楚二者之间的区别,这对于SEO优化而言,却有着完全不同的概念,比如:增加反链与增加外链,严格意义上讲,这是两码事。 那么,反向链接与外链的区别有哪些? 简单举例,比如:X与Y这两个页面,如果SEO人员在Y的页面上,利用超链接指向了X页面,那么我们可以明确的指出Y页面的URL,就是X页面的反向链接…

    建站入门 2018年8月29日
    40000
  • 关键字也有权重吗?

    这似乎是一个很新的概念。但,对SEO颇懂行的人就明白,搜索引擎显然会这样做的。 决定关键字权重的大参数(之所以用大参数,是因为小参数还很多): 1、这个网页的PR值、这个网页主域名的PR值; 2、关键字在网页标题中的比重(就是比例)和位置; 3、关键字在meta标签中是否被提及; 4、网页内是否有很多与该关键字相关的关键字词组; 5、关键字在网页上的密度(3…

    建站入门 2018年4月19日
    20100
  • 如何增加导入链接?

    如何增加导入链接? 1、向目录网站(如DMOZ-开放目录)提交你的网址。 2、与相关、相似内容的网站交换友情链接。 3、书写“宣传软文”,并发表在合适的站点上。软文上带着站点的链接。 4、站点上的文章写明版权声明。 5、高质量的文章,将获得转载和导入链接。 6、在人气旺的论坛上发表文章和留言,并带着签名指向你的站点。 7、在博客上留言,名称指向你的站点。(适…

    建站入门 2018年8月28日
    31700

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信