css3隔行变换色实现示例


Posted in HTML / CSS onFebruary 19, 2014

复制代码
代码如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#list1 li:nth-of-type(odd){ background:#00ccff;}奇数行
#list1 li:nth-of-type(even){ background:#ffcc00;}偶数行
#list2 li:nth-child(4n+1){ background:#00ccff;}从第一行开始算起 每隔4个(包含第四个)使用此样式
#list00000 li:nth-child(4n+2){background:#090;}从第二行开始算起 每隔4个(包含第四个)使用次样式
#list00000 li:nth-child(4n+3){background:#009;}从第三行开始算起 每隔4个(包含第四个)使用次样式
#list00000 li:nth-child(4n+4){background:#990;}从第四行开始算起 每隔4个(包含第四个)使用次样式
</style>
</head>
<body>
<div>
<ul id="list1">
<li>1111111前端路上是懒人建站的多人博客</li>
<li>222222222222CSS3隔行换色测试</li>
<li>333333333提供jquery 教程实例学习代码、html5教程实例和css/css3教程实例学习代码。</li>
<li>44444444前端路上博客的灵魂:学习、发现、分享、交流</li>
<li>55555555555555</li>
<li>66666666666666666</li>
</ul>
<hr />
<ul id="list2">
<li>1111111前端路上是懒人建站的多人博客</li>
<li>222222222222CSS3隔行换色测试</li>
<li>333333333提供jquery 教程实例学习代码、html5教程实例和css/css3教程实例学习代码。</li>
<li>44444444前端路上博客的灵魂:学习、发现、分享、交流</li>
<li>55555555555555</li>
<li>66666666666666666</li>
</ul>
</div>
</body>
HTML / CSS 相关文章推荐
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 #HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 #HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 #HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 #HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 #HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 #HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 #HTML / CSS
You might like
PHP中extract()函数的妙用分析
2012/07/11 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
深入理解python try异常处理机制
2016/06/01 Python
理论讲解python多进程并发编程
2018/02/09 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
python实现Flappy Bird源码
2018/12/24 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
python模拟实现斗地主发牌
2020/01/07 Python
python实现超级马里奥
2020/03/18 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
Python远程方法调用实现过程解析
2020/07/28 Python
python Pexpect模块的使用
2020/12/25 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
介绍Java的内部类
2012/10/27 面试题
毕业自荐书
2013/12/09 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
C++程序员求职信范文
2014/04/14 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
小学庆六一主持词
2015/06/30 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫