为了账号安全,请及时绑定邮箱和手机立即绑定

如何用CSS让列表做到隔行变色

在初学HTML5/CSS3的时候我们会接触到列表table的常见属性,但是隔行变色不容易接触到!下面我们可以通过CSS样式来实现列表隔行变色的效果!

html代码如下:

<table align="center">
    <caption>员工信息表</caption>
    <tr height="50">
          <th>姓名</th>
          <th>性别</th>
          <th>工号</th>
          <th>部门</th>
          <th>邮箱</th>
          <th>电话</th>
    </tr>
    <tr>
          <td>张三</td>
          <td>男</td>
          <td>3462</td>
          <td>产品部</td>
          <td>9383845@qq.com</td>
          <td>2467432</td>
    </tr>
    <tr>
          <td>张三</td>
          <td>男</td>
          <td>3462</td>
          <td>产品部</td>
          <td>9383845@qq.com</td>
          <td>2467432</td>
    </tr>
    <tr>
          <td>张三</td>
          <td>男</td>
          <td>3462</td>
          <td>产品部</td>
          <td>9383845@qq.com</td>
          <td>2467432</td>
    </tr>
    <tr>
          <td>张三</td>
          <td>男</td>
          <td>3462</td>
          <td>产品部</td>
          <td>9383845@qq.com</td>
          <td>2467432</td>
    </tr>
    <tr>
          <td>张三</td>
          <td>男</td>
          <td>3462</td>
          <td>产品部</td>
          <td>9383845@qq.com</td>
          <td>2467432</td>
    </tr>
</table>

CSS样式如下:

table{width:600px;border:none;border-collapse:collapse}

td,th{border:1px solid #000;text-align:center;height:40px}

<!--如下是设置偶数行的样式-->
table tr:nth-child(even){background:#f2f2f2;color:#000}

<!--如下是设置奇数列的样式->
table td:nth-child(odd){color:#c00}

<!--如下是设置第一行的样式-->
table tr:nth-child(1){background:#fff;color:#000;font-weight:bold}

<!--如下是设置鼠标触发样式->
table tr:hover{background:#8470FF;colre:#fff;}
点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
UI设计师
手记
粉丝
6
获赞与收藏
10

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消