CSS3打造的隔行换色效果

此代码仅供参考

---

代码说明

CSS3.0仿写JavaScript经典的隔行换色实例代码，用CSS3实现似乎看上去更简单代码更简洁，本例中的列表是基于DT和DD标签，不过使用Li标签也是可以的，这个和个人习惯有关系。本例的效果在CSS2中想当广泛，欢迎测试使用。

---

html代码

<style type="text/css"> #list *{margin:0; padding:0;} #list{font-family:"Microsoft yahei"; font-size:14px;} #list dt,#list dd{height:30px; line-height:30px; padding-left:20px; text-align:left; list-style:none; color:#fff;} #list dd{color:#000;} #list dt:nth-of-type(odd){background:#900;}/*奇数行*/ #list dt:nth-of-type(even){background:#090;}/*偶数行*/ </style> <dl id="list"> <dt>网页代码站欢迎您的到来</dt> <dd>提供编程源码、网站源码、书籍教程下载</dd> <dt>网页代码站欢迎您的到来</dt> <dd>提供编程源码、网站源码、书籍教程下载</dd> <dt>网页代码站欢迎您的到来</dt> <dd>提供编程源码、网站源码、书籍教程下载</dd> <dt>网页代码站欢迎您的到来</dt> <dd>提供编程源码、网站源码、书籍教程下载</dd> <dt>网页代码站欢迎您的到来</dt> <dd>提供编程源码、网站源码、书籍教程下载</dd> </dl>

---

代码演示

网页代码站欢迎您的到来

提供编程源码、网站源码、书籍教程下载

网页代码站欢迎您的到来

提供编程源码、网站源码、书籍教程下载

网页代码站欢迎您的到来

提供编程源码、网站源码、书籍教程下载

网页代码站欢迎您的到来

提供编程源码、网站源码、书籍教程下载

网页代码站欢迎您的到来

提供编程源码、网站源码、书籍教程下载

---

---