老师，请检查作业！

来源：2-7 编程练习

好狗边上飘314

2019-09-30 23:52:50

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>网页布局2-4编程练习</title>
	<style type="text/css">
	*{margin:0;
	  padding:0;
	   }
	ul{list-style-type:none;
	    }
	a{
		text-decoration:none;
	}
	.main{
		width:1100px;
		height:auto;
		margin:0 auto;
		position:relative;
	}
	.header{
		width:1100px;
		height:100px;
		background-color:black;
		overflow:hidden;
	    zoom:1; 
	    position:fixed;
		}
	.header .logo{
		width:300px;
		height:100px;
		line-height:100px;
		margin-left:10px;
		float:left;

	}
	.header .nav{
		padding-right:40px;
		float:right;
		overflow:hidden;
	    zoom:1;}
	.header .nav li{
		float:left;
		margin-right:20px;
	}
	.header .nav li a{padding:0 20px;
                      height:100px;
                      line-height:100px;
                      display:block;
                      font-family:"微软雅黑";
                      font-size:16px;
                     color:#fff;
                     font-weight:900;}
    .header .nav li a:hover{
    	            color:#333;
    	             }
    .container{width:1100px;
    	        height:auto;
    	        padding-top:100px;
              padding-bottom:100px;
               }
    .img img{width:100%;
    	 display:block;
         }
            
    .footer{width:1100px;height:100px;background:black;display:block;overflow:hidden;line-height:100px;position:fixed;top:100%;margin-top:-100px;}
    .footer .next li a{float:left;margin:0 40px; font-family:"微软雅黑";
                      font-size:16px;
                     color:#fff;
                     font-weight:900;
                     }
   
    </style>
</head>
<body>
	<div class="main">
		<div class="header">
			<div class="logo">
				<a href="https://www.imooc.com"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="logo" title="慕课网"></a>
			</div>
			<ul class="nav">
				<li><a href="#">课程</a></li>
				<li><a href="#">职业路径</a></li>
				<li><a href="#">实战</a></li>
				<li><a href="#">猿问</a></li>
				<li><a href="#">手记</a></li>
			</ul>
		</div>
		<div class="container">
				<div class="img"><img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"></div>
				<div class="img"><img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"></div>
				<div class="img"><img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"></div>
		</div>	
		<div class="footer">
			<ul class="next">
            <li><a href="#">网址首页</a></li>
            <li><a href="#">企业合作</a></li>
            <li><a href="#">人才招聘</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">常见问题</a></li>
            <li><a href="#">友情链接</a></li>
        </ul>    
		</div>
	</div>
</body>
</html>

老师烦请检查下作业：有两个个疑问！

第一个问题：页脚导航文字部分我无法实现剧中的效果了。。。

第二个问题：当不断缩小浏览器窗口的时候，主页内容和页脚会出现一个空白的断层区域，不知如何解决

第三个问题：感觉自己写的代码太冗长了。。。

写回答

1回答

好帮手慕慕子

2019-10-06

同学你好，

页脚水平居中可以参考如下思路实现
（1）修改li元素的display属性值为inline-block;让其在一排显示
（2）然后给footer设置text-align:center;属性，让内容水平居中显示
因为浏览器缩小的过程中，宽度变小，图片的高度也等比例缩小了，导致无法占满浏览器的高度，而页脚有事固定在窗口底部现实的，所以会出现空白区域。后面我们会学习响应式布局，解决这个问题，目前阶段，我们只需要实现全屏效果就可以了
同学实现的思路是可以的，刚开始练习，我们不用过于追求代码简单，只要实现思路是可以的，我们多写一写代码也可以当做练习了哦