老师，请检查下哪不对，有哪需要改行的
来源：2-7 编程练习
qq_久坠深海_0
2020-03-15 16:03:28
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<style type="text/css">
*{padding:0;margin:0;}
.header{width:100%;height:100px;background-color:black;position:fixed;top:0;overflow:hidden;font-size:20px;}
.lago img{float:left;}
li{list-style:none;display:inline-block;;color:white;padding-right:50px;}
a{color:white;text-decoration:none;}
.nav{float:right;line-height:100px;}
.banner img{width:100%;display:block;background-repeat:no-repeat;}
.footer{width:100%;height:100px;background-color:black;position:fixed;font-size:20px;bottom:0;text-align:center; }
.footer li{line-height:50px;margin:0 30px;}
</style>
</head>
<body>
<div class="header">
<div class="lago">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" />
<div class="nav">
<ul>
<li><a href="#" target="blank">课程</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>
<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>
<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，头部的导航栏文字好像不太对？
1回答
-
好帮手慕慕子
2020-03-15
同学你好，对于你的问题解答如下：
因为图片设置的百分百是适应窗口宽度的，窗口宽度没有发生改变，只是缩小页面，所以图片的大小不会改变。后面我们会学习响应式布局，目前阶段我们只需要实现全屏效果即可，不需要考虑屏幕放大缩小的情况。
老师这边测试同学的代码，导航栏的文字效果是对的。
代码中存在的问题如下图所示，页脚内容没有垂直居中显示，且由于给li设置右内填充，导致最后一列多出空白，整体内容水平居中存在误差。
建议：去掉页脚li的padding-right值，调整行高与footer高度一致。如下：
其他部分实现的很棒，继续加油！
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题