请老师帮忙检查，谢谢！
来源：2-7 编程练习
ChildMu
2020-01-03 11:54:28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>buju</title>
<style type="text/css">
*{margin:0;
padding:0;
text-decoration: none;
}
.con{width:100%;
height:100px;
background-color: black;
position: fixed;
overflow: hidden;
zoom:1;}
.logo{float: left;}
.bar1{float:right;}
.bar1 ul li{display:inline-block;
color: white;
list-style: none;
font-size: 20px;
margin-right: 100px;
line-height: 100px;}
a:link{color: white;}
.banner{width: 100%;
padding-top: 100px;}
.footer{width: 100%;
height: 100px;
background-color: black;
position: fixed;
bottom: 0;}
.bar2 ul li{display:inline-block;
color: white;
list-style: none;
font-size: 20px;
line-height: 100px;
margin: auto 5%;}
img{display: block;}
</style>
</head>
<body>
<div class="con">
<div class="logo"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a></div>
<div class="bar1">
<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>
<div class="banner">
<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">
<div class="bar2">
<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></div>
<!-- 此处写代码 -->
</body>
</html>写回答
1回答
-
同学你好，代码布局是不错的。还有点小问题：
中间图片在水平方向上没有铺满
由于每个显示器的分辨率不同，宽度也会不同，所以建议设置图片宽度为100%
别忘记下间距也要添加100px，否则底部就被遮盖一部分
2、底部导航项没有居中显示：
每项设置的间距太大了，可以设置小一些，父容器中设置文本居中就可以实现居中显示。参考：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题