感觉解答这个题时 思路不对，请老师检查下我代码，顺便提供下思路。。。
来源：2-14 编程练习
纵有疾风起呵
2019-04-18 16:56:01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.quanju{width: 1200px;height: 500px;position: absolute;}
.toubu{width: 1200px;height: 500px;background: steelblue;margin-left: 250px;margin-top: 120px;}
.dibu{width: 1200px;height: 200px;background: violet;margin-left: 250px;}
.tu1{}
.tu1 img{margin-top:130px;float: left;margin-left: 160px;}
.tu2 img{margin-top:130px; float: left;margin-left: 160px;}
.tu3 img{margin-top: 70px;margin-left: 150px;}
</style>
</head>
<body>
<div class="quanju">
<div class="toubu">
<div class="tu1">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" />
</div>
<div class="tu2">
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" />
</div>
</div>
<div class="dibu">
<div class="tu3">
<img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" >
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" >
<img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg">
</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，1、 根据练习要求，整体需要水平居中， 建议修改：给最外层盒子设置左右外边距为auto， 实现水平居中。这样就不需要为上下行的盒子设置左外边距了
2、由于img标签自带间距，导致与其他元素有空隙， 例
建议修改： 给父级元素设置font-size: 0;消除这种间距
编程题没有标准答案哦，只要实现了要求的效果就是可以的。同学的思路没有什么问题哦。 这里提供另一个参考布局思路， 如下图:
HTML结构
CSS样式
另，问答区域经常会有一些同学分享自己的代码 , 同学也可以去问答区学习一下 .看看其他同学是如何实现的。吸取一些经验， 对自己也是有很多帮助的哦。
如果帮助到了你，欢迎采纳
祝学习愉快~~~
0
相似问题