2-13练习

2-13练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!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 圣杯布局
46
收起

正在回答

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

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

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

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

http://img1.sycdn.imooc.com/climg//5994f41b0001da3805020407.jpg

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
    .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%;
    }

祝学习愉快~

0
收起回答
好帮手慕糖 2017-08-17 11:54:02

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

0
收起回答
提问者 西蓝花fa 2017-08-17 11:38:28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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>

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

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

2-13练习问题。
0 0 1
2-13编程练习
14 0 1
2-13 编程练习
80 0 1
5-13练习
2 0 6
2-9编程练习
30 0 5

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

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

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

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
微信客服

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码