在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给我...
|