请老师检查，还有什么可以改进的地方
来源：3-4 编程练习
kekeke_
2022-03-03 13:29:03
相关代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0px;
padding: 0px;}
ul{list-style: none;
padding: 10px;
}
.content{
width: 900px;
border: 1px solid blue;
overflow: hidden;
zoom:1;
}
.one{float: left;}
.two{float: left;}
.three{float: left;}
.four{float: left;}
.five{float: left;}
.six{float: left;}
</style>
</head>
<body>
<div class="content">
<div>
<ul class="one">
<li >
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
</li>
<li>
欢迎来到慕课网学习新知识！
</li>
</ul>
</div>
<div>
<ul class="two">
<li >
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
</li>
<li>
欢迎来到慕课网学习新知识！
</li>
</ul>
</div>
<div>
<ul class="three">
<li>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
</li>
<li>
欢迎来到慕课网学习新知识！
</li>
</ul>
</div>
<div>
<ul class="four">
<li>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
</li>
<li>
欢迎来到慕课网学习新知识！
</li>
</ul>
</div>
<div>
<ul class="five">
<li>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
</li>
<li>
欢迎来到慕课网学习新知识！
</li>
</ul>
</div>
<div>
<ul class="six">
<li>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
</li>
<li>
欢迎来到慕课网学习新知识！
</li>
</ul>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，从目前学习到的阶段来说写成这样已经很不错了，如果说想要优化的话，那么可以从结构上优化。如下：
以上相当于如下：
这样写的好处是层级不会那么深。
另外间距上因为设计图没有给出特别的宽高，但是我们是不是可以把整体做个居中显示？如下：
新增属性：
最终效果：
那么按照上图显示父级宽度给的太宽了，我们可以做宽度上的调整，如下：
最终效果如下：
大体上看着ok了，但是设计图每个图片组都会有边框（这里同学还没有学到的话，可以先做了解）。
最终效果如下：
然后在给它们调整一下间距如下：
最终效果如下：
以上只是个优化思路，可能有同学还没有学到的知识点在其中，同学可以先做了解，有兴趣可以先自己尝试尝试。
祝学习愉快！
0
相似问题