使用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日
下一篇 2020年11月24日

相关推荐

  • 做网站该注意哪些基本要素?

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

    建站入门 2018年2月10日
    26600
  • 什么是搜索引擎优化SEO?

    搜索引擎优化SEO的本质是:优化你的网站,让搜索引擎蜘蛛(spider)更好的阅读和抓取。 搜索引擎蜘蛛浏览和阅读网站的HTML内容。因此,如果你的网站导航或文字内容是框架(Frames),图片,JavaScript或Flash,则搜索引擎蜘蛛将不能全部或部分抓取你的站点内容。不管你的站点是:内容管理系统(CMS)、电子商务系统(e-commerce sys…

    建站入门 2018年3月2日
    19800
  • 政府网站标准及网页设计规范

    国务院办公厅关于印发政府网站发展指引的通知  国办发〔2017〕47号各省、自治区、直辖市人民政府,国务院各部委、各直属机构: 《政府网站发展指引》已经国务院同意,现印发给你们,请认真贯彻执行。 国务院办公厅 2017年5月15日 (此件公开发布) 政府网站发展指引为进一步加强政府网站管理,引领各级政府网站创新发展,深入推进互联网政务信息数据和便民…

    建站入门 2020年11月8日
    57500
  • 织梦CMS通用安装教程

    今天先跟大家介绍一下dedecms织梦系统安装的方法步骤,以及织梦数据库还原的教程。详细请看图文讲解:1.运行 http://域名/install/index.php(比如你的域名是:http://www.rumenwu.com/,就输入http://www.rumenwu.com/install/index.php) (注)输入网址 http://域名/i…

    建站入门 2018年3月8日
    22900
  • 百度APP移动搜索落地页体验白皮书5.0

    1.导言 2.面向对象 3.名词解释 4.落地页体验规范   4.1. 信息获取规范 4.1.1 加载速度   4.2.页面浏览规范 4.2.1 排版布局   4.2.2 字号间距   4.2.3 pc站移动适配   4.2.4 页面机型适配   4.2.5 落地页广告标准   4.3. 交互操作规范   4.3.1 滑动顺畅   4.3.2 功能友好   …

    建站入门 2020年3月25日
    16800

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信