本帖最后由 武汉分校-小舞 于 2017-8-8 09:29 编辑
Css3实现表格隔行变色或隔列变色
更多学习资源请关注微信公众号“黑马程序员武汉中心” （本文档由教研部张老师提供） 先上图： 这些都是css控制的！并不是单独的给每行添加一个样式，一起来看下样式：
tabletr:nth-child(odd){background:#eee;} /*基数行的背景原色*/ tabletd:nth-child(even){color:#A00;} /*偶数单元格文字原色*/ tabletr:nth-child(5){background:#98C4E5;color:#FFF;} /*第五行背景原色* 分别为选择为：奇数行、偶数列、第五行的相关样式 最后为整个html和CSS代码 <!doctypehtml> <html> <head> <metacharset="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:#eee;} /*基数行的背景原色*/
table td:nth-child(even){color:#A00;} /*偶数单元格文字原色*/
table tr:nth-child(5){background:#98C4E5;color:#FFF;} /*第五行背景原色*/
table tr:hover{background:#73B1E0;color:#FFF;}
table td,table th{border:1px solid #ddd;} </style>
</head>
<body>
<table> <tr> <th>传智播客</th> <th>UI培训学院</th> <th>photoshop</th> <th>html</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>
| 
收藏
淘帖
踩
