请老师帮忙看一下代码是否正确？
来源：2-14 编程练习
weixin_慕先生7015352
2020-05-20 09:51:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
img{display:inline-block;}
.con{
width:100%;
height:800px;
text-align:center;
}
.head{background:#7ecef4;width:100%;height:500px;margin:0 auto;}
.foot{background:pink;width:100%;height:300px;margin:0 auto;}
.head img{width:200px;height:300px;padding:50px;margin-top:50px;}
.foot img{width:100px;height:80px;padding:50px;margin-top:40px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="con">
<div class="head">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg"/>
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg"/>
</div>
<div class="foot">
<img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg"/>
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg"/>
<img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"/>
</div>
</div>
</body>
</html>
1回答
-
同学你好，使用同学提供的代码测试，间距是不一样的，如下：
建议：可以给类名为con的元素设置固定的宽度(现阶段可以自己随意设置一个宽度，在实际工作中根据设计图设置宽度即可)，计算间距。以上方两张图片为例：
父级的宽度设置为1200px，图片可以不设置宽高度，使用图片本身的宽高即可，一共三个间隙，那么：margin-left值：1200-(360*2) = 480再除以3 等于160px
高度为500px，图片的高度为215px，一共两个间隙，那么margin-top值：500/215 = 285，再除以2等于142.5px
(img标签自带间隙，建议：可以设置块元素，即可清除间隙)
下方三张图片是同样的思路，同学可以自己写一写。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题