2-13编程,总感觉怪怪的

2-13编程,总感觉怪怪的

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    body{

        margin:0;

        padding:0;

    }

    .container{

      margin:0 auto;

      width:1400px;

        height:1000px;

    }

    .up{

        width:1020px;

        height:700px;

        background:#add8e6;

    }

    .down{

        width:1020px;

        height:300px;

        background:#ffb6c1;

    }

    .up-left{width:500px;

              height:300px;

              position:absolute;

              top:100px;

              margin-left:100px;


    }

    .up-right{width:500px;

              height:500px;

              position:absolute;

              top:100px;

              margin-left:560px;


    }

    .down-left{

      width:200px;

      height:100px;

      float:left;

      position:relative;

      margin:70px;


    }

    .down-middle{

      width:200px;

      height:100px;

      float:left;

      position:relative;

      margin:70px;


    }

    .down-right{

      width:200px;

      height:100px;

      float:left;

      position:relative;

      margin:70px;


    }

    /*此处写代码*/

  </style>

</head>

<body>

  <div class="container">

      <div class="up">

          <div class="up-left"><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"/></div>

          <div class="up-right" ><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"/></div>

      </div>

      <div class="down">

          <div class="down-left"><img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"/></div>

          <div class="down-middle"><img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"/></div>

          <div class="down-right"><img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"/></div>

      </div>

  </div>

  <!-- 此处写代码 -->

</body>

</html>


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

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

1回答
樱桃小胖子 2018-03-18 13:58:02

效果实现的人是可以的,但是建议简化一下代码:

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

另外up-right的高度应该是300px;建议修改一下,然后与up-left合并简化一下代码:

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

希望可以帮到你~

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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