3-4编程练习不能按效果图呈现？？？

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
           *{
                padding:0px;
                margin:0px;
            }
            .main{
                border:2px dashed gray;
                width:800px;
                height:400px;
                /*overflow:hidden;
                zoom:1;*/
            }
            .a{
                overflow:hidden;
                zoom:1;
            }
            .a>div{
                width:200;
                height:100;
                font-family:"微软雅黑";
                float:left;
                margin:20px 10px;
            }
            .b{
                overflow:hidden;
                zoom:1;
            }
            .b>div{
                width:200;
                height:100;
                font-family:"微软雅黑";
                float:left;
                margin:20px 10px;
            }
        </style>
</head>
<body>   
        <!-- 此处写代码 -->
        <div class="main">
            <div class="a">
            <div class="a1">
            <img scr="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
            <div>欢迎来到慕课网学习新知识</div>
            </div>
            <div class="a2">
            <img scr="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识</div>
            </div>
            <div class="a3">
            <img scr="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识</div>
            </div>
            </div>
            <div class="b">
            <div class="b1">
            <img scr="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
            <div>欢迎来到慕课网学习新知识</div>
            </div>
            <div class="b2">
            <img scr="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识</div>
            </div>
            <div class="b3">
            <img scr="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识</div>
            </div>
            </div>
        </div>
</body>
</html>

慕羲 2018-09-12

源自：float浮动 3-4 编程练习

0

收起

5回答

好帮手慕阿莹回答被采纳获得+3积分 2018-09-16 10:35:24

1、图片的宽度是240，外边距宽20，边框宽2px，,240*3+20*4+2*6=812px；同学把815px改成812px 也可以的。

2、高度同理。

看图片的宽度同学可以把鼠标放在图片上可以看到它的宽高，同学也可以自己设置宽高。

3、是的，margin:20px 0px 0px 20px 一个是top外边距，一个是left外边距。

4、

在浏览器端按F12调出上图中的部分，按一下红框中的按钮，使其变成蓝色，此时你的鼠标放在图片上时，会展示其大小

如果我的回答解决了你的问题,请采纳,祝学习愉快.

慕羲提问者 #1

欢迎来到慕课网学习新知识，这句话的高度是（390-135*2-20*3-2*4）/2=26,对不对？？？

2018-09-16 17:45:20
好帮手慕阿莹回复提问者慕羲 #2

是的。同学理解的没错

2018-09-17 11:00:59

chrismorgen 2018-09-13 15:50:54

大体的模样已经有了，我们就可以对main的宽高和图片之间的margin属性进行调节了，针对你的代码做了一些调整，同学可以和自己的代码核对一下：

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
           *{
                padding:0px;
                margin:0px;
            }
            .main{
                border:2px dashed gray;
                width:815px;
                height:390px;
                /*overflow:hidden;
                zoom:1;*/
            }
            .a{
                overflow:hidden;
                zoom:1;
            }
            .a>div{
                /*width:200px;
                height:100px;*/
                border:2px solid gray;
                font-family:"微软雅黑";
                float:left;
                margin:20px 0px 0px 20px;
            }
            .b{
                overflow:hidden;
                zoom:1;
            }
            .b>div{
                /*width:200px;
                height:100px;*/
                border:2px solid gray;
                font-family:"微软雅黑";
                float:left;
                /*margin:0px 10px;*/
                margin:20px 0px 0px 20px;
            }
        </style>
</head>
<body>   
        <!-- 此处写代码 -->
        <div class="main">
            <div class="a">
            <div class="a1">
            <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            <div class="a2">
            <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            <div class="a3">
            <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            </div>
            <div class="b">
            <div class="b1">
            <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            <div class="b2">
            <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            <div class="b3">
            <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            </div>
        </div>
</body>
</html>

修订之后的效果如下：

提问者慕羲 #1

width:815; height:390; 是怎么计算出来的，怎么知道图片的大小，我没有设置图片的大小？ margin:20px 0px 0px 20px;怎么理解，一个是top外边距，一个是left外边距吗？

2018-09-14 19:25:51

提问者慕羲 2018-09-13 14:32:08

修改了，跟效果图不太一样？？？

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
           *{
                padding:0px;
                margin:0px;
            }
            .main{
                border:2px dashed gray;
                width:800px;
                height:400px;
                /*overflow:hidden;
                zoom:1;*/
            }
            .a{
                overflow:hidden;
                zoom:1;
            }
            .a>div{
                /*width:200px;
                height:100px;*/
                border:2px solid gray;
                font-family:"微软雅黑";
                float:left;
                margin:20px 10px;
            }
            .b{
                overflow:hidden;
                zoom:1;
            }
            .b>div{
                /*width:200px;
                height:100px;*/
                border:2px solid gray;
                font-family:"微软雅黑";
                float:left;
                margin:20px 10px;
            }
        </style>
</head>
<body>   
        <!-- 此处写代码 -->
        <div class="main">
            <div class="a">
            <div class="a1">
            <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            <div class="a2">
            <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            <div class="a3">
            <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            </div>
            <div class="b">
            <div class="b1">
            <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            <div class="b2">
            <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            <div class="b3">
            <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
            <div>欢迎来到慕课网学习新知识!</div>
            </div>
            </div>
        </div>
</body>
</html>

还要怎么修改好一些呢？？？

好帮手慕阿莹 2018-09-12 17:18:38

1、你的.a>div .b>div 宽和高都没有写px。

2、图片引入的是src ，同学拼写成scr了

3、适当调整一下 .a>div 和 .b>div 的宽高

4、 .a>div 和 .b>div里的样式设置一样，你可以写个共同的类名，然后写一次就好了。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

提问者慕羲 #1

请看下一上面的截图，跟效果图不太一样，要怎么修改好一些？？？

2018-09-13 14:33:06

chrismorgen 2018-09-12 17:13:14

你的<img src>中的scr写错了，应改为src，祝学习愉快~

相似问题

2-9编程练习

编程练习的答案呢

4-3编程练习书写是否正确？为什么我的效果与练习效果有出入？

3-4编程问题。

编程练习.。

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

从网页搭建入门Java Web2018版

参与学习人
提交作业 1088 份
解答问题 10204 个

如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！

本课精华内容

问答作业

为什么这样不报错？

6 1

老师请问一下

1 4

老师这样写可以嘛

2 1

老师这样写可以吗

7 1

我为了实现两行三列的效果，设置了三级div。老师您看，这样编程符合要求吗

10 1

查看更多本课问答

请稍等 ...

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

帮助反馈 APP下载

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

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