2-6编程问题

来源：2-7 编程练习

慕瓜9263510

2017-11-15 21:29:31

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    *{margin:0;padding:0;text-align:center;}
    .nav{
        width:100%;
		max-width:1600px;
        height:100px;
        background:black;
        color:white;
		position:fixed;
		top:0;
		left:50%;
		margin-left:-800px;
    }
	.nav-logo{float:left;}
    .nav-right{
        line-height:100px;
		float:right;
    }
	.banner1,.banner2,.banner3{
		width:100%;
		max-width:1600px;
		margin:0 auto;
		height:auto;
	}
    .banner1{
		margin-top:100px;}
	.banner3{
		margin-bottom:40px;}
    .nav span,.footer span{
        margin:0 40px;
		cursor:pointer;
    }
	.footer{
		width:100%;
		max-width:1600px;
		margin:0 auto;
        height:40px;
		line-height:40px;
        background:black;
        color:white;
		position:fixed;
		bottom:0;
		left:50%;
		margin-left:-800px;}
  </style>
</head>
<body>
<div class="nav">
     <div class="nav-logo"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" /></a></div>
     <div class="nav-right">
         <span>课程</span>
         <span>职业路径</span>
         <span>实战</span>
         <span>猿问</span>
         <span>手记</span>
     </div>
</div>
<div class="banner1"><img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" /></div>
<div class="banner2"><img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" /></div>
<div class="banner3"><img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" /></div>
<div class="footer">
     <span>网站首页</span>
     <span>企业合作</span>
     <span>人才招聘</span>
     <span>联系我们</span>
     <span>常见问题</span>
     <span>友情链接</span>
</div>
</body>
</html>

请问老师我这个导航和页脚用left:50%;margin-left:-800px; 当页面的宽度小于我设置的1600的时候它就不自动相对的居中了，然而我用margin:0 auto；当页面大于1600的时候没有一点的作用还是靠最左边。请问老师有什么解决的办法

写回答

4回答

怎么都被占用了呢

2017-11-16

已采纳

我们作业要求的效果是铺满网页，不要设置定宽哦

随着页面宽度缩小，布局相应变化，这涉及到响应式的知识，在后面的进阶课程中会有讲解，如果有兴趣，欢迎来学习。当然学好当前的基础知识还是很要紧的，这样学会面的进阶就会轻松些，加油吧~~

叼牌大师兄

2017-11-16

    .nav{
        /* width: 100%; */
        max-width: 1600px;
        height: 100px;
        background: black;
        color: white;
        /* position: fixed; */
        /* top: 0; */
        /* left: 50%; */
        margin: 0 auto;
    }