麻烦老师批改，谢谢！
来源：2-14 编程练习
慕仔4144401
2019-11-05 11:15:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
body{
margin:0;
padding:0;
}
img{display:block;}
.clear{clear:both;}
.header{ width:100%;
background-color: #add8e6;
}
.header .header_xinxi{ width:1000px;
margin:0 auto;
padding:20px;
}
.header_left{float:left;}
.header_right{float:right;}
.footer{width:100%;
background-color:pink;
}
.footer_xinxi{ width:1000px;
margin:0 auto;
}
.footer_xinxi .footer_one{float:left; padding:20px 0;}
.footer_xinxi .footer_three{float:right;}
.footer_xinxi .footer_two{padding-left:200px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="header_xinxi">
<div class="header_left">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg"/>
</div>
<div class="header_right">
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg"/>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<div class="footer_xinxi">
<div class="footer_one">
<img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg"/>
</div>
<div class="footer_one footer_two">
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg"/>
</div>
<div class="footer_one footer_three">
<img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"/>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
1回答
-
好帮手慕言
2019-11-05
同学你好，测试同提供的代码，是不符合效果图的，间距不一致，如下图
建议：本题使用固定宽度。例如上部分总宽度1000px减去两张图片的宽度（360px*2），剩余280px ,一共三处间距，所以每一处约为93.33px。（下部分也是按照这个思路去计算）。
代码参考：
同学可以修改后再测试下。
祝学习愉快~
0
相似问题