3-4 编程练习 float浮动练习题）我写出来了 但是感觉怪怪的，老师可以帮我看看怎么改改。
来源：3-4 编程练习
Rain_2020
2019-11-14 10:21:50
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
*{margin:0px; padding:0px;}
.centainer{
width: 790px;
padding: 20px 0 0 20px;
border:1px dashed #e2e2e2;}
.div1,.div2{
overflow:hidden;
margin:0px 0;
zoom:1;}
.div2 ul li,.div1 ul li{
list-style:none;
border:1px solid #999999;
margin:0 20px 20px 0;
float:left;}
a{
display:block;
list-style:none;
text-decoration:none;
padding:5px 10px;
color:#333333;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="centainer">
<div class="div1">
<ul>
<li class="li1"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/><a href="#">欢迎来到这里学习新知识！</a></li>
<li class="li2"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/><a href="#">欢迎来到这里学习新知识！</a></li>
<li class="li3"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/><a href="#">欢迎来到这里学习新知识！</a></li>
</ul>
</div>
<div class="div2">
<ul>
<li class="li4"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/><a href="#">欢迎来到这里学习新知识！</a></li>
<li class="li5"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/><a href="#">欢迎来到这里学习新知识！</a></li>
<li class="li6"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/><a href="#">欢迎来到这里学习新知识！</a></li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕码
2019-11-14
同学你好，布局有一些复杂了，可以优化如下，html：
css：
li的宽高：
效果：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
1
相似问题
回答 4
回答 1