麻烦老师检查一下
来源：2-7 编程练习
粉墨登场
2020-07-19 22:19:16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慕课CSS布局基础练习1</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: aliceblue;
}
a:hover {
color: #acac;
}
.header {
width: 100%;
height: 100px;
background: black;
position: fixed;
top: 0;
}
.header img {
width: 251px;
height: 84px;
position: absolute;
left: 0;
top: 50%;
margin-top: -42px;
}
.header>ul {
list-style: none;
float: right;
margin-right: 50px;
}
.header>ul>li {
height: 100px;
line-height: 100px;
margin: 0 30px;
float: left;
}
.body {
width: 100%;
height: auto;
margin-top: 100px;
overflow: hidden;
}
.body>img {
display: block;
}
.footer {
width: 100%;
height: 100px;
background: black;
position: fixed;
bottom: 0;
}
.footer>ul {
list-style: none;
position: absolute;
left: 50%;
margin-left: -372px;
}
.footer>ul>li {
height: 100px;
line-height: 100px;
margin: 0 30px;
float: left;
}
</style>
</head>
<body>
<div class="header">
<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt=""></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">
<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.页脚里的导航栏，除了使用定位能够居中，还有什么其他方法能够居中吗？ 2. 请老师看看还有没有其他什么地方可以改进的。
写回答
2回答
-
粉墨登场
提问者
2020-07-20
好的 谢谢老师
0 -
好帮手慕糖
2020-07-20
同学你好，老师按照页面从上到下的步骤，以此回答同学的问题，以及代码中的其他可以优化的问题哦，如下：
1、顶部logo图片，不需要设置定位，设置左浮，然后设置上外边距即可；上外边距的大小，可以用顶部的高度减去图片的高度，然后除以2，这样图片上下剩余的空隙就一样了。
2、主体部分的图片，没有实现宽度100%，建议：可以添加宽度100%属性，例：
3、因为页脚部分设置固定定位，脱离文档流，导致与主体部分有重合，建议：可以给主体部分设置下外边距，且可以与上外边距统一设置，例：
4、页脚部分的导航栏可以不设置定位，给li设置为行内块，然后给ul设置内容居中即可，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题