3-4练习代码 请老师检查下
来源：3-4 编程练习
慕移动5599480
2020-09-10 23:42:23
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
*{margin:0;padding:0;}
.main{width:820px;border:1px #ccc dashed;}
p{font-size:16px;text-align:left;margin-left:5px;}
.new,.JS,.boot{float:left;margin:10px 15px;border:1px #ccc solid;}
.main,.one{overflow:hidden;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="main">
<div class="one">
<div class="new"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/><p>欢迎来到慕课网学习新知识!</p></div>
<div class="JS"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/><p>欢迎来到慕课网学习新知识!</p></div>
<div class="boot"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/><p>欢迎来到慕课网学习新知识!</p></div>
</div>
<div class="two">
<div class="new"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/><p>欢迎来到慕课网学习新知识!</p></div>
<div class="JS"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/><p>欢迎来到慕课网学习新知识!</p></div>
<div class="boot"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/><p>欢迎来到慕课网学习新知识!</p></div>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕鹤
2020-09-11
同学你好，效果中有以下问题：
1、块与块之间，块与边框之间的间距不一致，如下：
（1）建议每个块设置margin：10px；为了实现块与边框的间距一直，需要给最外层的父元素.main设置内边距padding：10px；(设置为10px是为了方便盒模型计算)
（2）容器的宽度设置的有点大，建议容器的宽度设置为786px。宽度是根据盒模型计算出来的（一个盒子的宽度+一个盒子的边距+一个盒子的border值）*3=786px。使容器的宽度正好包裹住里面的内容。
如果帮助到了你，欢迎采纳，祝学习愉快，继续加油！
0
相似问题