使用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日 下午11:36
下一篇 2020年11月24日 上午1:24

相关推荐

  • 大前端和小前端的区别

    1、小前端指的是Web前端,从浏览器端到web服务器端的所有开发; 2、而大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心。 大前端是web统一的时代,利用…

    建站入门 2022年2月7日
    62800
  • 关键词怎么确定?

    尚奇公司的欧朝晖曾谈到一个案例: 他为一个全球著名的手机网站做优化时,该公司的营销策略不允许使用任何带有“cheap”字眼的词,因为他们认为这个词对产品有负面影响。然而,在搜索引擎关键字分析数据中,“cheap”确实一个“非常受欢迎”的词。比如:cheap cell phone和cheap mobile phone。经过一番论证,公司的营销部门同意使用这个词…

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

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

    建站入门 2018年8月28日
    46300
  • 二级域名如何绑定一级目录

    二级域名绑定一级目录其实很简单。 在 DNS 域名管理后台域名转发里,设置二级域名转发至你的目标一级目录。 提交后,在主机记录列表会添加一个你刚才提交的二级域名,其指向的IP地址与主域名不同。比如,新网互联指向的是:124.42.122.46。这个是正确的。 不管你使用的虚拟主机,还是独立服务器。只要主域名可以正常访问即可,不需要在虚拟主机或独立服务器上再设…

    建站入门 2018年3月2日
    41400
  • 解读反向链接与外链的区别?

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

    建站入门 2018年8月29日
    66300

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信