老师请帮忙检查3-2谢谢，有什么需要改进的请指出。
来源：3-2 编程练习
qq_mysunshine_24
2017-11-30 14:52:22
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{padding: 0px;margin: 0px;font-size: 16px;font-family: "宋体"}
.per{width: 790px;height: auto;text-align: center;border: 1px solid #ececec;overflow:hidden;zoom:1;}
.one,.two,.three{margin:10px;border: 1px solid #ececec;float: left;}
.four{clear:left;}
.four,.five,.six{margin:10px;border: 1px solid #ececec;float: left;}
p{padding: 5px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="per">
<div class="one">
<div class="img">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt="欢迎" />
</div>
<p class="word">
欢迎来到慕课网学习新知识！
</p>
</div>
<div class="two">
<div class="img">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" alt="欢迎" />
</div>
<p class="word">
欢迎来到慕课网学习新知识！
</p>
</div>
<div class="three">
<div class="img">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" alt="欢迎" />
</div>
<p class="word">
欢迎来到慕课网学习新知识！
</p>
</div>
<div class="four">
<div class="img">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt="欢迎" />
</div>
<p class="word">
欢迎来到慕课网学习新知识！
</p>
</div>
<div class="five">
<div class="img">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" alt="欢迎" />
</div>
<p class="word">
欢迎来到慕课网学习新知识！
</p>
</div>
<div class="six">
<div class="img">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" alt="欢迎" />
</div>
<p class="word">
欢迎来到慕课网学习新知识！
</p>
</div>
</div>
</body>
</html>
不过说实话，关于高度的设置，我还真的是没有仔细计算，是后来试了两次试出来的。
1回答
-
好帮手慕糖
2017-11-30
你好，六个小块设置的样式是一样的，建议：可统一设置哦，另：整体大盒子的宽度需要再调整下哦，一个小盒子（包裹图片与文字的）的宽度是262（包括外边距与边框），一行三个，262*3 = 786,所以最外层的大盒子宽度可设置780px哦。
祝学习愉快~
0
相似问题