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