请问老师，头部和页脚都会把图片遮住一点是什么原因啊？
来源：2-7 编程练习
慕粉1041387347
2019-03-31 14:48:02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin: 0;
padding: 0;
}
a{
width: 160px;
color: #fff;
font-family: "微软雅黑";
font-size: 18px;
text-decoration: none;
cursor: pointer;
}
a:active{
color: red;
font-size: 22px;
}
ul{
list-style: none;
}
.page{
width: 100%;
height: 100px;
background: black;
color: #fff;
position: fixed;
/*overflow: hidden;
zoom: 1;*/
}
.nav-logo{
width: 250px;
height: 100px;
background: url(http://climg.mukewang.com/58c0d2d900016ce303000100.png) center top no-repeat;
float: left;
margin-left: 150px;
}
.nav-li{
height:100px;
line-height:100PX;
float:right;
margin-right: 300px;
}
.nav-li li{
display:inline-block;
margin-right:40px;
}
.container-1{
width: 100%;
height: 500px;
background: url(http://climg.mukewang.com/58c0eda50001e12416000480.jpg) center top no-repeat;
background-size: cover ;
/*margin-top: 100px;*/
}
.container-2{
height: 500px;
background: url(http://climg.mukewang.com/58c0edb80001c9f216000480.jpg) center top no-repeat;
background-size: cover ;
}
.container-3{
height: 500px;
background: url(http://climg.mukewang.com/58c0edc9000100d516000480.jpg) center top no-repeat;
background-size: cover ;
}
.footer{
width: 100%;
height: 100px;
background: black;
color: #fff;
position: sticky;
bottom: 0;
}
.footer-li{
height:100px;
line-height:100PX;
text-align: center;
}
.footer-li li{
display:inline-block;
margin-right: 20px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="page">
<div ><a class="nav-logo"></a></div>
<ul class="nav-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 class="container">
<div class="container-1"></div>
<div class="container-2"></div>
<div class="container-3"></div>
</div>
<div class="footer">
<ul class="footer-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>
<li ><a href="#">友情链接</a></li>
</ul>
</div>
</body>
</html>
1回答
-
你好同学 ，因为头部和尾部都使用定位 ，脱离文档流了，不占据文档流的位置 。脱离文档流你可以理解为悬浮在正常文档流上面 ，所以会把中间的图片盖住 。就像同学注释的代码中 ，设置一个间距即可
不过尾部使用的粘性定位sticky， 当页面固定到底部的时候 ，footer就回到了最底部 ，这个时候就不会挡住图片 ，所以就不需要给图片设置下间距了哦。
祝学习愉快 ，望采纳。
0
相似问题