羽璃〝音織☆

這給自己當個筆記。
一般來說在HTML語言中，你要定義元件位置，

除了RIGHT、CENTER、LIFT外，
用PRE也可以進行定位的效果，
可是這時候你就會發覺。

如果要更加精細的定位？
你想要控制1mm 2mm的位置差呢？

這時候就要用css了。


首先我們先定義css語言

<style type="text/css"> ← 宣告css

.p{
        position:absolute;
        top:80px;
        left:160px;
        z-index:1;}


首先，css的換行是用 ;
也就是除了上述的寫法，也可以寫成：

.p{
        position:absolute; top:80px;  left:160px;   z-index:1;}
然後來解釋一下語法的意義。

.P ←統一宣告（後面會說明）



position是宣告定位類型

absolute: 元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置。

relative: 元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。

fixed: 元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素的位置不會改變。

上述大概三種比較常用稍微介紹一下。

後面的top:80PX 是代表距離上面（頁面的最上層80px）
left:160px 則是距離左邊160px
當然也可以用％來表示。

至於最後面的index1則是說

假設有兩塊圖片（物件）重疊時，那一塊會放在上面？
就是用這個語法來決定。
也就是判定優先權。


然後我們宣告完成後，該怎麼使用呢？


一開始有統一宣告.p對吧？
這就是代表

div class→集體宣告的使用
<div class="p">   </div>  ← 被包在裡面的元件，會顯示在你所宣告的位置也就是距離上方80px 左邊160px



我想大家應該覺得這沒有什麼用吧？
那麼我貼一個使用的實例……
http://nwps8702.myweb.hinet.net/map.htm

這個網頁打開是一張地圖，地圖的五個國家可以分開進行不同的連結，
這也就是切割後用CSS定位拼出來的意義。

當然在java上也可以用頁面判定位置然後進行分置觸發
但是有機會再說了…

 至於後方的點擊過的顏色變話也可以用css來設定讓他看不見。
這也有機會了XD