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

实例解析CSS中display属性使用

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

你对CSS中display属性的用法是否了解，这里和大家分享一下CSS中display属性的使用，display是CSS重要的一个属性，主要设置元素的浮动和显示的特征，相信本文介绍一定会让你有所收获。

实例解析CSS中display属性使用

display属性:

display是CSS重要的一个属性,主要设置元素的浮动和显示的特征，有以下几个参数：
广州网站建设,网站建设,广州网页设计,广州网站设计

◆block:

当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。

◆inline:

将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。

◆none:

最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

您可以测试一下代码查看display的效果：



    
	
  1. 
		<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
    2. 
	
  2. 
		 
    3. 
	
  3. 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4. 
	
  4. 
		<html> 
    5. 
	
  5. 
		<!--www.Csscss.orgCSS在线--> 
    6. 
	
  6. 
		<head> 
    7. 
	
  7. 
		<scriptlanguagescriptlanguage="javascript"> 
    8. 
	
  8. 
		functiontoggleDisplay(me){  
    9. 
	
  9. 
		if(me.style.display=="block"){  
    10. 
	
  10. 
		me.style.display="inline";  
    11. 
	
  11. 
		alert("文本现在是：'inline'.");  
    12. 
	
  12. 
		}  
    13. 
	
  13. 
		else{  
    14. 
	
  14. 
		if(me.style.display=="inline"){  
    15. 
	
  15. 
		me.style.display="none";  
    16. 
	
  16. 
		alert("文本现在是:'none'.3秒钟后自动重新显示。");  
    17. 
	
  17. 
		window.setTimeout("blueText.style.display='block';",3000,"javascript");  
    18. 
	
  18. 
		}  
    19. 
	
  19. 
		else{  
    20. 
	
  20. 
		me.style.display="block";  
    21. 
	
  21. 
		alert("文本现在是:'block'.");  
    22. 
	
  22. 
		}  
    23. 
	
  23. 
		}  
    24. 
	
  24. 
		}  
    25. 
	
  25. 
		</script> 
    26. 
	
  26. 
		</head> 
    27. 
	
  27. 
		<body> 
    28. 
	
  28. 
		<div>在<spanidspanid="blueText"
    29. 
	
  29. 
		onclick_fckprotectedatt="%20onclick%3D%22toggleDisplay(this)%22"  
    30. 
	
  30. 
		style="color:blue;position:relative;cursor:hand;">
    31. 
	
  31. 
		蓝色</span>文字上点击来查看效果.</div> 
    32. 
	
  32. 
		<br/><br/> 
    33. 
	
  33. 
		<ahrefahref=http://www.CssCss.org
    34. 
	
  34. 
		_fcksavedurl="http://www.CssCss.org"  
    35. 
	
  35. 
		_fcksavedurl="http://www.CssCss.org" 
    36. 
	
  36. 
		_fcksavedurl="http://www.CssCss.org"target="_blank">Css在线</a> 
    37. 
	
  37. 
		</body> 
    38. 
	
  38. 
		</html> 
    39. 
	
  39. 
		 
    40. 




	本文来自CSS在线：http://www.csscss.org/cssarticle/20095921.shtml


			

			

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

		
		
			  
	  
 
	

	 
	

	





	
	



飞机