2-6编程练习
来源：2-7 编程练习
qq_那个没抢到座位的孩子
2017-11-26 21:46:45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{padding:0;margin:0;color:#ffffff;}
.header{width:100%;height:100px;font-size:20px;font-weight:bold;background:black;position:fixed;}
.img{float:left;}
.top{float:right;line-height:100px;word-spacing:30px;padding-right:20px;}
.body{width:100%;height:1100px;}
.img2{margin-top:50px;}
.img3{margin-bottom:50px;}
.footer{width:100%;height:100px;background:black;position:fixed;bottom:0;font-size:16px;word-spacing:20px;text-align:center;line-height:100px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" class="img"/>
<span class="top">课程 职业路径 实战 猿问 手记</span>
</div>
<div class="body">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" class="img2"/>
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"/>
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" class="img3"/>
</div>
<div class="footer">
<span>网站首页 企业合作 人才招聘 联系我们 常见问题 友情链接</span>
</div>
</body>
</html>写回答
1回答
-
1、
.img2{margin-top:50px;}.img3{margin-bottom:50px;}
这两个都是要改成100px，因为头部和底部的高度都是100px，你只给填充了50还是有50px是被遮住的。
2、大图片要设置100%显示，添加一下：.body img{width: 100%;}
祝学习愉快！
0
相似问题