使用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、标题的定义 对网页内容的准确且简明扼要的描述。 具体举例: 图1-1 符合规范的标题示例…

    建站入门 2019年3月15日
    1.1K00
  • 怎么解决WordPress更新时,提示无法连接到FTP服务器?

    怎么解决WordPress更新时,提示无法连接到FTP服务器?在 WordPress 目录下找到 wp-config.php 文件并编辑,在最后一行加上define(‘FS_METHOD’, “direct”);

    建站入门 2018年2月8日
    1.0K00
  • Apache伪静态规则文件.htaccess的另类用法

    1、开启/关闭拼写检查(关闭后会区分大小写) CheckSpelling On #开启 CheckSpelling Off #关闭 关闭拼写检查可以解决一下报错 2、禁止/只允许特定IP访问 (1) 禁止单个IP访问,例如192.168.1.1 Order Allow,Deny Allow from all Deny from 192.168.1.1 (2)…

    建站入门 2019年10月6日
    88000
  • 写网页内容需要注意些什么?

    网页内容是写给谁看的? 这个问题不是客户问我的,而是我提出的。对这个问题的理解和把握,可以看出你对SEO的认识程度。 或许很多网站设计者会毫不犹豫地说:“网页内容,当然是给用户看的呀”。其实,这是第一代网站建设的思维,已经落伍了很多年。第三代SEO网站建设思想指出:网页内容,不只是给用户看,更是给搜索引擎看。 网页内容要写给用户看,你需要: 1、懂得广告学思…

    建站入门 2018年4月13日
    78100
  • 如何设置首选域?

    两种方法设置首选域: 301重定向的方法设置首选域。 使访问rumenwu.com/的时候就会自动转到 www.rumenwu.com。在.htaccess文件里写上以下代码: RewriteEngine on RewriteCond %{http_host} ^mydomain.com [NC] RewriteRule ^(.*)$ http://www.…

    建站入门 2018年3月2日
    1.0K00

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信