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实现的响应式导航
Oct 31 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
css弧边选项卡的项目实践
May 07 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安全技术之 实现php基本安全
2010/09/04 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python实现的防DDoS脚本
2011/02/08 Python
ptyhon实现sitemap生成示例
2014/03/30 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
Django实现分页功能
2018/07/02 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
原来闭幕词是这样写的呀!
2019/07/01 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python