Home思洋影视事业部网站建设知识库
0 Comments

四种方法轻松实现CSS隔行换色

发布于：2013-07-16  |   作者：广州网站建设  |   已聚集：人围观

本文和大家重点讨论一下四种实现CSS隔行换色的方法，它们分别是background背景图片，CSSExpression，使用class分别定义，通过JS看实例，希望本文介绍对你有所帮助。

四种实现CSS隔行换色的方法

CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：

一、background背景图片

如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。

二、CSSExpression

文字：



    
	
  1. 
		color:expression(this.sourceIndex%2?'#ff0000':'#000000');  
    2. 
	
  2. 
		 
    3. 




	背景：




    
	
  1. 
		background-color:expression(this.sourceIndex%2?'#ff0000':'#000000');  
    2. 
	
  2. 
		 
    3. 




	注意：本方法浏览器兼容度不够，不支持FF3。



	三、class分别定义



	ExampleSourceCode 




    
	
  1. 
		<ul> 
    2. 
	
  2. 
		<liclassliclass="bgcolor">...  
    3. 
	
  3. 
		<li>...  
    4. 
	
  4. 
		<liclassliclass="bgcolor">...  
    5. 
	
  5. 
		<li>...  
    6. 
	
  6. 
		</ul> 
    7. 
	
  7. 
		 
    8. 




	实实在在的写法。



	四、通过JS看实例



	SourceCodetoRun




    
	
  1. 
		<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
    2. 
	
  2. 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3. 
	
  3. 
		<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
    4. 
	
  4. 
		<head> 
    5. 
	
  5. 
		<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
    6. 
	
  6. 
		<title>www.52CSS.com-四种实现CSS隔行换色的方法</title> 
    7. 
	
  7. 
		<linkhreflinkhref="index.css"rel="stylesheet"type="text/css"/> 
    8. 
	
  8. 
		<scripttypescripttype="text/javascript"> 
    9. 
	
  9. 
		functionbgChange(){  
    10. 
	
  10. 
		if(!document.getElementsByTagName)returnfalse;  
    11. 
	
  11. 
		vartables=document.getElementsByTagName("table");  
    12. 
	
  12. 
		for(vari=0;i<tables.length;i++){  
    13. 
	
  13. 
		varodd=false;  
    14. 
	
  14. 
		trs=tables[i].getElementsByTagName("tr");  
    15. 
	
  15. 
		for(varj=0;j<trs.length;j++){  
    16. 
	
  16. 
		if(odd==true){  
    17. 
	
  17. 
		trs[j].style.background="#ccc";  
    18. 
	
  18. 
		odd=false;  
    19. 
	
  19. 
		}else{  
    20. 
	
  20. 
		odd=true;  
    21. 
	
  21. 
		}  
    22. 
	
  22. 
		}  
    23. 
	
  23. 
		}  
    24. 
	
  24. 
		}  
    25. 
	
  25. 
		window.onload=bgChange;  
    26. 
	
  26. 
		</script> 
    27. 
	
  27. 
		</head> 
    28. 
	
  28. 
		<body> 
    29. 
	
  29. 
		<tablewidthtablewidth="600"border="0"align="center"cellpadding="0"  
    30. 
	
  30. 
		cellspacing="0"> 
    31. 
	
  31. 
		<tr> 
    32. 
	
  32. 
		<td>测试文字</td> 
    33. 
	
  33. 
		<td>测试文字</td> 
    34. 
	
  34. 
		<td>测试文字</td> 
    35. 
	
  35. 
		</tr> 
    36. 
	
  36. 
		</table> 
    37. 
	
  37. 
		<scripttypescripttype='text/javascript'> 
    38. 
	
  38. 
		//<![CDATA[ 
    39. 
	
  39. 
		if(document.getElementById('processtime'))document.
    40. 
	
  40. 
		getElementById('processtime').innerHTML="<spanclass='runtimedisplay'>  
    41. 
	
  41. 
		Runin184ms,9Queries.</span>";  
    42. 
	
  42. 
		//]]> 
    43. 
	
  43. 
		</script></body> 
    44. 
	
  44. 
		</html> 
    45. 




	[可先修改部分代码再运行查看效果]

	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机