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

相关推荐

  • SEO需要掌握哪些基本SEO技巧?

    导航请确保你的网站导航都是以html的形式链接。所有页面之间应该有广泛的互联,如果无法实现这一点,可以考虑建立一个网站地图。 首页网站的首页(home或index页等)应该采用文本的形式,而不是flash等。这个文本里面要包含你的目标关键字或目标短语。 标签<title> < /title>这是标题标签,这里面应当包含你最重要的目标关…

    建站入门 2018年1月21日
    60200
  • 快收秒收详细教程

    先不BB别的,放一下数据。这是我8月份操作的一个站,用的一个老域名做的,所以直接就开始了。别在意搜狗掉词,无所谓的,实际上之前流量预估都权6了,2万多ip,每天ip就几百上千。别看站长工具搜狗波动的那么厉害,其实流量一直都是几百上千,没任何波动。说的有点远了,那么就回归正题,说一下怎么正确有效的去提高收录。很多人也知道,百度对新闻相关的内容收录是很快的,但是…

    建站入门 2022年1月6日
    70400
  • link和domain的区别

    虽然我们把这个话题写在 SEO入门的类别下,但据我们在网上所查资料发现,很多人对link 和domain 的区别存在误解,也就是说这个问题并不简单。 这里我们直接给出答案,不举例,不谈为什么,以更简洁明了。如果你有不同观点,请到相应搜索引擎验证。 最重要的一点:link和domain在不同的搜索引擎代表不同的含义。 link: 百度,link 并不代表一个指…

    建站入门 2018年2月2日
    64900
  • 【视频】2019年国内搜索引擎市场份额排行TOP10

    2019年国内搜索引擎市场份额排行TOP10

    建站入门 2019年1月15日
    51000
  • 关键词放在什么位置最好?

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

    建站入门 2018年4月19日
    71600

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信