麻烦老师帮助看一下代码，自己觉得可能不是很规范，求指导一下！
来源：3-4 编程练习
听说吃黄瓜减肥
2020-03-18 20:57:40
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/CSS">
<!--
*{
margin:0px;
padding:0px;
}
.container{
width:800px;
border:1px dashed #ededed;
text-align:center;
margin:5px;
padding:10px;
}
.a1,.a2,.b1,.b2,.c1,.c2{
margin:10px;
border:1px solid #ececec;
}
.a1,.b1,.c1{float:left;}
.one,.two{
overflow:hidden;
zoom:1;
text-align:center;
display:inline-block;
vertical-align:middle;
}
.a2,.b2,.c2{float:left;}
-->
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="one">
<div class="a1">
<div><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/></div>
<p>欢迎来带慕课网学习新知识!</p>
</div>
<div class="b1">
<div><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/></div>
<span>欢迎来带慕课网学习新知识!</span>
</div>
<div class="c1">
<div><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/></div>
<span>欢迎来带慕课网学习新知识!</span>
</div>
</div>
<div class="two">
<div class="a2">
<div><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/></div>
<span>欢迎来带慕课网学习新知识!</span>
</div>
<div class="b2">
<div><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/></div>
<span>欢迎来带慕课网学习新知识!</span>
</div>
<div class="c2">
<div><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/></div>
<span>欢迎来带慕课网学习新知识!</span>
</div>
</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，代码效果正确。不过可以优化：
另，布局有一些繁琐了，无需分为两个div去实现上层和下层，可以使用一个div实现哦。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题