老师，我这样可以吗？哪些地方需要改进的？
来源：3-4 编程练习
慕田峪3523396
2019-11-10 15:56:38
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
.contenter{
padding:0;
margin:0 auto;
width:800px;
overflow:hidden;
}
.pic1{
width:240px;
border:1px solid #dcdcdc;
padding:5px 5px;
margin:5px 5px;
text-align:center;
float:left;
}
.pic2{
width:240px;
border:2px solid #dcdcdc;
padding:5px 5px;
margin:5px 5px;
text-align:center;
float:left;
}
.pic3{
width:240px;
border:2px solid #dcdcdc;
padding:5px 5px;
margin:5px 5px;
text-align:center;
float:left;
}
.pic4{
width:240px;
border:2px solid #dcdcdc;
padding:5px 5px;
margin:5px 5px;
text-align:center;
float:left;
}
.pic5{
width:240px;
border:2px solid #dcdcdc;
padding:5px 5px;
margin:5px 5px;
text-align:center;
float:left
}
.pic6{
width:240px;
border:2px solid #dcdcdc;
padding:5px 5px;
margin:5px 5px;
text-align:center;
float:left;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="contenter">
<div class="pic1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<div>欢迎来到慕课网学习知识！</div>
</div>
<div class="pic2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<div>欢迎来到慕课网学习知识！</div>
</div>
<div class="pic3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<div>欢迎来到慕课网学习知识！</div>
</div>
<div class="pic4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<div>欢迎来到慕课网学习知识！</div>
</div>
<div class="pic5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<div>欢迎来到慕课网学习知识！</div>
</div>
<div class="pic6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<div>欢迎来到慕课网学习知识！</div>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕夭夭
2019-11-10
你好同学，代码需要优化，参考如下：
6个盒子设置的样式都是一样的，所以给它们设置相同的类名
统一设置样式，注释的删除
里面的文字不用设置居中，而是有一点左边距，可以给小盒子设置一个左填充实现：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 2
回答 2
回答 1
回答 1
回答 2