2-13练习

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>2-13</title>
  <style type="text/css">
    /*此处写代码*/
    body{
        margin:0;
        padding:0;
        text-align: center;
    }
    .all{
        width:80%;
        height:80%;
        margin:10%;
    }
    .top{
        height: 60%;
        width: 100%;
        background-color:#9999ff;
    }
    .topleft{
        width: 40%;
        float: left;
        margin:auto 10%;
    }
    .topright{
        width: 40%;
        float: right; 
        margin:auto 10%;
    }
    .bottom{
        width: 100%;
        height: 40%;
        float: right;
        background-color: #ff99cc: 
    }
    .bottomleft{
        width: 23%;
        float: left;
        margin:auto 10%;
    }
    .bottommiddle{
        width: 23%;
        float: left;
        margin:auto 10%;
    }
    .bottomright{
        width: 23%;
        float: right;
        margin:auto 10%;
    }
  </style>
</head>
<body>
    <!-- 此处写代码 -->
  <div class="all">
      <div class="top">
          <div class="topleft">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" alt="" />
          </div>
          <div class="topright">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" alt=""/>
          </div>
      </div>
      <div class="bottom">
          <div class="bottomleft">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" alt=""/>
          </div>
          <div class="bottommiddle">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" alt=""/>
          </div>
          <div class="bottomright">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" alt=""/>
          </div>
      </div>
  </div>
</body>
</html>

不知道问题出在哪里

西蓝花fa 2017-08-16

源自：CSS网页布局基础 3-1 圣杯布局

收起

3回答

好帮手慕糖回答被采纳获得+3积分 2017-08-17 09:44:27

你好，（1）背景颜色不显示，因为这里的高度不能设置百分比，是不生效的，子元素浮动，也无法撑起，建议：可添加overflow: hidden; 从新继续父级元素的高度。

（2）如下图，左右外边距10%，那么两边就是20%，总宽度就为60%，两块的宽度就为120%，导致超出，页面错乱。

（3）.bottom选择器，background-color属性值后应该是分好，不是冒号。

（4）下部分的原因与上部分一样，整体修改，可参考下列代码：

    .all{
        width:80%;
        height:80%;
        margin:10%;
    }
    .top{
        height: 60%;
        width: 100%;
        background-color:#9999ff;
        overflow: hidden;
    }
    .topleft{
        width: 40%;
        float: left;
        margin:auto 5%;
    }
    .topright{
        width: 40%;
        float: right; 
        margin:auto 5%;
    }
    .bottom{
        width: 100%;
        height: 40%;
        float: right;
        background-color: #ff99cc; 
        overflow:hidden;
    }
    .bottomleft{
        width: 23%;
        float: left;
        margin:auto 5%;
    }
    .bottommiddle{
        width: 23%;
        float: left;
        margin:auto 5%;
    }
    .bottomright{
        width: 23%;
        float: right;
        margin:auto 5%;
    }

祝学习愉快~

收起回答

好帮手慕糖 2017-08-17 11:54:02

实现的效果没有问题，继续加油，祝学习愉快~

收起回答

提问者西蓝花fa 2017-08-17 11:38:28

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>2-13</title>
  <style type="text/css">
    /*此处写代码*/
    body{
        margin:0;
        padding:0;
        text-align: center;
    }
    .all{
        width:80%;
        height:80%;
        margin: 10%;
    }
    .top{
        height: 60%;
        width: 100%;
        background:#9999ff;
        overflow: hidden;
    }
    .topleft{
        width: 40%;
        float: left;
        margin:2% 5%;
    }
    .topright{
        width: 40%;
        float: right;
        margin:2% 5%;
    }
    .bottom{
        width: 100%;
        height: 40%;
        float: left;
        background: #ff99cc;
        overflow: hidden;
    }
    .bottomleft{
        width: 23%;
        float: left;
        margin:4% 5%;
    }
    .bottommiddle{
        width: 23%;
        float: left;
        margin:4% 5%;
    }
    .bottomright{
        width: 23%;
        float: right;
        margin:4% 5%;
    }
  </style>
</head>
<body>
    <!-- 此处写代码 -->
  <div class="all">
      <div class="top">
          <div class="topleft">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" alt="" />
          </div>
          <div class="topright">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" alt=""/>
          </div>
      </div>
      <div class="bottom">
          <div class="bottomleft">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" alt=""/>
          </div>
          <div class="bottommiddle">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" alt=""/>
          </div>
          <div class="bottomright">
            <img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" alt=""/>
          </div>
      </div>
  </div>
</body>
</html>

改完后的代码，我把图片的上下外边距也改了

收起回答