请老师检查作业
来源：3-4 编程练习
慕爷1441759
2019-08-23 14:55:08
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{padding:0px;
margin: 0px;
}
.content{
overflow: hidden;
zoom:1;
width: 1000px;
margin: 0 auto;
}
.box{margin: 15px;
padding:10px;
border-style: solid;
border-color: #ececec;
float:left;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="content">
<div class="box">
<div class="image">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
</div>
<span class="word">
欢迎来到慕课网学习新知识！
</span>
</div>
<div class="box">
<div class="image">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
</div>
<span class="word">
欢迎来到慕课网学习新知识！
</span>
</div>
<div class="box">
<div class="image">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
</div>
<span class="word">
欢迎来到慕课网学习新知识！
</span>
</div>
</div>
<div class="content">
<div class="box">
<div class="image">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
</div>
<span class="word">
欢迎来到慕课网学习新知识！
</span>
</div>
<div class="box">
<div class="image">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
</div>
<span class="word">
欢迎来到慕课网学习新知识！
</span>
</div>
<div class="box">
<div class="image">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
</div>
<span class="word">
欢迎来到慕课网学习新知识！
</span>
</div>
</div>
</body>
</html>
1回答
-
同学你好，代码中的问题：
（1）效果图中最外层盒子是有虚线边框的，可以在大盒子上添加border属性：
效果如下：
与给出的效果图不符合。
（2）需要修改布局，使用一个大盒子，里面包含6个小盒子，参考：
<div class="content"> <div class="box"> <div class="image"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"> </div> <span class="word"> 欢迎来到慕课网学习新知识！ </span> </div> <div class="box"> <div class="image"> <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"> </div> <span class="word"> 欢迎来到慕课网学习新知识！ </span> </div> <div class="box"> <div class="image"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"> </div> <span class="word"> 欢迎来到慕课网学习新知识！ </span> </div> <div class="box"> <div class="image"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"> </div> <span class="word"> 欢迎来到慕课网学习新知识！ </span> </div> <div class="box"> <div class="image"> <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"> </div> <span class="word"> 欢迎来到慕课网学习新知识！ </span> </div> <div class="box"> <div class="image"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"> </div> <span class="word"> 欢迎来到慕课网学习新知识！ </span> </div> </div>
调整大盒子宽度，以及修改边距值：
大盒子宽度计算：
每张,图片宽度为240，box盒子边框左右边框各为1px，左右margin值各为15px，所以一个小盒子占据位置的宽度为15+1+240+1+15=272，三个小盒子占据的宽度为272*3=816，所以大盒子宽度设置为816px。
这样设置之后，每个小盒子之间的间距是小盒子与大盒子左右间距的2倍，所以需要在大盒子上添加padding值，与小盒子的margin值相同，这样各个间隙都是相同的。
自己可以修改测试下，祝学习愉快！
0
相似问题