麻烦帮忙看下有啥问题或者有需要改进的地方吗
来源：2-14 编程练习
qq_慕九州2374973
2019-11-07 20:21:15
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.div{width: 1200px; margin: 0 auto}
.top{overflow: hidden;zoom: 1;background-color: #e1f2f9;width: 100%; }
img {display: block;}
.img1,.img2{float: left;width: 360px;height: 215px;margin-left: 160px;margin-top: 20px;margin-bottom: 20px;}
.bottom{overflow: hidden;zoom: 1;background-color: pink;width: 100%;}
.img3,.img4,.img5{float: left;width:200px;height:60px;margin-left:150px;margin-top: 20px;margin-bottom: 20px;}
</style>
</head>
<body>
<div class="div">
<div class="top">
<div class="img1"><img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg"/></div>
<div class="img2"><img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg"/></div>
</div>
<div class="bottom">
<div class="img3"><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg"/></div>
<div class="img4"><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg"/></div>
<div class="img5"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"/></div>
</div>
</div>
</body>
</html>
最近学习也遇到一些瓶颈，css样式的代码有时候会乱用，例如float和position等，布局的时候经常搞混，有些代码也是想当然的写。大佬可以指教一下吗，该怎么构思css代码，才方便后期维护
1回答
-
同学你好，对于你的问题解答如下：
1、作业效果实现很好。
2、在学习的过程中，总会遇到各种各样的问题，遇到听不懂，理解不了的问题也是会不断出现，其实这都是正常的现象，要是一看就懂，一听就懂，那就不需要老师了，大家自学都能学会了。尤其是IT技术，是比较抽象、难理解的。不过同学也不用着急，遇到不会的，可以再看下视频，看是否是有遗漏的知识点，第二遍听的时候可以根据第一遍学会的点进行分析和思考，好多问题就会迎刃而解。甚至可以多遍的听课。听了多遍之后还是没有听懂，可以自己查资料，或者来问问答区老师，老师会为你答疑解惑。
3、关于同学说到的float与position在刚开始使用的时候，的确容易搞混。
不过，浮动，主要的作用是使元素在一行显示，所以，若是我们要使元素在一行显示的时候，就可以固定。而定位，是设置一个元素的位置。比如，我这个元素要覆盖到另一个上面，或者是要使用top
left等来调整位置，就可以使用定位哦。
css布局的话，要按照从左到右，由上而下一步步的来实现哦。
如果我的回答帮助到了你，欢迎采纳。
祝学习愉快~
0
相似问题