隱私權聲明
本公司關心使用者隱私權與個人資訊,並遵守本公司的網站隱私政策,使用者若有任何問題,可以參考本公司的「網站隱私政策」,或利用電子郵件或連絡電話詢問本公司.
2013
10
08

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

關鍵字:網頁設計網頁設計作品

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

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

你可能有興趣的作品案例
傑立資訊傑立資訊事業有限公司
Powered by AWS Cloud Computing

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.| 網站隱私政策

線上詢價