乌鲁木齐纪毯保险股份有限公司

目錄
目錄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;”。這個(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對于div對象四邊的外延邊距,按上-右-下-左的順序作用于四邊,如果有相同的設(shè)置則可以簡寫,所以簡寫:成“margin: 0 auto;”,意思是頂部邊距為0,其他三個(gè)方位自動(dòng)。

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

  可以使用二個(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軸對齊方式為“center”。這樣做的好處是:當(dāng)瀏覽器頁面無論在何時(shí)放大縮小,二個(gè)div的背景圖片都會(huì)自動(dòng)對齊。如下圖所示:

    
全屏?xí)r瀏覽效果為對齊            縮小瀏覽界面時(shí)的效果也對齊

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

用戶登錄

威远县| 库车县| 阳春市| 土默特左旗| 宜昌市| 和平县| 曲周县| 广河县| 铜梁县| 当阳市| 天气| 连州市| 阿拉善盟| 勐海县| 逊克县| 凯里市| 青河县| 南涧| 衡阳县| 疏附县| 苏尼特左旗| 丰顺县| 凤冈县| 红桥区| 武平县| 北碚区| 林口县| 阳曲县| 威信县| 健康| 兴安县| 林甸县| 洞口县| 二连浩特市| 铜川市| 广丰县| 开远市| 兰考县| 都江堰市| 庆安县| 内黄县|