CSS定位組件CSS 定位方式
來源:互聯網
上載者:User
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 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給我...