DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS定位組件CSS 定位方式
CSS定位組件CSS 定位方式
編輯: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給我...
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved