请老师帮忙检查下代码~谢谢!
来源:2-14 编程练习
Nyakoonya
2020-08-24 17:41:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
body{
margin: 0;
padding: 0;
background-color: #9be3ff;
}
.top{
width: 100%;
height: 500px;
background-color: #9be3ff;
margin: 0 auto;
text-align: center;
}
.left{
height: 215px;
float: left;
padding: 142.5px 133.2px;
margin-left: 133.2px;
}
.right{
height: 215px;
float: right;
padding: 142.5px 133.2px;
margin-right: 133.2px;
}
.bot{
width: 100%;
height: 250px;
background-color: #ffc0cb;
text-align: center;
margin: 0 auto;
}
.img1{
height: 60px;
float: left;
padding: 95px 114.9px;
margin-left: 114.9px;
}
.img2{
height: 60px;
float: left;
padding: 95px 114.9px;
}
.img3{
height: 60px;
float: right;
padding: 95px 114.9px;
margin-right: 114.9px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="top">
<div class="left">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg">
</div>
<div class="right">
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg">
</div>
</div>
<div class="bot">
<div class="img1"><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg"></div>
<div class="img2"><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg"></div>
<div class="img3"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"></div>
</div>
</body>
</html>
1回答
同学你好,测试同学提供的代码,图片之间的间距是不同的,如下:
因为分辨率不同,所以不建议宽度设置为百分比。建议:可以设置为固定的宽度,例如宽度设置为1200px:
margin-left值:父级的宽度为1200px(这里的1200px是老师自己设置的,在实际工作中可以根据设计稿设置),图片的宽度为360px,一共两张图片三个间隙,那么:1200-360*2=480/3=160px
margin-top值:父级的高度为500px,图片的高度为215px,一共上下两个间隙,那么500-215=285,285/2=142.5px
代码参考:
下方三张图片和上方的思路是一样的,同学可以自己写一写。
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
相似问题