老师请问有什么需要改进的吗？
来源：3-4 编程练习
慕仰6282199
2018-12-02 21:17:03
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0 20;
padding: 0;
}
.main{
border:1px #DDDDDD dashed;
overflow: hidden;
width: 850px;
margin: 0 auto;
}
.con1{
border:1px #DDDDDD solid;
width: 240px;
float: left;
margin: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="con1">
<div class="p1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div>
<span>欢迎来到慕课网学习新知识!</span>
</div>
<div class="con1">
<div class="p1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<span>欢迎来到慕课网学习新知识!</span>
</div>
<div class="con1">
<div class="p1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<span>欢迎来到慕课网学习新知识!</span>
</div>
<div class="con1">
<div class="p1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div>
<span>欢迎来到慕课网学习新知识!</span>
</div>
<div class="con1">
<div class="p1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<span>欢迎来到慕课网学习新知识!</span>
</div>
<div class="con1">
<div class="p1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<span>欢迎来到慕课网学习新知识!</span>
</div>
</div>
</body>
</html>
1回答
-
如下图所示，因为你每张图片的上线所有间距都是20px，所以导致中间的部门的间距出现了40px的宽度，
修改意见：可以在.con1中将margin的间距设置为20px 20px 0px 0px，它们分别对应的是上右下左，也就是说我将下和左的间距改为0，
那么我们为了让他更符合要求，也要将最外层的边框设置为左内边据为20px;下内边距设置为20px；
这样就能实现作业中的效果了，在你代码的基础上做了一些调整。请参考，祝学习愉快~
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0 20; padding: 0; } .main{ border:1px #DDDDDD dashed; overflow: hidden; width: 790px; margin: 0 auto; padding-left: 20px; padding-bottom: 20px; } .con1{ border:1px #DDDDDD solid; width: 240px; float: left; margin: 20px 20px 0px 0px; } </style> </head> <body> <div class="main"> <div class="con1"> <div class="p1"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div> <span>欢迎来到慕课网学习新知识!</span> </div> <div class="con1"> <div class="p1"> <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div> <span>欢迎来到慕课网学习新知识!</span> </div> <div class="con1"> <div class="p1"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div> <span>欢迎来到慕课网学习新知识!</span> </div> <div class="con1"> <div class="p1"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div> <span>欢迎来到慕课网学习新知识!</span> </div> <div class="con1"> <div class="p1"> <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div> <span>欢迎来到慕课网学习新知识!</span> </div> <div class="con1"> <div class="p1"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div> <span>欢迎来到慕课网学习新知识!</span> </div> </div> </body> </html>0
相似问题