老师麻烦帮忙检查一下
来源：2-14 编程练习
慕侠2380828
2020-04-01 14:53:03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{padding:0;
margin:0;
margin-top:;
}
.x{
text-align:center;
}
.top{
width:900px;
height:450px;
background-color:#99CCFF;
margin:0 auto;
overflow:hidden;
}
.one{
float:left;
margin:25px 50px 25px 100px;
}
.two{
float:right;
margin:25px 100px 25px 50px;
}
.image{
width:300px;
height:400px;
}
.bottom{
width:900px;
height:150px;
background-color:pink;
margin:0 auto;
overflow:hidden;
}
.image2{
width:150px;
height:90px;
}
.three{
float:left;
margin:30px 56px 30px 112px;
}
.four{
float:left;
margin:30px 56px 30px 56px;
}
.five{
float:right;
margin:30px 112px 30px 56px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="x">
<div class=top>
<div class="one"><img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" class="image"></div>
<div class="two"><img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" class="image"></div>
</div>
<div class="bottom">
<div class="three"><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" class="image2"></div>
<div class="four"><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" class="image2"></div>
<div class="five"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" class="image2"></div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，效果实现的是正确的，建议优化如下：
1.样式书写要完整，如果没用该样式，建议删除
2.图片是行内元素，默认存在间隙，会导致它所在的父元素高度超出，如下图所示：
可以通过设置font-size：0px；消除这个间隙，参考如下：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
1
相似问题