首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

隔行换色有关问题

2012-03-27 
隔行换色问题HTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.

隔行换色问题

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> 

热点排行