老师请您帮我看一眼代码，效果实现了，但总觉的代码不规范，能帮我提供一下思路么？
来源：3-4 编程练习
慕数据2005548
2020-07-07 15:38:00
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;}
body{padding:10px;}
.course{width:790px;
border:1px dashed #efeaea;
padding:10px 15px;
}
.first,.second,.third,.four,.five,.six{
width:240px;
height:140px;
border:1px solid #efeaea;
margin:10px;
float:left;
}
.clearfix{zoom:1}
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
ul li{list-style:none;
}
img{width:240px;
height:110px;}
</style>
</head>
<body>
<div class="course clearfix">
<div class="first clearfix">
<ul>
<li>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt="">
</li>
<li><p>欢迎来到慕课网学习新知识!</p></li>
</ul>
</div>
<div class="second clearfix">
<ul>
<li>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" alt="">
</li>
<li>
<p>欢迎来到慕课网学习新知识!</p>
</li>
</ul>
</div>
<div class="third clearfix">
<ul>
<li>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" alt="">
</li>
<li>
<p>欢迎来到慕课网学习新知识!</p>
</li>
</ul>
</div>
<div class="four clearfix">
<ul>
<li>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt="">
</li>
<li>
<p>欢迎来到慕课网学习新知识!</p>
</li>
</ul>
</div>
<div class="five clearfix">
<ul>
<li>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" alt="">
</li>
<li>
<p>欢迎来到慕课网学习新知识!</p>
</li>
</ul>
</div>
<div class="six clearfix">
<ul>
<li>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" alt="">
</li>
<li>
<p>欢迎来到慕课网学习新知识!</p>
</li>
</ul>
</div>
<ul>
<li></li>
</ul>
</div>
</body>
</html>
1回答
-
好帮手慕星星
2020-07-07
同学你好，布局是可以的，实现的效果间隙还可以进行调整
外层大盒子四周间距需要保持一致，宽度也需要调整
优化：小盒子样式选择器可以简化
自己再测试下，祝学习愉快！
0
相似问题