麻烦老师看看，谢谢
来源：3-4 编程练习
慕沐0052060
2019-04-30 15:26:59
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
color:black;
}
.big{
width:756px;
border:1px dashed #d3d3d3;
padding:5px;
margin:0 auto;
overflow:hidden;
zoom:1;
}
.one,.two,.three,.four,.five,.six{
border:1px solid #d3d3d3;
width:240px;
margin:5px;
float:left;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="big">
<div class="one"><a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br><span>欢迎来到慕课网学习知识！</span></a>
</div>
<div class="two"><a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br><span>欢迎来到慕课网学习知识！</span></a>
</div>
<div class="three"><a href="#"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br><span>欢迎来到慕课网学习知识！</span></a>
</div>
<div class="four"><a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br><span>欢迎来到慕课网学习知识！</span></a>
</div>
<div class="five"><a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br><span>欢迎来到慕课网学习知识！</span></a>
</div>
<div class="six"><a href="#"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br><span>欢迎来到慕课网学习知识！</span></a>
</div>
</div>
</body>
</html>
1回答
-
你好，代码实现效果没有问题，很棒哦！
给每个小盒子设置样式的时候选择器可以简化一下，例如：
选择.big大盒子下面所有的div标签。
祝学习愉快！
1
相似问题