为什么我用DIV做网页模版在本地能够居中在服务器上不能居中啊？
发布网友
发布时间：2022-04-20 19:15
共3个回答
热心网友
时间：2022-04-20 20:44
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>层示例</title>
<style type="text/css">
#001 {
position:absolute;
width:500px;
height:500px;
left:400px;
top:400px;
z-index:1;
background:#FF0000;
}
#002 {
position:absolute;
width:500px;
height:500px;
left:450px;
top:450px;
z-index:2;
background:#00FF00;
}
</style>
</head>
<body>
<div id="001"></div>
<div id="002"></div>
</body>
</html>
---------------------------------------------------------
把上面的代码保存成拓展名为.html的页面文件，先看一下效果。
注意这里的DIV使用了position:absolute;属性，它可以让DIV(层)绝对定位,这时候用Left、Right、Top...设置它上下左右与网页边框的距离。
如果你想让层在页面居中，则最好不好在工具栏拖动一个层到网页里，写一个<DIV></DIV>标签到源代码即可，使用层的过程中你不要拖动层，否则它将自动添加代码，成绝对定位的层，绝对定位的层将不再受Boby的居中属性控制！
当然，上面的代码，还可以挽救回来：
1.去掉style里面的 position:absolute;属性
2.在BODY标签后面加一个<center>标签再次看看效果，哎呀妈呀，太神奇了，那就是你想要的效果了。
附： z-index:1;属性设置绝对定位层的叠放次序(也就是那个层在上面、哪个层在下面)
居中层的完全代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>层示例</title>
<style type="text/css">
#001 {
width:500px;
height:500px;
left:400px;
top:400px;
z-index:1;
background:#FF0000;
}
#002 {
width:500px;
height:500px;
left:450px;
top:450px;
z-index:2;
background:#00FF00;
}
</style>
</head>
<body><center>
<div id="001"></div>
<div id="002"></div>
</center>
</body>
</html>
要做比较哦，做成两个页面比较效果更好！
参考资料：网页基础 暂无参考
热心网友
时间：2022-04-20 22:02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
热心网友
时间：2022-04-20 23:37
