麻烦老师帮忙检查,谢谢。
来源:2-14 编程练习
慕妹4289635
2020-02-27 20:59:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
padding:0;
margin:0;
text-align: center;
}
.up{
width:1020px;
background: #add8e6;
height: 250px;
margin: 0 auto;
}
.up img{
margin:17.5px 50px;
}
.down{
width:1020px;
background: #ffb6c1;
height: 150px;
margin: 0 auto;
}
.down img{
margin: 45px 52.5px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="up">
<img src="http://img1.sycdn.imooc.com\/climg/58c0f808000129a303600215.jpg"/>
<img src="http://img1.sycdn.imooc.com\/climg/58c0f819000198a703600214.jpg"/>
</div>
<div class="down">
<img src="http://img1.sycdn.imooc.com\/climg/58c0f81d0001fe4402000060.jpg"/>
<img src="http://img1.sycdn.imooc.com\/climg/58c0f8220001dfce02000060.jpg"/>
<img src="http://img1.sycdn.imooc.com\/climg/58c0f8780001c74602000060.jpg"/>
</div>
</body>
</html>1回答
同学你好,布局以及实现效果是很棒的!
优化:图片是行内元素,有文字特性,默认存在间隙,可以使用font-size清除,如下

如果我的回答帮到了你,欢迎采纳,祝学习愉快~
相似问题