请问为什么页脚没有居中

来源：2-7 编程练习

慕少7337496

2019-09-21 17:39:54

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body {
			background: black;
			color: white;
			font-family: "黑体";
			font-size: 20px;
		}
		.header {
			background: black;
			width: 100%;
			height: 100px;
			margin: 0 auto;
			position: fixed;
		}
		.logo {
			height: 100px;
			position: absolute;
			left: 0;
			cursor:pointer;
		} 
		.navibar {
			position: absolute;
			right: 0;
			margin-right: 14px;
		}
		.navibar ul {
			list-style: none;
		}
		.navibar ul li {
			line-height: 100px;
			margin: 0 20px;
			display: inline-block;
			cursor: pointer;
		}
		.banner {
			padding-top: 100px;
			padding-bottom: 100px;
		}
		.banner img {
			width: 100%;
			display: block;
		}
		.footer {
			width: 100%;
			height: 100px;
			background: black;
			position: fixed;
			bottom: 0;
			margin: 0 auto;
		}
		.footer li {
			list-style: none;
			display: inline-block;
			line-height: 100px;
			margin: 0 30px;
		}
		a {
			text-decoration: none;
			color: white;
		}
	</style>
</head>
<body>
	<div class="header"><!--This is header-->
		<div><!--this is logo-->
			<img class="logo" src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="logo">
		</div>
		<div class="navibar"><!--this is navibar-->
			<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>
			</ul>
		</div>
	</div>
	<div class="banner"> <!--this is banner-->
		<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" alt="banner1">
		<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" alt="banner1">
		<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" alt="banner1">
	</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>

写回答

1回答