作业检查
来源：4-11 编程练习
满格4372973
2021-03-28 09:14:18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
float:left;
margin-top: 20px;
margin-left:20px;
margin-bottom:20px;
border:1px solid green;
}
#div0{
width:850px;
/*padding:20px;*/
}
#div1,#div2,#div3{
margin-bottom:0px;
}
img{
float:left;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课学习新知识</p>
</div>
<div id="div2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课学习新知识</p>
</div>
<div id="div3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课学习新知识</p>
</div>
<div id="div4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课学习新知识</p>
</div>
<div id="div5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课学习新知识</p>
</div>
<div id="div6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课学习新知识</p>
</div>
</div>
</body>
</html>
1回答
-
同学你好，作业大致完成题目效果，但是还有一些地方可以改进，如：
1、题目效果图中，父容器的外边框是虚线，而同学的效果图中是实线，建议修改。
2、父容器左右的空白宽度不一致，如：
建议同学具体计算大容器的宽度，使其左右两边的空白宽度一致。
比如：图片宽是240px ，外边距是20px ，边框宽度是1px
则三个并排时，父容器的宽是：
240*3+1px*6+20px*4 = 806px；
父容器的宽度设置为806px。
祝学习愉快~
0
相似问题