2-7老师帮我看看
来源：2-7 编程练习
Wang8062776
2020-03-15 12:25:58
<!DOCTYPE html>
<html>
<head>
<title>zuoye</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;color: white;
}
.header{
width: 100%;background:black;
height: 80px;
overflow: hidden;
position: fixed;
top: 0;
}
.tu{float: left;
}
.tu img{width: 100%;height: 80px;}
.header ul{float: right;
overflow: hidden;
margin-right: 80px;
}
.header ul li{float: left;
line-height: 80px;
font-size:20px;
margin-left: 50px;
}
.con img{display: block;}
.con{margin:80px 0;}
.footer{background: black;
width: 100%;
height:80px;
position: fixed;
bottom: 0;
overflow: hidden;
}
.footer ul li{
float: left;
line-height: 80px;
padding-left: 15px;
}
.footer ul{width: 474px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="header">
<div class="tu"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
</div>
<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="con">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"/>
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"/>
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"/>
</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>老师，请帮我看看我的代码能实现效果么？另外我想问些问题
这两个地方用padding或者margin为什么显示效果是一样的呀？
写回答
2回答
-
同学你好， 用了display inline-block意思把元素变为行内块元素；是的， 可以设置为行内块元素，就可以实现水平居中。
祝学习愉快~
0 -
好帮手慕码
2020-03-15
同学你好，代码可以优化：
（1）顶部导航的样式可以优化：
（2）中部图片没有实现宽度自适应，建议修改：
（3）底部导航没有全部显示出来，并且没有实现水平居中。建议修改：
（4）padding和margin都是实现边距效果，有时候，它们实现的效果是一致的，所以可以互换使用。
祝学习愉快~
0h020-03-15
相似问题