振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
技巧教學 - 妙用“相對”實現網頁設計中圖層位置定位
2010/11/26
技巧教學 - 妙用“相對”實現網頁設計中圖層位置定位

  在網頁製作中,我們常會遇到這樣的問題:圖片解析度一旦變大、視窗最大化之後,圖層就錯位了。而使用功能表插入層的時候,這個層就會與它的上級元素相對定位,一旦移動它,它就會馬上變成絕對定位。這個問題雖小,但在實際應用過程中還是會給網頁設計者帶來一些麻煩。

  其實,造成圖層錯位的核心是母層與子層的問題。只要使母層相對於某點定位,而子層相對於母層定位,就可以達到層的相對定位這個目標了。

  先在頁面內插入表格(可以設居中),滑鼠在某儲存格內點一下,然後通過功能表插入一個層,這個層就相對於這個儲存格定位了。插入一個層之後,不要動它,而且永遠也不要動,但是可以更改它的大小,比如把它的高與寬都改成“0”,讓它不再影響你對其他內容的編輯,否則,這個層的“Left”與“Top”屬性出現之後就成了絕對定位了。如果變成絕對定位,你可以把它的“Left”與“Top”屬性去掉,就恢復成相對定位了。變成“0”之後,有時子層會看不見,可以按“F11”鍵點它恢復編輯。現在游標應該在這個層內閃動,再通過功能表插入子層,這時子層與母層重疊,你可以隨意移動它。

  不管怎麼動,它都是相對於母層定位的。至此問題也就解決了。不過要注意不要動“Left”與“Top”屬性,因為它是相對於母層的左上角定位的。

   技巧:先插入一個表格,在其中一個儲存格中插入母層,可以把它定得小一點,比如說20圖寬、10圖高,這樣它就不會蓋住下面的連結,也不影響子層的相對定位。如果要用778圖寬定義表格,可以把母層插入到表格的第一行第一個儲存格中,這樣就可以在所有層製作完後插入母層了!

 

最後更新 ( 2010/11/26 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇