您的位置:首页> 实例代码> CSS实例

CSS 隔行变色代码实例

2019-11-23 15:05| 作者: admin| 查看: 579| 评论: 1|来自: 蚂蚁部落

隔行变色效果应用非常广泛,一是比较美观,其次也能提高辨识度。

之前通常要结合JavaScript实现此效果,实现起来稍显麻烦。

随着软硬件的进步,现在使用CSS完全可以满足需求。

下面通过分别通过代码实例解决如下几个问题:

(1).实现奇偶行变色效果。

(2).实现隔指定行变色效果。

一.奇偶行变色效果:

此效果应用广泛,尤其是在数据量大的情况下效果明显。

可以有效的提高行与行之间的辨识度,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style:none;
  width:280px;
  height:30px;
  line-height: 30px;
  font-size:12px;
}
#box li:nth-of-type(odd){ 
  background:#ccc;
}
</style>
</head>
<body>
  <ul id="box">
    <li>本文分析一下CSS实现隔行变色</li>
    <li>当前已经无需借助于JavaScript实现标题效果</li>
    <li>CSS的功能会随着时间的推移更加强大起来</li>
    <li>通过努力和实践才会真正领悟到一些选择器的用法</li>
    <li>不要相信有捷径,脚踏实地的工作才是王道</li>
  </ul>
</body>
</html>

上述代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/23/150603glwj90o59j2jx02m.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).实现了奇数行变色效果,:nth-of-type()选择器参数是odd。

(2).如果想要偶数行变色,只要将选择器参数修改为even。

二.隔指定行变色效果:

实际应用中,可能需要更加灵活的操控,比如从第几行起、隔几行变色。

看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  list-style:none;
  width:280px;
  height:30px;
  line-height: 30px;
  font-size:12px;
}
#box li:nth-child(3n+1){ 
  background:#ccc;
}
</style>
</head>
<body>
  <ul id="box">
    <li>本文分析一下CSS实现隔行变色</li>
    <li>当前已经无需借助于JavaScript实现标题效果</li>
    <li>CSS的功能会随着时间的推移更加强大起来</li>
    <li>通过努力和实践才会真正领悟到一些选择器的用法</li>
    <li>不要相信有捷径,脚踏实地的工作才是王道</li>
    <li>本文分析一下CSS实现隔行变色</li>
    <li>当前已经无需借助于JavaScript实现标题效果</li>
    <li>CSS的功能会随着时间的推移更加强大起来</li>
    <li>通过努力和实践才会真正领悟到一些选择器的用法</li>
    <li>不要相信有捷径,脚踏实地的工作才是王道</li>
  </ul>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/23/150627jqpqx4cc73cg7gu3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码分析如下:

(1).通过上述代码可以更加灵活的操控变色效果。

(2).指定从第一行起,每隔三行进行变色。

代码都非常简单,关键在于对于选择器的,本文的目的也是介绍选择器的用法。

相关阅读:

(1).:nth-of-type()参阅CSS E:nth-of-type(n)一章节。

(2).:nth-child()参阅CSS E:nth-child(n)一章节。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

发表评论

最新评论

引用 天人一 2019-11-29 13:36
亮哥还在更新呢

查看全部评论(1)

返回顶部