网页教学网
 当前位置: 网页教学网 >> 网页制作 >> CSS技术应用 >> 阅读:CSS定位组件CSS 定位方式
[ HTML ] [ FW ] [ DW ] [ FP ] [ JS ] [ XML ] [ CSS ] [ 图象 ] [ FLASH ] [ .NET ] [ ASP ] [ JSP ] [ PHP ] [ 数据 ] [ 系统 ] [ 安全 ] [ 素材 ] [ 建站 ] [ 主机 ] [ 入门 ] [ 技巧 ]

CSS定位组件CSS 定位方式

http://www.webjx.com  更新日期:2005-02-23 09:53  出处:网页教学网  作者:
在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 style="position:relative;top:250;left:250">显示在(250,250)的位置 
<div style="position:relative;top:50;left:50">显示在(300,300)的位置</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 style="font-size=22pt">  Asp </span>Web Database </div> 
</body> 
</html> 

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

对于CSS 定位方式设定大概就是这样... 
这些范例在我的网页都有....有兴趣可以看看... 
如果以上的内容有误或着有问题的话.. 
欢迎你mail给我...
关键词:
推荐给好友】【关闭】【收藏本文
最新五条评论
查看全部评论
评论总数 0
您的评论
用户名: 新注册) 密 码: 匿名:
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为