2-7 烦请老师检查，谢谢
来源：2-7 编程练习
Miki未希
2020-05-25 09:33:07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0}
.containter{width:100%;
min-width:800px;
height:100px;
background:black;
position:fixed;
top:0;
}
div .logo{float:left;}
div .nav{list-style:none;
float:right;
line-height:100px;
text-align:center;}
.banner{margin-top:100px;}
a{text-decoration:none;
color:white;}
div .nav li,div .bottom li{display:inline-block;
font-size:20px;
font-family:"微软雅黑";
margin-right:30px;
}
.bottom{background:black;
width:100%;
height:100px;}
div .bottom{list-style:none;
color:white;
line-height:100px;
text-align:center;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div>
<div class="containter">
<a href="#"><img class="logo" src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a>
<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="bottom">
<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回答
-
同学你好，代码的问题和修改如下：
1.图片作为行内元素，会有默认间隙。
把行内元素转换为块元素即可清除：
2.图片默认显示原图大小，当电脑分辨率太大时，宽度不能平铺浏览器了。
为图片设置宽度100%。
3.尾部没有设置固定定位，如下设置
另外，中间区域也要设置下间距，避免被尾部挡住：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题