2013
10
08

CSS排版不得不知的祕訣(範例二)

關鍵字:HTML網頁設計CSS3HTML網頁技術

當我們遇到活潑不規則的畫面 (指網頁中的物件上下左右無法對齊)
如 : 世界地圖

可以用 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 ,必須有寬度與高度

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所