2-14 编程练习作业提交
来源：2-14 编程练习
MiMicccc
2020-09-02 13:17:54
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编程练习</title>
<style type="text/css">
/*此处写代码*/
* {
margin: 0;
padding: 0;
}
img {
display: inline-block
}
li {
list-style: none;
}
.top {
width: 100%;
background: #9BE3FF;
overflow: hidden;
}
.top_left,
.top_right {
margin: 5% 0;
width: 30%;
}
.top_left {
float: left;
margin-left: 13.33%;
}
.top_right {
float: right;
margin-right: 13.33%;
}
.bottom {
padding: 0 5%;
width: 90%;
background: #FFC0CB;
overflow: hidden;
}
.bottom li {
margin: 5% auto;
float: left;
width: 33.33%;
text-align: center;
}
.bottom li img {
width: 60%;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="top">
<img class="top_left" src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" alt="">
<img class="top_right" src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" alt="">
</div>
<ul class="bottom">
<li><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" alt=""></li>
<li><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" alt=""></li>
<li><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" alt=""></li>
</ul>
</body>
</html>写回答
1回答
-
同学你好，图片与图片之间的间距和图片与大盒子之间的间距存在误差，建议参考如下思路实现效果：
通过计算每个图片的间隙, 设置边距，使间隙都相同。老师这里给同学提供一个图片间距相等实现思路（以上部分为例）：整体的宽度， 减去两个图片的宽度（可以给图片设置固定的宽度，刚好等于图片自身的宽度360px）, 就是剩余间距的宽度 , 一共有三个间距 , 所以除以3就是每一个间距的大小，然后给图片设置左外边距即可。
参考代码如下：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题