麻烦老师看看我这样写可以吗?

麻烦老师看看我这样写可以吗?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    .one{width:100%;height:360px;background-color:#5f9ea0;margin:0 auto;}
    .left{width:70%;height:240px;float:left;margin-left:122px;margin-top:75px;}
    .right{width:30%;height:160px;float:right;margin-left:120px;margin-top: -240px;
    margin-right:80px;}
    .two{width:100%;height:120px;background-color:pink;margin:0 auto;}
    .leftimg{float:left;margin-top:30px;margin-left: 120px;}
    .middleimg{float:left;margin-top:30px;margin-left: 250px;}
    .rightimg{float:right;margin-top:30px;margin-right: 120px;}
  </style>
</head>
<body>
    <div class="one">
        <div class="left">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" />
        </div>
        <div class="right">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" />
        </div>
    </div>
    <div class="two">
        <div class="leftimg">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" />
        </div>
        <div class="middleimg">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" />
        </div>
        <div class="rightimg">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" />
        </div>
    </div>
</body>
</html>


正在回答

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

2回答

有个合适的宽高,这样不是方便计算吗。而且这样的效果比宽度100%要好看噢

怎么都被占用了呢 2018-01-25 11:05:37

写的有些繁琐,且效果还需完善,我帮你修改了一下第一行的布局,可以参考下图,完善一下第二行

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

继续加油吧~~

  • 提问者 打不死的女小强 #1
    *{margin:0;padding:0}这句我是忘记写了。可我有个问题,就是为啥.one的宽不能设置为100%,然后.left和.right各设置为70%和30%呢? 还有.two的宽为啥不能设置为100%呢?
    2018-01-25 12:05:31
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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