一、css+js实现li背景颜色交替
复制代码 代码示例:
<html>
<head>
<title>xker.com</title>
<style>
.l1{background:#ffffff}
.l2{background:#f4f4f4}
</style>
<script>
function initUl(){
var a=document.getElementsByTagName('ul');
for (var i=0;i<a.length;i++){
var v=document.getElementsByTagName('li');
var ii=1;
for (var j=0;j<v.length;j++){
if (v[j].parentNode==a[i]){
if (ii++%2==0){
v[j].className="l2";
}
else{
v[j].className="l1";
}
}
}
}
}
</script>
</head>
<body onload="initUl()">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<p>
二、css中ul li的背景小图标属性设置的两种情况
ul li的背景小图标属性设置一般会有两种情况：
①当标题前的图标是很长的一绺而不是单独的一个点或者类似图标时，在定义背景图background要定义在<ul>里。因为很长，所以放在<li>的外边<ul>里。
②当标题前的图标时单独的一个点儿或者方块或者其他类似图标时，定义背景图background要放在<li>里。
css中ul li的背景小图标属性设置一、css样式
复制代码 代码示例:
<style>
.test1 { width:100px; height:265px; background:url(/show/li.jpg) no-repeat scroll 0 8px; }
.test1 li {padding-left:30px;
line-height:27px; list-style-type:none;}
</style>
<ul class="test1">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
如图示：
css中ul li的背景小图标属性设置二：
复制代码 代码示例:
<style>
.test1 li { padding-left:15px; background:url("/icon_fk.gif" ) no-repeat scroll 1px 8px; line-height:22px; list-style-type:none;}
</style>
<ul class="test1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
如图示：
