请老师帮忙检查下代码~谢谢!

来源:2-14 编程练习

Nyakoonya

2020-08-24 17:41:53

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    body{
        margin: 0;
        padding: 0;
        background-color: #9be3ff;
    }
    
    .top{
        width: 100%;
        height: 500px;
        background-color: #9be3ff;
        margin: 0 auto;
        text-align: center;
    }
    .left{
        height: 215px;
        float: left;
        padding: 142.5px 133.2px;
        margin-left: 133.2px;
    }
    .right{
        height: 215px;
        float: right;
        padding: 142.5px 133.2px;
        margin-right: 133.2px;
    }
    .bot{
        width: 100%;
        height: 250px;
        background-color: #ffc0cb;
        text-align: center;
        margin: 0 auto;
    }
    .img1{
        height: 60px;
        float: left;
        padding: 95px 114.9px;
        margin-left: 114.9px;
    }
    .img2{
        height: 60px;
        float: left;
        padding: 95px 114.9px;
    }
    .img3{
        height: 60px;
        float: right;
        padding: 95px 114.9px;
        margin-right: 114.9px;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
    <div class="top">
        <div class="left">
            <img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg">
        </div>
        <div class="right">
            <img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg">
        </div>
    </div>
    <div class="bot">
        <div class="img1"><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg"></div>
        <div class="img2"><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg"></div>
        <div class="img3"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"></div>
    </div>
</body>
</html>

写回答

1回答

好帮手慕言

2020-08-24

同学你好,测试同学提供的代码,图片之间的间距是不同的,如下:

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

因为分辨率不同,所以不建议宽度设置为百分比。建议:可以设置为固定的宽度,例如宽度设置为1200px:

margin-left值:父级的宽度为1200px(这里的1200px是老师自己设置的,在实际工作中可以根据设计稿设置),图片的宽度为360px,一共两张图片三个间隙,那么:1200-360*2=480/3=160px

margin-top值:父级的高度为500px,图片的高度为215px,一共上下两个间隙,那么500-215=285,285/2=142.5px

代码参考:

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

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

下方三张图片和上方的思路是一样的,同学可以自己写一写。

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

1

0 学习 · 40143 问题

查看课程