老师帮看下 好像边框没有
来源:3-4 编程练习
黄华仔
2020-11-27 22:34:38
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
在这里输入代码,可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{margin:0;
padding:0;
}
.qo0{width:1200px;
overflow: hidden;
zoom:1;
}
.qo1{
float:left;
margin:10px;
text-align:center;
border:1px #f2f2f2 solid;
}
}
.wo{width:1200px;
overflow: hidden;
zoom:1;
}
.wo1{float:left;
text-align:center;
margin:10px;
border:1px #f2f2f2 solid;
}
p{font-family:"微软雅黑";
}
</style>
</head>
<body>
<div class="qo0">
<div class="qo1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p >欢迎来到慕课网学习新知识!</p>
</div>
<div class="qo1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="qo1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg
">
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
<div class="wo">
<div class="wo1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="wo1">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="wo1">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg
"> <p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
</body>
</html>
1回答
好帮手慕慕子
2020-11-28
同学你好,代码中有一个细节问题,需要注意一下,如下图所示位置多写了一个括号。建议去掉

针对同学的问题,解答如下:
因为没有给大盒子设置边框,所以外层盒子没有边框。建议:可以外层盒子添加border属性设置边框样式


添加之后,可以发现图片与图片之间的间距,和图片与大盒子之间的间距不相等,如下图所示:

由于每个小盒子的样式都是一样的,可以设置相同的类名,统一设置样式,然后使用一个大盒子包裹所有的六个小盒子,给大盒子设置固定的宽度(等于三个小盒子实际占据的宽度即可),最后通过调整大盒子的padding值,实现所有间距相等。



祝学习愉快~
相似问题
回答 1
回答 1