请老师检查作业
来源：2-14 编程练习
BT103
2019-09-11 01:54:27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0px;padding:0px;}
.top{width:100%;height:500px;background: rgb(136, 206, 218);position: relative;}
/* top-setting */
.top .left{float:left;width:720px;position: absolute;top:0;bottom:0;left:14%;margin:auto 0;}
/* top-left-setting */
.top .right{float:right;width:720px;position: absolute;top:0;bottom:0;right:14%;margin:auto 0;}
/* top-right-setting */
.footer{width:100%;height:200px;background: rgb(245, 161, 161);position: relative;}
/* footer-setting */
.footer .left{float:left;width:400px;
position: absolute;top:0;bottom:0;margin: auto 0;left:14%;}
/* footer-left-setting */
.footer .middle{float:left;width:400px;
position: absolute;top:0;bottom:0;left:0;right:0;margin: auto;}
/* footer-middle-setting */
.footer .right{float:left;width:400px;
position: absolute;top:0;bottom:0;margin: auto 0;right:14%;}
/* footer-right-setting */
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="top">
<img class="left" src="http://climg.mukewang.com/58c0f808000129a303600215.jpg">
<img class="right" src="http://climg.mukewang.com/58c0f819000198a703600214.jpg">
</div>
<div class="footer">
<img class="left" src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg">
<img class="middle" src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg">
<img class="right" src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg">
</div>
</body>
</html>写回答
1回答
-
好帮手慕星星
2019-09-11
同学你好，
这边测试效果如下：
代码中设置的定位为百分比，而图片的宽度是固定的。由于每个显示器的分辨率不同，宽度也会不同，所以建议将外层盒子设置固定宽度。以第一行为例：
容器高度宽度为1200px，每个图片默认宽度为360px，那么每个间隙就是（1200-360*2）/3=160px;容器高度为315px，图片高度为215px，所以设置上下间距为50px即可。
第二行可以参考上面的例子进行修改。
祝学习愉快！
0
