Web design making CSS to realize the two methods of interlaced color change 2007-12-21 20:59:44
Source: Web Teaching Network
Web design, CSS implementation of alternating color two methods:
The first method:
The following is the referenced content: <style type= "Text/css" > UL.MYUL1 li{ } </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> |
The second method:
The following is the referenced content:
<style type= "Text/css" > <!-- . li01 {background: #FFF;} . li02 {background: #000;} Li a{width:100%;d isplay:block;} Li A:hover{background:red;} - </style> <div id= "list01" ><ul> <li class= "title" ><a href= "#" >title</a></li> <li><a href= "#" >111</a></li> <li><a href= "#" >222</a></li> <li><a href= "#" >333</a></li> <li><a href= "#" >444</a></li> <li><a href= "#" >555</a></li> <li><a href= "#" >666</a></li> </ul></div> <script language= "Javascript1.2" > Objname=document.getelementbyid ("list01"). getElementsByTagName ("Li") for (i=0;i<objname.length;i++) { (i%2==0)? (ObjName (i). ClassName = "li01"):(objname (i). ClassName = "li02"); } </script> |
Web design making CSS to realize the two methods of interlaced color changing