老师帮忙检查一下！
来源：3-4 编程练习
慕仙1126188
2019-08-27 13:28:12
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{
margin:0 auto;
padding:0 auto;
}
.one{
width:810px;
border:1px dashed #eee;
}
.two,.three{
margin:10px;
overflow:hidden;
}
.two .p1,.p2,.p3{
float:left;
margin:10px;
border:1px solid #eee;
line-height:1.5em;
padding-bottom:5px;
word-spacing:5px;
}
.three .p4,.p5,.p6{
float:left;
margin:10px;
border:1px solid #eee;
line-height:1.5em;
padding-bottom:5px;
word-spacing:5px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="one">
<div class="two">
<div class="p1">
<p><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
<div class="p2">
<p><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
<div class="p3">
<p><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="three">
<div class="p4">
<p><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
<div class="p5">
<p><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
<div class="p6">
<p><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
</div>
</div>
</body>
</html>
3回答
-
同学你好， 修改后效果实现的很棒。
有一点需要主要一下， padding默认值为0 ， 不可以设置auto这个值， 浏览器解析的时候虽然不会出错，但是会发出警告哦
建议修改：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0 -
慕仙1126188
提问者
2019-09-03
这是修改过的，谢谢老师的指点！
!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<meta charset="UTF-8" />
<style type="text/css">
*{
margin:0 auto;
padding:0 auto;
}
.one{
width:810px;
border:1px dashed #eee;
}
.two,.three{
margin:10px;
overflow:hidden;
}
.two{
margin-bottom:0;
}
.three{
margin-top:0;
}
.two .p1,.p2,.p3{
float:left;
margin:10px;
border:1px solid #eee;
line-height:1.5em;
padding-bottom:5px;
word-spacing:5px;
}
.three .p4,.p5,.p6{
float:left;
margin:10px;
border:1px solid #eee;
line-height:1.5em;
padding-bottom:5px;
word-spacing:5px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="one">
<div class="two">
<div class="p1">
<p><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
<div class="p2">
<p><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
<div class="p3">
<p><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="three">
<div class="p4">
<p><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
<div class="p5">
<p><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
<div class="p6">
<p><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br/>
欢迎来到慕课网学习新知识！</p>
</div>
</div>
</div>
</body>
</html>0 -
好帮手慕慕子
2019-08-27
同学你好，整体思路是可以的， 不过如下图所示， 因为two和three这个两个盒子设置的上下外边距叠加了， 导致图片之间的上下间隔距离不一样。
建议修改： 可以不给two盒子设置下外边距， 不给three盒子设置上外边距
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题