老师请看下代码还有没有需要完善的地方

来源：2-7 编程练习

ShanaZ

2019-03-20 14:16:27

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}

		.header{
			width: 100%;
			background-color: black;
			height:100px;
			position: fixed;
		}

		.logo{
			float: left;
		}

		.nav{
			float: right;
		}

		.nav li{
			float: left;
			margin-right:20px;
    		padding:0 20px;
			height:100px;
			line-height:100px;
			display:block;
			font-family: '微软雅黑';
			font-size:20px;
		}
		.img{
			display: block;/* 取消图片间隙*/
		 	width: 100%;
		}  

		.footer{
			width: 100%;
			background-color: black;
			height:100px;
			position: fixed;
			bottom: 0px;
		}

		.footer ul{
			text-align: center;
		}
		.footer ul li{
			/*float:left; 不用设置浮动，因为仅一个部分，设置inline-block即可。*/
			padding:0 20px;
			line-height:100px;
			display:inline-block;
			font-family: '微软雅黑';
			font-size:20px;
			
		}
		a{
			text-decoration: none;
    		color:white;
		}
	</style>
</head>
<body>
<div class="header">
	<div class="logo"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></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="body">
	<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" class="img">
	<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" class="img">
	<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" class="img">
</div>
<div class="footer">
	<ul>
		<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>
</body>
</html>

中间三张图片设置为display：block的时候就能取消图片间隙，这是为什么呢

写回答

1回答