隔行换色问题
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>*{ padding:0; margin:0; }ul,li{ list-style:none; }ul{ width:800px; margin:0 auto; overflow:hidden; }li{ float:left; width:90px; margin:4px 0; padding:0 5px; font:12px/24px; color:#333; height:24px; overflow:hidden; }</style></head><body><ul id="ul"> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> <li>li6</li> <li>li7</li> <li>li8</li> <li>li9</li> <li>li10</li> <li>li11</li> <li>li12</li> <li>li13</li> <li>li14</li> <li>li15</li> <li>li16</li></ul></body></html>请问li浮动怎么隔行换色？
[解决办法]
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>*{ padding:0; margin:0; }ul,li{ list-style:none; }ul{ width:800px; margin:0 auto; overflow:hidden; }li{ float:left; width:90px; margin:4px 0; padding:0 5px; font:12px/24px; color:#333; height:24px; overflow:hidden; }</style></head><body><ul id="ul"> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> <li>li6</li> <li>li7</li> <li>li8</li> <li>li9</li> <li>li10</li> <li>li11</li> <li>li12</li> <li>li13</li> <li>li14</li> <li>li15</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li> <li>li16</li></ul><script> function $t(name, cot){ cot = cot || document; return cot.getElementsByTagName(name); } var lis = $t('li'); var tmp = 8; for(var i=tmp, tmp2=2*tmp, len=lis.length; i<len; i+=tmp2){ for(var j=0; j<tmp; j++){ if(lis[i+j]) lis[i+j].style.color = 'red'; } }</script></body></html>