检查（有什么需要改进？）
来源：4-11 编程练习
warren_au
2020-05-24 14:45:02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="div2">
<div><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br>欢迎学习新知识</div>
<div><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br>欢迎学习新知识</div>
</div>
<div id="div3">
<div><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br>欢迎学习新知识</div>
<div><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br>欢迎学习新知识</div>
</div>
<div id="div4">
<div><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br>欢迎学习新知识</div>
<div><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br>欢迎学习新知识</div>
</div>
</body>
</html>
css：
body{
outline: dashed;
height: 330px;
width: 770px;
}
#div2{
float:left;
margin-left: 10px;
outline: solid;
}
#div3{
float:left;
margin-left: 10px;
outline: solid;
}
#div4{
float:left;
margin-left: 10px;
outline: solid;
}
1回答
-
同学你好
同学的实现效果可以再优化一下
同学的上下左右虚线与里边的几个小方框的边距不对称
并且，
并且作业中每个小方框都是独立的
中间有一点的空隙。
修改建议：
同学这6个div可以使其分别向左浮动，并用一个大的div框起来
给这个大的div设置一个虚线的边： 比较细大概1px 灰色
然后这个大的div的宽高可以分别算一下三个小div 加上其外边距的大小，例如高是（160+10+10）乘以2 ，宽度同理。
并且里边的实线也设置成细一点的灰色。
因为上下左右都需要间隔开，margin-left改为margin。
另外相同设置的，可以给他们设置相同的class，然后统一设置calss的样式就可以了。
修改后：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div{ outline:1px gray dashed; height: 360px; width: 780px; } .div1{ float:left; margin: 10px; outline:1px gray solid; } </style> </head> <body> <div class="div"> <div class="div1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br>欢迎学习新知识</div> <div class="div1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br>欢迎学习新知识</div> <div class="div1"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br>欢迎学习新知识</div> <div class="div1"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br>欢迎学习新知识</div> <div class="div1"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br>欢迎学习新知识</div> <div class="div1"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br>欢迎学习新知识</div> <div> </body> </html>如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题