麻烦老师帮忙检查,谢谢。

来源: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回答

好帮手慕星星

2020-02-28

同学你好,布局以及实现效果是很棒的!

优化:图片是行内元素,有文字特性,默认存在间隙,可以使用font-size清除,如下

http://img.mukewang.com/climg/5e58680e09b9367302720150.jpg

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

1

0 学习 · 40143 问题

查看课程