3-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 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 | <!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> |
0
收起
正在回答
5回答
1、图片的宽度是240，外边距宽20，边框宽2px，,240*3+20*4+2*6=812px；同学把815px改成812px 也可以的。
2、高度同理。
看图片的宽度同学可以把鼠标放在图片上可以看到它的宽高，同学也可以自己设置宽高。
3、 是的，margin:20px 0px 0px 20px 一个是top外边距，一个是left外边距。
4、
在浏览器端按F12调出上图中的部分，按一下红框中的按钮，使其变成蓝色，此时你的鼠标放在图片上时，会展示其大小
如果我的回答解决了你的问题,请采纳,祝学习愉快.
chrismorgen
2018-09-13 15:50:54
大体的模样已经有了，我们就可以对main的宽高和图片之间的margin属性进行调节了，针对你的代码做了一些调整，同学可以和自己的代码核对一下：
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 | <!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> |
修订之后的效果如下：
慕羲
2018-09-13 14:32:08
修改了，跟效果图不太一样？？？
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 | <!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> |
还要怎么修改好一些呢？？？
chrismorgen
2018-09-12 17:13:14
你的<img src>中的scr写错了，应改为src，祝学习愉快~
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧