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

相关推荐

  • WordPress SMTP邮件发送插件:Easy WP SMTP

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

    建站入门 2018年8月30日
    1.3K00
  • WordPress响应式主题添加视频手机端不显示问题解决办法

    随着移动互联网的发展,现在手机端的流量占比越来越大,响应式主题由于兼容PC和移动端以及部署方便等优点也被广大站长使用接受,不过由于电脑和手机系统兼容性的问题,很多用户遇到视频播放的问题:在网站添加的视频在电脑上可以正常播放,一到手机上就无法显示。 问题原因 电脑上一般都会安装flash控件,视频大多也是使用flash播放器来播放的,而手机端目前网页播放视频都…

    建站入门 2018年10月16日
    1.1K00
  • 404页面该怎么做?

    404页面的目的是:告诉浏览者其所请求的页面不存在或链接错误,同时引导用户使用网站其他页面而不是关闭窗口离开。 很多开源系统如CMS系统、Blog系统等不提供404页面或提供的404页面并未达到SEO的要求,这让网站的权威性大打折扣。 404页面该达到怎么样的效果才符合SEO要求? 搜索引擎通过HTTP状态码来识别网页的状态。当搜索引擎获得了一个错误链接时,…

    建站入门 2018年1月23日
    89300
  • 升级WordPress 5.0后,切换回经典编辑器Classic Editor

    升级WordPress 5.0后,切换回经典编辑器Classic Editor WordPress 5.0 正式采用了全新的区块编辑器-古德堡编辑器Block Editor Gutenberg,对于很多已经习惯国产编辑器习惯的站长来说不是特别方便,下面我们看看如何切换成经典编辑器吧。   相信有不少人不太习惯新编辑器的使用,那么在更新了WordPress 5…

    2018年12月15日
    1.2K00
  • 如何进行关键词分析?

    关键词怎么确定?从这篇文章,我们可以大体了解选择关键词的基本思路: 选择符合自己实力的关键词 不选择流量太低的关键词 现在我们详细解剖关键词分析的过程: 了解行业概况 行业关键词集合 关键词竞争性分析 关键词发展规划和流量预计 确定目标关键词 了解行业概况 搜索行业主关键词,搜索结果前5页的网站基本上可以说明该行业的概括。比如:SEO 这个关键词排前50名的…

    建站入门 2018年3月27日
    1.1K00

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信