CSS定位组件CSS 定位方式

80酷酷网    80kuku.com

  css在HTML中并无法直接定义要显示的文字或图文件在画面的那个位置... 
只能一顺序来显示... 
但是CSS提供3个新的性质运用.. 
top,left,position... 
left相当于x轴,top相当于y轴,position则是绝对(abslute)或者相对(relative)位置.. 
举个例子: 
<html> 
<head> 
<meta content="text/html; charset=big5" http-equiv=Content-Type> 
<title></title> 
</head> 
<body> 
<div 
<div 
</div> 
</body> 
</html> 
position会以上一个对象来判断,若是相对则会参考上一个对象的位置来显示... 
绝对则是以(0,0)为基准.. 

另外CSS还有一个z-index的性质... 
这个性质就像是z轴一样,可以让网页有立体感,或者说是有层次的感觉.... 
设定值由 -2|1|0|1|2 (没记错的话) 
数值越小表示越底层.... 

用法如下: 

<html> 
<head> 
<meta content="text/html; charset=big5" http-equiv=Content-Type> 
<title></title> 
<style> 
.style5 { color:black; 
font-size=42pt; 
font-style:italic; 
font-family:"bart normal"; 
position:absolute; 
z-index=0; 
top:265; 
left:182; 
width:450; 
height:80; 

.style7 { font-size=11pt; 
font-style:italic; 
color:white; 
font-family:"arial black"; 
position:absolute; 
top:305; 
left:440; 
z-index=2; 
width:280; 
height:60; 

</style> 
</head> 
<body> 
<div class="style5"><b>DHTML ASP</b></div> 
<div class="style7"><span 
</body> 
</html> 

执行例子你可以看见两行文字有上下之分.... 
因为z-index一个设定是0,另一个则是2.... 

对于CSS 定位方式设定大概就是这样... 
这些范例在我的网页都有....有兴趣可以看看... 
如果以上的内容有误或着有问题的话.. 
欢迎你mail给我...

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: