2-7请检查
来源：2-7 编程练习
brown_one
2020-08-10 11:29:08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin:0px;
padding: 0px;
text-align: center;
}
ul{list-style: none;}
a{text-decoration:none;}
.header{
width:100%;
height:100px;
background: black;
margin: 0px auto;
line-height: 100px;
position: fixed;
top: 0px;
}
.banner{
margin-top:50px;
width:100%;
height:1440px;
}
.footer{
width:100%;
height:100px;
background: black;
line-height: 100px;
position: fixed;
bottom: 0px;
}
.logo{
width: 300px;
height: 100px;
float: left;
}
.nav{
height: 100px;
float: right;
}
.waper{
height: 100px;
margin:0 200px;
}
li{
height: 100px;
float: left;
}
li a{
padding:0 50px;
line-height: 100px;
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a>
</div>
<ul class="nav">
<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="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">
<ul class="waper">
<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:如何去除两个banner图之间的空隙？
问题3：为什么banner没有平铺在整个页面中，页面下面有滚动条？
1回答
-
好帮手慕码
2020-08-10
同学你好，解答如下：
1、代码中问题：
（1）顶部、底部导航样式可以优化：
（2）中部图片没有实现宽度自适应：
（3）底部导航没有实现水平居中：
2、这是因为img标签本身的间隙撑开的，建议修改：
3、banner被内部img撑开高度，高度超出一屏，因此出现了滚动条，这是正常的。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题