网页制作如何居中，让布局自动适应不同显示屏

 我来答

1个回答

#热议# 什么是淋病？哪些行为会感染淋病？

世秀梅眭姬
2020-02-06 · TA获得超过3.7万个赞

知道大有可为答主

回答量：1.2万

采纳率：25%

帮助的人：978万

我也去答题访问个人页

关注

展开全部

首先先，这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来分析代码：
完整代码<html>
<head>
<style
type="text/css">
body{
background:#999;
text-align:center;
color:
#333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right:
auto;
margin-left:
auto;
padding:
0px;
background:
#EEE;
height:60px;
text-align:left;
}
#contain{
margin-right:
auto;
margin-left:
auto;
width:
776px;
}
#mainbg{
width:776px;
padding:
0px;
background:
#60A179;
float:
left;
}
#right{
float:
right;
margin:
2px
0px
2px
0px;
padding:0px;
width:
574px;
background:
#ccd2de;
text-align:left;
}
#left{
float:
left;
margin:
2px
2px
0px
0px;
padding:
0px;
background:
#F2F3F7;
width:
200px;
text-align:left;
}
#footer{
clear:both;
width:776px;
margin-right:
auto;
margin-left:
auto;
padding:
0px;
background:
#EEE;
height:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<body>
<div
id="header">header</div>
<div
id="contain">
<div
id="mainbg">
<div
id="right">
<div
class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
</div>
<div
id="left">
<div
class="text">left</div>
</div>
</div>
</div>
<div
id="footer">footer</div>
</body>
</html>
代码分析
首先我们定义body和顶部第一行#header，这里面的关键是body中的text-align:center;和header中的margin-right:
auto;margin-left:
auto;，通过这两句使得header居中。注：其实定义text-align:center;就已经在IE中实现居中，但在mozilla中无效，需要设置margin:auto;才可以实现mozilla中的居中。
接下来定义中间的两列#right和#left。为了使中间两列也居中，我们在它们外面嵌套一个层#contain，并对contain设置margin:auto;，这样#right和#left就自然居中了。
注意中间两列定义的顺序，我们首先定义#right，通过float:
right;

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

网页制作如何居中，让布局自动适应不同显示屏

为你推荐：