2010年7月30日 星期五

網頁排版_置中排版

常常在製作系統首頁的時候,我們會希望整個歡迎頁面可以水平且垂直都置中,這時候可以設定body內的Style來完成。

語法:style ="position:absolute; top:50%; left :50%; margin-left:X偏移量px; margin-top :Y偏移量px;"

整個的重點就是設定位為absolute,將其上起點跟左起點都設為50%,最後給上偏移量,就可以讓你想要置中的網頁置中了。

範例:如果我們有一個歡迎頁面做完以後為326*276。那麼我們就可以利用下面的語法將這一個頁面固定於網頁中間。(X偏移量為-163,Y偏移量為-138,也就是所要置中頁面的總長寬的一半。)

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>版面置中說明</title>
</head>

<body background="Images/BackG/slant_bg.jpg" style ="position:absolute; top:50%; left :50%; margin-left: -163px; margin-top :-138px;">
<form id="form1" runat="server">
<div>
<img alt="" src="Images/ImageTest/wow_Wellcome.jpg" style="width: 326px; height: 276px" />
</div>
</form>
</body>
</html>


註:上圖的女法師為魔獸桌面的小截圖。好帥呀!

沒有留言:

張貼留言