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是会叠加的?
39
收起
正在回答
2回答
1、整体效果没有问题,只是代码head中没有添加<meta charset="utf-8"/>,导致页面打开文字乱码。
2、块级元素的垂直相邻外边距会合并,浮动元素的外边距也不会合并。
祝学习愉快!
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧