代码运行后看不到页脚
来源：2-7 编程练习
慕移动0023355
2019-04-06 15:26:42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
/*头部*/
.banner-image {width:100%;height: 100px;margin:0 auto;background-color:black;position: fixed;overflow:hidden;zoom:1;}
.banner-image ul li{float:left;list-style: none;margin-right:50px;font-size: 16px;}
.bammer-image .img{width: 300px;height: 100px;float:left;line-height: 100px;}
.banner-image ul{line-height: 100px;float: right;margin-right: 100px}
.banner-image a{text-decoration: none;color: white;}
/*主体*/
.container{padding-top: 100px;}
/*页脚*/
.footer {width:100%;height:100px;position:fixed; background-color:black;}
.footer ul {font-size: 16px;list-style: none;line-height: 100px;margin: 0 auto;}
.footer ul li{float:left;margin-right:50px;color:white;}
.footer a{text-decoration: none;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="banner-image">
<a href=""><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a>
<ul>
<li> <a href="#">课程</a></li>
<li> <a href="#">职业路径</li></a>
<li> <a href="#">实战</a></li>
<li> <a href="#">袁问</a></li>
<li> <a href="#">手记</a></li>
</ul>
</div>
<div class="container">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" alt="">
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" alt="">
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" alt="">
</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回答
-
1、导航中第二个li中结束的a标签位置不正确
2、页脚需要设置bottom:0否则设置了position：fixed的元素默认值是top:0，这样页脚就被顶部的header覆盖住了
3、需要设置主体部分的img宽度100%显示，否则大分辨率电脑上图片显示不是全屏的
建议：
希望可以帮到你！
1
相似问题