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过渡_动力节点Java学院整理
Jul 11 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 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函数点评
2012/07/05 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
PHP中的替代语法介绍
2015/01/09 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
github配置使用指南
2014/11/18 Python
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python如何输出反斜杠
2020/06/18 Python
介绍一下EJB的体系结构
2012/08/01 面试题
经济管理专业毕业生推荐信
2013/11/11 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
工程部主管岗位职责
2015/02/12 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python