麻烦老师查看代码正确性，谢谢！
来源：2-7 编程练习
MemoryNic
2019-08-06 16:01:07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {margin:0;
padding:0;
color:white;
font: bold 18px "微软雅黑";}
a {text-decoration:none;}
ul {list-style:none;}
.header {width:1100px;
height:100px;
background:black;
margin:0 auto;
position:fixed;}
.logo {width:300px;
float:left;
margin-left:0;}
.logo img {display:block;}
.nav {float:right;
padding-top:30px;}
li {display:inline-block;
margin:5px 30px;}
.container {padding-top:100px;
padding-bottom:100px;}
div img {width:100%;
display:block;
padding:0;
margin:0;}
.footer {width:1100px;
height:100px;
background:black;
margin:0 auto;
text-align:center;
position:fixed;
bottom:0;
line-height:100px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<a href="#"><img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png"/></a>
</div>
<div class="nav">
<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="container">
<div class="pic">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"/>
</div>
<div class="pic">
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"/>
</div>
<div class="pic">
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"/>
</div>
</div>
<div class="footer">
<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>
</div>
</body>
</html>
1回答
-
同学你好， 由于电脑分辨不同，可能在同学的电脑上，头部和尾部是全屏显示的， 但是在其他电脑上打开就不是全屏现实的了， 示例：老师这边测试同学代码
建议修改：可以给顶部和页脚设置百分百宽度，自适应窗口的宽度
其他部分实现的不错，继续加油哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
0
相似问题
回答 1
回答 1
回答 1
回答 1
回答 1