97成人午夜福利在线观看_超碰福利亚洲_国产午夜福利影音资源网站_扒开两腿做爽爽视频_亚洲国产成人麻豆精品_日韩欧美亚洲_天天靠逼泡妞视频_国产成人久久AV高清_欧美a√在线免费观看_精品毛片网站在线观看

目錄
目錄X

div+css進(jìn)行頁(yè)面布局時(shí)定位的思考

  div+css進(jìn)行頁(yè)面布局時(shí)定位頁(yè)面內(nèi)容居中的思考:

一、關(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ì)齊

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

用戶登錄