老师，这样子对吗？
来源：4-11 编程练习
Heijyu
2020-07-01 19:07:51
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
.main{
width: 870px;
border: 1px solid grey;
float: left;
padding-bottom: 5px;
padding-left: 40px;
box-sizing: border-box;
}
.div1{
float: left;
border: 1px solid grey;
margin: 10px 10px 10px 10px;
}
img{
vertical-align: bottom;
}
p{
margin-left:30px;
line-height:0px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class = "main">
<div class = "div1">
<img src = "http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>Welcome to Imooc website!</p>
</div>
<div class = "div1">
<img src = "http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>Welcome to Imooc website!</p>
</div>
<div class = "div1">
<img src = "http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>Welcome to Imooc website!</p>
</div>
<div class = "div1">
<img src = "http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>Welcome to Imooc website!</p>
</div>
<div class = "div1">
<img src = "http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>Welcome to Imooc website!</p>
</div>
<div class = "div1">
<img src = "http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>Welcome to Imooc website!</p>
</div>
</div>
</body>
</html>写回答
1回答
-
好帮手慕小脸
2020-07-02
同学你好，经测试与最终结果有写差异哦，如下所示：
1、边框是以虚线展示不是实线，这里同学将solid 更改为dashed即可
2、图片展示有问题。图片与边框有空隙。如下：
这里将p标签的左外边距设置小些即可。修改如下：
如果我的回答解决了你的疑惑，请采纳！祝学习愉快~
0
相似问题