请老师检查代码

请老师检查代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin: 0;padding: 0;text-align: center;}
        .header{width: 1000px;background: lightblue;margin: 0 auto;overflow: hidden;zoom: 1;}
        .left1{float: left;margin: 10px 30px 10px 10%;}
        .left1 img{width: 100%;}
        .right1{float: right;margin: 10px 10% 10px 30px;}
        .footer{width: 1000px;background: lightcoral;margin: 0 auto;overflow: hidden;zoom: 1;}
        .left2{float: left;margin: 50px 25px 50px 125px;}
        .middle{float: left;margin: 50px 50px 50px 50px;}
        .right2{float: right; margin: 50px 125px 50px 25px;}
    </style>
</head>
<body>
    <div class="header">
        <div class="left1">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" alt="css3-img"/>
        </div>
        <div class="right1">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" alt="html-img"/>
        </div>
    </div>
    <div class="footer">
        <div class="left2">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" alt="foot-img1"/>
        </div>
        <div class="middle">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" alt="foot-img2"/>
        </div>
        <div class="right2">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" alt="foot-img3"/>
        </div>
    </div>
</body>
</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕言 2020-02-04 13:49:53

同学你好,第二条和第四条可以结合着看,如下:

http://img1.sycdn.imooc.com//climg/5e3905d50908c9b903580177.jpg

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

好帮手慕言 2020-02-04 11:05:13

同学你好,从下图中可以看出,间距是不一致的,如下:

http://img1.sycdn.imooc.com//climg/5e38dda80958618910010239.jpg

思路如下:

总的宽度为1000px,上部分总宽度减去两张图片盒子的宽度(例如360px*2),剩余280px ,一共三处间距,所以每一处约为93.33px。

http://img1.sycdn.imooc.com//climg/5e38df0309f3582605640374.jpg

img元素自带间隙,将img转换为块元素即可清除间隙。代码参考:
http://img1.sycdn.imooc.com//climg/5e38df3a098e19e103160127.jpg

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

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

  • 提问者 太阳不菜 #1
    老师,题目中说: (3)图片与盒子的上下边距是一样的。 (4) 图片与盒子的左右边距也是一样的。 并未要求图片之间的间距和盒子左右边距一样啊,不知道是不是我的理解有问题
    2020-02-04 11:17:57
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

登录后可查看更多问答,登录/注册

请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师