HTML系列：js和css多种方式实现隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>两种方式让css隔行变色js和css3属性.box li:nth-of-type</title>
<style>
*{
margin:0;
padding:0;
/* 通配符，表示所有标签元素。margin:auto表示横竖都居中，margin: 0 auto表示横居中，竖不居中； */
}
ul, ol {
list-style:none;
/* 去列表点 */
}
.box {
margin:20px auto;
/* 上下外边距20px,左右自动 */
width:300px;
}
.box li{
padding:0 5px;
line-height:35px;
border-bottom:1px dashed #AAA;
/* 可点击的小手 */
cursor: pointer; /* 超过一行的内容裁切三个点来代替 */
text-overflow: ellipsis;
/* 文本溢出时发生的事情 */
white-space: nowrap;
/* 段落中的文本不进行换行： */
overflow: hidden;
}
/* 以下css3完成 */
/* nth-child(n):当前容器所有子元素中的第n个 */
/* .box li:nth-child(1):box容器所有子元素的第一个并且标签名是li的 */
/* nth-of-type(n):先给当前容器按照某一个标签名进行分组，获取分组中的第n个 */
/* .box li:nth-of-type(1): 先获取box中的所有li，在获取li中的第一个 */
.box li:nth-child(1) { color:aqua;
}
/* .box li:nth-of-type(even){
background: #AAA;
EVEN:偶数 ODD：奇数
} */
/* 三行为一组变颜色 */
/* .box li:nth-of-type(3n+1){
color:red;
}
.box li:nth-of-type(3n+2){
color:green;
}
.box li:nth-of-type(3n){
color:darkmagenta;
} */
.box li:hover {
background:lightcoral;
/* 鼠标滑过有样式，离开原样式 */
}
.bgColor {
background-color:lightcyan;
}
</style>
</head>
<body>
<ul class="box" id="box">
<li>上次大家成都你cdsvdvd vax v a 杀虫水</li>
<li>撒差多少VCD深V上次的深V但是是的深V的深V是DVD深V的深V的深V是大Vsad深V是的v</li>
<li>大SAV吃撒撒发顺丰</li>
<li>萨芬从深V撒VCDVD深V是大V撒大V大是发大V是大V是哒但是啥的 </li>
<li>撒房产税才是</li>
<li>阿深V大SAV的在v</li>
</ul>
<script>
var oBox = document.getElementById('box');
var boxList = oBox.getElementsByTagName('li');
console.dir(boxList);
//=>搞个循环来完成我们的样式赋值
// for (var i=0;i<boxList.length;i++){
//=>索引是奇数代表偶数行
//第一种方式隔2行变色
// if(i % 2 !==0) {
// boxList[i].style.backgroundColor = 'pink';
// }
//第二种方式隔2行变色
// if(i % 2 !==0) {
// boxList[i].className += 'bgColor';
// }
// }
//第三种方式隔2行变色
// for (var i=0;i<boxList.length;i+= 2){
// boxList[i].style.backgroundColor= 'lightblue'; // }
//第三种方式隔3行变色
for (var i=0;i<boxList.length;i+= 4){
boxList[i].style.backgroundColor= 'yellow'; }
</script>
</body>
</html>
HTML系列：js和css多种方式实现隔行变色的更多相关文章
- js 创建对象的多种方式
参考: javascript 高级程序设计第三版 工厂模式 12345678910 function (name) { var obj = new Object() obj.name = name o ...
- 基础2：js创建对象的多种方式
js创建对象的多种方式 1. 工厂模式 function createPerson(name) { var o = new Object() 0.name = name return o } var ...
- CSS多种方式实现底部对齐
CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1.红色区域数据需要倒排(即从底部开始数,数字为1.2.3.4.5),并且显示在最底部 2.当数据过多时需要显示滚动 ...
- yii 中引入js 和css 的方式
在yii中 我们需要引入css 和 js 的时候,yii 自身有需要的类. 当我在views 视图层中引入css 和 js , <?php Yii::app()->clientScript ...
- js创建对象的多种方式及优缺点
在js中,如果你想输入一个的信息,例如姓名,性别,年龄等,如果你用值类型来存储的话,那么你就必须要声明很多个变量才行,变量声明的多了的话,就会造成变量污染.所以最好的方式就是存储到对象中.下面能我就给 ...
- css多种方式实现等宽布局
本文讲的等宽布局是在不手动设置元素宽度的情况下,使用纯css实现各个元素宽度都相当的效果. 1.使用table-cell实现(兼容ie8) <style> body,div{ margin ...
- CSS多种方式实现元素水平垂直居中
html结构: <div class="center">确定宽高水平垂直居中</div> <div class="center2" ...
- css多种方式实现双飞翼布局
圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...
- 点滴积累【JS】---JS小功能（列表页面隔行变色）
效果: 代码: <head runat="server"> <title></title> <script type="text ...
随机推荐
- Codeforces Round #603 (Div. 2) E. Editor（线段树）
链接: https://codeforces.com/contest/1263/problem/E 题意: The development of a text editor is a hard pro ...
- 关于单片机的RAM
一块RAM 分为了 堆 和 栈 名词而已,知道就可以了, 各种内存溢出问题: 全局数组访问越界 出现的问题:直接重启,或者死机 解决办法 : 额,写好自己的程序吧!!!!!!! 函数的局部变量过 ...
- LINUX下的gdb调试方法
首先对目标文件进行编译 例如: gcc test.c -o test 这时会生成一个文件test,然后我们就可以对test进行调试了 示例: gdb test 好了以后是设定断点 示例: break ...
- 【JZOJ6231】【20190625】等你哈苏德
题目 有\(m\)条线段,每条线段为\([l_i,r_i]\),每条线段可以是黑/白色 有些线段已经被染色,有些需要被确定颜色 询问是否存在一种染色方案,使得对于每一个位置\(i\),覆盖它的线段黑白 ...
- 自制Amiibo 踩坑/填坑 指南
去年买了台老版NS,后来得知有Amiibo这种东西的存在,但是学校附近都买不到. 再后来网上看见有人在X宝卖自制卡片,就寻思着是否能自己 DIY一套,于是掉坑里. 要想使用自制Amiibo,一共要做两 ...
- 如何使用Processing获取图片中每一个像素的坐标
剛好碰到有同學問如何在Processing中進行像素級的圖片處理, =============================================================此時需要一 ...
- python变量d的说明
[变量] 什么是变量: 变:现实世界中的状态是会发生改变的. 量:记录现实世界中的状态,让计算机能够像人一样去识别世间万物 是变化的量 变量的组成: 变量名:变量名用来引用变量值,但凡需要用变量值,都 ...
- OpenFOAM——孔板流量计
本算例来自<ANSYS FLUENT技术基础与工程应用:流动传热与环境污染控制领域> 一个入口,入口速度为0.0176839m/s,一个出口边界,其余为壁面边界 流体的物性参数: 密度:1 ...
- 大龄IT程序员的救赎之道
不知道从什么时候开始,中年危机持续刷屏,遍布整个职场,横跨各个行业,对各个细分工种的中年男女或者即将步入中年的青年男女几乎形成了垂直打击,而且中年这个年龄分界线从40岁滑落到35岁,甚至到30岁.笔者 ...
- 《JAVA程序设计》_第十一周学习总结
一.学习内容 13.1 URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符,使用URL创建对象的应用程序称作客户端程序. 一个URL对象包含的三个基本信息:协 ...