.footer那里加了position：fixed，页脚就显示不全了。
来源：2-7 编程练习
lily1109
2019-10-17 21:33:04
页脚的li设置display：inline-block在这里是什么作用？
还有一个问题：页脚设置了宽度100%，为什么实际显示的宽度和上面的不一致？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {
padding:0;
margin:0;
}
li {
list-style:none;
}
a {
text-decoration:none;
color:white;
}
.container {
width:100%;
height:100px;
background:black;
position:fixed;
overflow:hidden;
}
.container a img {
float:left;
}
.container ul {
float:right;
}
.container ul li {
float:left;
margin-right:40px;
display:block;
line-height:100px;
font-size:20px;
color:white;
}
.body {
width:100%;
}
.body .img1 {
padding-top:100px;
}
.footer {
width:100%;
height:100px;
background:black;
}
.footer ul {
text-align:center;
}
.footer ul li{
color:white;
display:inline-block;
margin:0 20px;
line-height:100px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
<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 class="body">
<div class="img1">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg">
</div>
<div class="img2">
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg">
</div>
<div class="img3">
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg">
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>写回答
1回答
-
同学你好，
1、在给页脚设置完fixed以后，需要搭配定位来实现的，我们可以给其一个bottom：0：
2、将li设置为display：inline-block是因为li是块级元素，默认独占一行，为了让所有的li排成一行我们就可以将其设置为行内块，这样就会自动排成一行了，同学也可以利用浮动来实现这个效果。
3、页脚设置了宽度100%，为什么实际显示的宽度和上面的不一致，是指页脚跟图片宽度不一致吗？如果是的话，是因为你的图片没有设置占据全屏哦，我们以第一张图为例：
其余的同学可以自行补充哦。
4、建议给头部设置top：0，固定在网页顶部，再给头部设置较高的层级，防止被别的区域覆盖：
5、由于给底部设置了固定定位不占位置，导致图片下移，底部遮盖住了图片：
建议给最后一张图片一个底部间距：
希望我的回答能够帮助到你，望采纳，祝学习愉快！
0
相似问题