div+css進(jìn)行頁(yè)面布局時(shí)定位的思考
一、關(guān)于居中布局
以div+css進(jìn)行頁(yè)面布局,最容易的是網(wǎng)頁(yè)頁(yè)面居左進(jìn)行布局。如果要使得頁(yè)面內(nèi)容居中,尤其是要制作象780等固定頁(yè)面大小的樣式,在css中要使用:“margin: 0 auto;”。這個(gè)css定義如果寫全了則為是:
margin-top: 0; margin-right: auto; margin-bottom: auto; margin-left: auto; |
或
margin-top: 0 auto auto auto; |
margin: 0 auto;則為上面二個(gè)的縮寫,因?yàn)镃SS對(duì)于div對(duì)象四邊的外延邊距,按上-右-下-左的順序作用于四邊,如果有相同的設(shè)置則可以簡(jiǎn)寫,所以簡(jiǎn)寫:成“margin: 0 auto;”,意思是頂部邊距為0,其他三個(gè)方位自動(dòng)。
二、使頁(yè)面底部背景與頁(yè)面內(nèi)容相對(duì)齊
可以使用二個(gè)css定義,一個(gè)在外如id="bgallbox",包含另一個(gè)如id="headbox",如:
〈div id="bgallbox"〉 〈div id="headbox"〉〈/div〉 〈div〉 |
然后在風(fēng)格中定義:
#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中要注意:二個(gè)div中的background中要定義背景圖片X軸對(duì)齊方式為“center”。這樣做的好處是:當(dāng)瀏覽器頁(yè)面無(wú)論在何時(shí)放大縮小,二個(gè)div的背景圖片都會(huì)自動(dòng)對(duì)齊。如下圖所示:
全屏?xí)r瀏覽效果為對(duì)齊 縮小瀏覽界面時(shí)的效果也對(duì)齊
用戶登錄
還沒(méi)有賬號(hào)?
立即注冊(cè)