隔行变色的两种方式

wei257

于 2019-12-04 19:24:31 发布

阅读量375

点赞数 1

分类专栏： html案例回顾 HTML

本文链接：https://blog.csdn.net/wei257/article/details/103392564

版权

HTML 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html案例回顾

1 篇文章 0 订阅

订阅专栏

一.用js来控制的隔行变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用js来控制的隔行变色</title>
		<style type="text/css">
		   *{
			   padding:0px;
			   margin: 0px;
		   }
		   ul{
			   list-style: none;
			   padding: 10px;
		   }
		   li{
			   padding: 10px;
			   font-size: 16px;
			   margin-bottom: 10px;
			   border: 1px solid #C8EBFA;
			   color: #595959;
			   cursor:pointer;
		   }
		   li.con{
			   background: #D9D9D9 !important;
		   }
		</style>
	</head>
	<body>
		<!--隔行变色效果
			奇数 红色
			偶数 绿色
			鼠标 悬停灰色 -->
		<ul>
			<li>不知不觉你身边已换成5G基站 有辐射吗?</li>
			<li>发改委副主任回应猪肉涨价：增加猪肉等供应</li>
			<li>香港机管局再刊登声明：请不要再阻碍无辜旅客</li>
			<li>台又砸10亿补助岛内旅游 岛内不看好:没见过这么low的政策</li>
			<li>林志玲怀孕了？柯文哲随口爆料，被斥“吃人豆腐”</li>
			<li>给儿子的创业金?蔡英文亲信"丢"300万 岛内狂猜:钱哪来的</li>
		</ul>
	</body>
	<script>
		//获取<li>的集合
		var lis = document.getElementsByTagName('li')
		//遍历
		for(var i = 0;i<lis.length;i++){
			//判断是否为偶数
			if(i%2 == 0){
				lis[i].style.backgroundColor = '#fBCFD0'
			}else{
				lis[i].style.backgroundColor = "#C8EFD4"
			}
			//鼠标滑进事件
			lis[i].onmouseover = function(){
				this.className = 'con'
			}
			//鼠标滑出事件
			lis[i].onmouseout = function(){
				this.className = ''
			}
		}
	</script>
</html>

二、纯css控制的隔行变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纯css控制的隔行变色</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				padding: 10px;
			}
			li{
				padding: 10px;
				margin-bottom: 10px;
				border: 1px solid #D9D9D9;
				font-size: 14px;
				color: #595959;
				cursor: pointer;
			}
			/* 偶数(even)==>绿色 */
			li:nth-child(even){
				background-color:#C8EFD4;
			}
			/* 奇数(odd)==>红色 */
			li:nth-child(odd){
				background-color:#fBCFD0;
			}
			/* 鼠标悬停灰色*/
			li:hover{
				background-color:#D9D9D9
			}
		</style>
	</head>
	<body>
		<!--隔行变色效果
			奇数 红色
			偶数 绿色
			鼠标 悬停灰色 -->
		<ul>
			<li>不知不觉你身边已换成5G基站 有辐射吗?</li>
			<li>发改委副主任回应猪肉涨价：增加猪肉等供应</li>
			<li>香港机管局再刊登声明：请不要再阻碍无辜旅客</li>
			<li>台又砸10亿补助岛内旅游 岛内不看好:没见过这么low的政策</li>
			<li>林志玲怀孕了？柯文哲随口爆料，被斥“吃人豆腐”</li>
			<li>给儿子的创业金?蔡英文亲信"丢"300万 岛内狂猜:钱哪来的</li>
		</ul>
		
	</body>
</html>

温故而知新，开始整理学习过程中做过的案例

wei257

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
隔行变色的两种方式

一.用js来控制的隔行变色<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>用js来控制的隔行变色</title> <style type="text/css"> *{ padding:0px; ...
复制链接

扫一扫

专栏目录