使用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

相关推荐

  • 关于不带www的域名

    在做域名解析时,应该设置一个不带www的域名。这样,当用户使用不带www的域名时,可以正常访问你的网站。 做SEO时需要正确处理带www和不带www域名的关系: 1、我们讲过URL标准化的概念,在搜索引擎看来,带www和不带www的URL是不同的两个URL,当它们指向同一个网站时,会让搜索引擎不懂应该选择哪一个URL作为主要的。所以,我们建议部分符合条件的主…

    建站入门 2018年8月28日
    1.1K00
  • 关键词放在什么位置最好?

    页面上的什么位置放着关键词最好?搜索引擎认为,网页上重要的地方往往放着关键词。 首先关键词应该在文章的每个段落里; 网页头部标签(如:Description Tag-描述标签、关键词标签等)应该放着关键词; 网页上图片的ALT标签里应该写上关键词; 可以考虑把关键词作为子目录; 网页中谈到其他网页的关键词时,不要忘了添加链接并指向那个网页; 添加关键词时,应…

    建站入门 2018年4月19日
    1.4K00
  • phpcms修改后台内容管理列表数量的方法

    做为一个网站管理人员,很多时候在进行网站的后台文章编辑、调整、删除或移动时,经常需要用到临时加大列表显示数量以提升工作效率和方便数据管理,这是用PHPCMS的站长很实用的技巧代码,必须留存下来。 PHPCMS v9 怎么修改加大后台列表每页显示的文章数量? 比如在采集管理-内容发布-那里采集到的文章,默认列表显示20条,编辑管理文章时会很费劲,所以就有如何修…

    建站入门 2025年3月30日
    48800
  • 做网站该注意哪些基本要素?

    以下内容参考Google对网站管理员的建议,适当的地方我们已经添加注解。 设计与内容指南 网站应具有清晰的层次结构和文本链接。每个网页应至少可以通过一个静态文本链接打开。文本链接不同于通过javascript等其他代码生成的链接。如本文下面的“打印”即不是通过文本链接实现。 为用户提供网站地图,列出指向网站重要部分的链接。如果网站地图上的链接超过或大约为 1…

    建站入门 2018年2月10日
    1.2K00
  • 关键词密度多少比较好?

    很多SEO前辈都回答过这个问题。答案分别是:2-8%、3-7%、低于10%、5%左右,你自己选一个吧。关键词密度是一个模糊的概念而不是绝对。 关键词密度并不是越高越好,下面的解释,你或许会明白关键词密度意味着什么? 搜索引擎的工作流程大概是这样的: 1、对网页进行索引。这是Robot的工作,搜索机器人很勤奋,所以被收录是最简单的事情了。(但却有不少人老是在埋…

    建站入门 2018年4月12日
    1.0K00

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信