3-2编程,请帮忙看下是否有纰漏

3-2编程,请帮忙看下是否有纰漏

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
<!DOCTYPE html>
<html>
<head>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .main{
            width:766px;
            border:1px dotted #ccc;
            margin-left:30px;
            margin-top:100px;
            padding-top:10px;
        }
        p{
            padding-left:10px;
            font-size:13px;
            line-height:30px;
        }
        .img1,.img2,.img3{
            width:240px;
            height:150px;
            border:1px dotted #ccc;
             
            margin-right:10px;
            margin-bottom:10px;
            float:left;
        }
        .img1{
            margin-left:10px;
        }
        .clear1{
            clear:both;
        }
    </style>
        <!-- 此处编写样式 -->
</head>
<body>
    <div class="main">
        <div class="img1">
            <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识!</p>
        </div>
        <div class="img2">
            <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识!</p>
        </div>
        <div class="img3">
            <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识!</p>
        </div>
        <div class="img1">
            <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识!</p>
        </div>
        <div class="img2">
            <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识!</p>
        </div>
        <div class="img3">
            <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" alt="picture1" width="240px" height="120px" />
            <p>欢迎来到慕课网学习知识!</p>
        </div>
        <div class=clear1></div>
    </div
     
        <!-- 此处写代码 -->    
</body>
</html>

老师:首先麻烦您帮我看下以上代码是否有可以改进的地方。其次有个疑问。我发现在使用了float之后,上下的margin是会叠加的?


正在回答

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

2回答

1、整体效果没有问题,只是代码head中没有添加<meta charset="utf-8"/>,导致页面打开文字乱码。

2、块级元素的垂直相邻外边距会合并,浮动元素的外边距也不会合并。

祝学习愉快!


  • Durians 提问者 #1
    谢谢老师
    2017-09-30 21:47:18
慕勒7132189 2017-10-04 10:56:20

为什么你这个没有崩塌?我设置float就崩塌了,也没看到父元素有设置float啊?

  • 提问者 Durians #1
    我最下面有个空的div,就是来解决崩塌的,视频里面有这方面的知识
    2017-10-04 15:24:21
  • 慕勒7132189 回复 提问者 Durians #2
    若不设置具体像素,能实现吗?
    2017-10-04 16:03:20
  • 提问者 Durians 回复 慕勒7132189 #3
    我那个就是没设置具体的像素,直接用clear,清除浮动就好。之前的课程里面有四种清除浮动的方式
    2017-10-04 21:58:37
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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