當我們遇到活潑不規則的畫面 (指網頁中的物件上下左右無法對齊)
如 : 世界地圖
可以用 position 來解決問題
不需要擔心複雜的切版
先拿世界地圖來說,每個國家的位置不盡相同
1. 世界地圖當底圖 class 命名為 Map
2. 製作數個國家的 div, class 請命名為國家簡稱 ( 如 : Taiwan =TW)
Html
< div class="Map" >
< div class="TW" >台灣< /div >
< div class="CH" >中國< /div >
< div class="JP" >日本< /div >
< div class="US" >美國< /div >
< div class="DE" >德國< /div >
< div class="CZK" >捷克< /div >
< /div >
CSS
/*== 地圖 ==*/
.Map{
background-image:url(../images/global/map.jpg);
width:680px;
height:380px;
position:relative;
}
/*== 台灣 ==*/
.Map .TW{
position:absolute;
left:263px;
top:217px;
}
/*== 中國 ==*/
.Map .CH{
position:absolute;
left:231px;
top:188px;
}
/*== 日本 ==*/
.Map .JP{
position:absolute;
left:290px;
top:169px;
}
/*== 美國 ==*/
.Map .US{
position:absolute;
left:463px;
top:173px;
}
/*== 德國 ==*/
.Map .DE{
position:absolute;
left:15px;
top:145px;
}
/*== 捷克 ==*/
.Map .CZK{
position:absolute;
left:88px;
top:152px;
}
補充 :
在 Dreamweaver 可以直接拖拉製作好的 div
position:relative; 如同中心點
position:absolute; 如同座標 (0,0)
注意事項 :
1. 需延伸背景的網頁不適用
2. position:relative ,必須有寬度與高度