老师帮我看下 2-14练习题
来源：2-14 编程练习
Rain_2020
2019-11-16 11:37:55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
*{margin: 0; padding:0;box-sizing: border-box;}
.bodys{
margin: 20px auto;
width:80%;
height:400px;
background: green;
}
.topMain{
width: 100%;
height: 70%;
background-color: peachpuff;
}
.topMain img{
margin-top: 30px;
margin-left: 14%;
}
.topMain img,.bottomMain img{
display:block;
float: left;
}
.bottomMain{
width: 100%;
height: 30%
background-color: lavender;
}
.bottomMain img{
margin: 30px 100px;
}
</style>
</head>
<body>
<div class="bodys">
<div class="topMain">
<a href=""><img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" alt="" /></a>
<a href=""><img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" alt="" /></a>
</div>
<div class="bottomMain">
<a href=""><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" alt="" /></a>
<a href=""><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" alt="" /></a>
<a href=""><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" alt="" /></a>
</div>
</div>
</body>
</html>
2回答
-
同学你好，关于你的问题，回答如下：
1、可以设置小数的。
2、不过这里不需要设置为214px，可以将这个图片在页面中打开。
3、然后f12，打开控制台，在Elements这一项中有渲染的代码。点击，右侧可以查看图片的宽高，这里宽高分别是200px，60px；所以图片的宽度可以直接设置为200px。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
1 -
好帮手慕糖
2019-11-16
同学你好，代码中的问题如下：
1、代码中的问题如下：是要图片与图片之间，图片与两边的间距都是相等的，如下，这三部分。但是代码实现的效果右边的间距是比较大的。
建议：整体可以在调整下，如下，以上部分为例：
（1）大盒子设置固定的宽度，比如：900px。
（2）一行两个图片单元，一个的宽度是360px（根据图片本身的宽度设置。），两个就是720px；900-720 = 180px；
（3）所以剩余的宽度为180px，这180要被三个空白间隙平分，一个占据的宽度就是60px，所以可以给图片单元设置左外边距60px；且可以一起设置。例：
（4）同理上下的间距也可以设置下，图片高度设置为214px（本身的高度），顶部占据的总高度280px（大盒子400px，顶部占据70%，400的70%就是280），280-214=66px，上下两个间距，66/2 = 33px，所以可以设置上外边距33，例：
同学可以参考这个思路，将下部分的内容也修改下。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0h019-11-16
相似问题