蓝派网(www.lan27.com)-精选网络资源,分享和交流! 文章首页站内搜索在线手册广告代码酷站欣赏万年历
您现在的位置: 蓝派网 >> 文章中心 >> 网页制作 >> HTML-CSS >> 正文

用CSS创建不同分辩率下居中的页面

作者:佚名    文章来源:网络    更新时间:2008-10-28 15:52:55

用CSS创建居中页面(在800×600页面效果是满屏,1024×768效果是居中)
首先,定义body的样式如下:
body{
background-color:black;
margin:0px
}
为看到明显效果,定义背景色为黑色。页面外补丁为0px,防止产生水平滚动条。
然后定义一个container标签如下:
#container {
width:760px;
margin-left:auto;
margin-right:auto;
background-color:white;
height:800px
}
定义宽度为760px,最关键的地方是margin-left:auto;magin-right:auto;
设置左右的外补丁为自动适应,使container居中的关键。

html页面如下:

html页面中,如果在IE浏览器中须加上


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html XMLns="http://www.w3.org/1999/xhtml" >

才可以居中,或者在body中定义text-align:center属性,而在firefox中,则无需定义doctype或text-align也可以居中^_^。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html XMLns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<head>
<link rel="stylesheet" href="index1.css" type="text/css" />
<title>公司简介</title>
</head>
<body>
<div id="container">
   <div id="header"></div>
   <div id="mainbox">
       <div id="menu"></div>
       <div id="sidebar"></div>
       <div id="content"></div>
   </div>
   <div id="footer"></div>
</div>
</body>
</html>


发表评论】【打印此文】【关闭窗口】【点击数:
★好玩的休闲小游戏★