网页设计制作CSS实现隔行换色两种方法

药材名位

药材名位

2016-02-19 23:20

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享网页设计制作CSS实现隔行换色两种方法吧。

网页设计制作,CSS实现隔行换色两种方法:

第一种方法:


style type="text/css"
UL.myul1 LI{background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8');
}
/style
ul class="myul1"
li id="li1"111/li
li id="li2"222/li
li id="li2"333/li
li id="li2"444/li
li id="li2"555/li
li id="li2"666/li
/ul

第二种方法:


style type="text/css"
!--
.li01 { background:#FFF; }
.li02 { background:#000; }
li a{width:100%;display:block;}
li a:hover{background:red;}
--
/style

div id="list01"ul
li class="title"a href="#"title/a/li
lia href="#"111/a/li
lia href="#"222/a/li
lia href="#"333/a/li
lia href="#"444/a/li
lia href="#"555/a/li
lia href="#"666/a/li
/ul/div

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

script Language="Javascript1.2"

objName=document.getElementById("list01").getElementsByTagName("li")

for (i=0;iobjName.length;i++) {
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
/script

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

展开更多 50%)
分享

猜你喜欢

网页设计制作CSS实现隔行换色两种方法

Web开发
网页设计制作CSS实现隔行换色两种方法

CSS实现网页中的隔行换色代码

Web开发
CSS实现网页中的隔行换色代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS网页隔行换色技巧

Web开发
CSS网页隔行换色技巧

CSS网页代码编写技巧:隔行换色的实现

Web开发
CSS网页代码编写技巧:隔行换色的实现

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS隔行换色

Web开发
CSS隔行换色

CSS:标准下的隔行换色方法

Web开发
CSS:标准下的隔行换色方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

win10怎么打开Cortana语音助手

win10怎么打开Cortana语音助手

CSS教程:盒模型(BOX Model)

CSS教程:盒模型(BOX Model)
下拉加载更多内容 ↓