html页面放大时不能铺满整个页面问题
下面是代码：1：要求页面居中缩放2：要求页面缩放过程中始终保持原有比例缩放3：要求页面缩放过程中始终铺满整个整个屏幕宽度，不会出现原本设置了背景颜色的，但由于缩放，造成超...
下面是代码：
1：要求页面居中缩放
2：要求页面缩放过程中始终保持原有比例缩放
3：要求页面缩放过程中始终铺满整个整个屏幕宽度，不会出现原本设置了背景颜色的，但由于缩放，造成超出宽度的区域显示空白
4：一定要注释出错在哪里，并给出修改后的代码，代码好理解，有劳了，谢谢！
<!DOCTYPE html>
<html>
<style type="text/css">
html{text-align:center;}
body{margin:auto;font-size:14px;text-align:center;}
div.one{width:100%;height:129px;background-color:lavender;}
div.content{width:1200px;height:129px;border:1px solid red;margin:auto;}
ul{list-style-type:none;}
ul li{float:left;}
</style>
<body>
<div class="one">
<div class="content">
<ul>
<li><a class="one">首页</a></li>
<li><a class="two">专辑</a></li>
<li><a class="three">排行榜</a></li>
<li><a class="four">加入VIP</a></li>
</ul>
</div>
</div>
</body>
</html> 展开
1：要求页面居中缩放
2：要求页面缩放过程中始终保持原有比例缩放
3：要求页面缩放过程中始终铺满整个整个屏幕宽度，不会出现原本设置了背景颜色的，但由于缩放，造成超出宽度的区域显示空白
4：一定要注释出错在哪里，并给出修改后的代码，代码好理解，有劳了，谢谢！
<!DOCTYPE html>
<html>
<style type="text/css">
html{text-align:center;}
body{margin:auto;font-size:14px;text-align:center;}
div.one{width:100%;height:129px;background-color:lavender;}
div.content{width:1200px;height:129px;border:1px solid red;margin:auto;}
ul{list-style-type:none;}
ul li{float:left;}
</style>
<body>
<div class="one">
<div class="content">
<ul>
<li><a class="one">首页</a></li>
<li><a class="two">专辑</a></li>
<li><a class="three">排行榜</a></li>
<li><a class="four">加入VIP</a></li>
</ul>
</div>
</div>
</body>
</html> 展开
- 你的回答被采纳后将获得：
- 系统奖励15（财富值+成长值）+难题奖励20（财富值+成长值）
1个回答
展开全部
HTML:
<div class="nav">
<div class="nav_con">
<ul>
<li>首页</li>
<li>我的主页</li>
<li>他的主页</li>
<li>你的主页</li>
</ul>
</div>
</div>
CSS:
ul{ list-style:none; padding:0; margin:0}
body{ padding:0; border:0; margin:0}
.nav{ width:100%; height:50px; background:#F00}
.nav_con{ width:1200px; height:50px; margin:auto}
.nav_con ul li{ float:left; padding:0 15px; text-align:center; height:50px; line-height:50px; color:#FFF; background:#960; margin-right:1px}
<div class="nav">
<div class="nav_con">
<ul>
<li>首页</li>
<li>我的主页</li>
<li>他的主页</li>
<li>你的主页</li>
</ul>
</div>
</div>
CSS:
ul{ list-style:none; padding:0; margin:0}
body{ padding:0; border:0; margin:0}
.nav{ width:100%; height:50px; background:#F00}
.nav_con{ width:1200px; height:50px; margin:auto}
.nav_con ul li{ float:left; padding:0 15px; text-align:center; height:50px; line-height:50px; color:#FFF; background:#960; margin-right:1px}
追问
将你的这个代码，放到网页上测试了下，当页面放大到135%时右侧开始出现空白区域，继续放大，空白区域越大，我的浏览器是360安全浏览器，和我的代码存在相同问题啊！有没有解决办法？
追答
大哥，因为你规定了你中间div的宽度为1200啊，当你的浏览器宽度放大超过1200px的时候，外围的div显示还是当前宽度的100%，而里面固定宽的就不是了，它是根据浏览器放大而放大的，当超过1200的时候，它占据的宽度就会超过浏览器，所以你才会看到有空白，除非你给里面div设置为百分比就行了，比如60%，你再放大就会没有空白了
刚给你测试了下，如果你继续相这样的话，那就给外围div和里面的div加一个相同的背景，这样放大后里面超出部分就会覆盖外围的了，然后看起来就没有问题了，不过谁会去放大显示着来看啊
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
