目錄
目錄X

div＋css進行頁面布局時定位的思考

　　div＋css進行頁面布局時定位頁面內(nèi)容居中的思考：

一、關于居中布局

　　以div＋css進行頁面布局，最容易的是網(wǎng)頁頁面居左進行布局。如果要使得頁面內(nèi)容居中，尤其是要制作象780等固定頁面大小的樣式，在css中要使用：“margin: 0 auto;”。這個css定義如果寫全了則為是：

margin-top: 0;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;

或

margin-top: 0 auto auto auto;

　　margin: 0 auto;則為上面二個的縮寫，因為CSS對于div對象四邊的外延邊距，按上－右－下－左的順序作用于四邊，如果有相同的設置則可以簡寫，所以簡寫：成“margin: 0 auto;”，意思是頂部邊距為0，其他三個方位自動。

二、使頁面底部背景與頁面內(nèi)容相對齊

　　可以使用二個css定義，一個在外如id="bgallbox"，包含另一個如id="headbox"，如：

〈div id="bgallbox"〉
〈div id="headbox"〉〈/div〉
〈div〉

然后在風格中定義：

#bgallbox { /****定義居中背景****/
background: url(skin/yahu/top_bg.jpg) no-repeat center top;
width: 100%; margin: 0 auto;
text-align: center;
}
#headbox { /****定義頂部背景****/
background: url(skin/yahu/title_bk.jpg) #056CCC no-repeat center top;
width: 760px; height: 162px; text-align: center;
margin: 0 auto; /****定義表格居中****/
}

　　其中css中要注意：二個div中的background中要定義背景圖片X軸對齊方式為“center”。這樣做的好處是：當瀏覽器頁面無論在何時放大縮小，二個div的背景圖片都會自動對齊。如下圖所示：

　　　　
全屏時瀏覽效果為對齊　　　　　　　　　　　　縮小瀏覽界面時的效果也對齊

【打印正文】 發(fā)布時間：2006-09-27 15:12:50 瀏覽次數(shù)： 次 作者：雅虎 來源：本站原創(chuàng)
×

用戶登錄