请老师纠错,谢谢!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 清除默认 */
*{margin: 0; padding: 0;}
/* 容器 */
.cotainer{ width: 900px; height: 355px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;}
/* 头部 */
.header{width: 900px; height: 255px; background: #add8e6;}
.header .left,.header .right{float: left;margin:20px 0 20px 60px;}
/* 尾部 */
.footer{ width: 900px;height:100px ; background: pink;}
.footer .left,.footer .middle,.footer .right{float: right; margin: 20px 75px 20px 0;}
</style>
</head>
<body>
<!-- 容器 -->
<div class="cotainer">
<!-- 头部 -->
<div class="header">
<div class="left"><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" alt="很抱歉"></div>
<div class="right"><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" alt="很抱歉"></div>
</div>
<!-- 尾部 -->
<div class="footer">
<div class="left"><img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" alt="很抱歉"></div>
<div class="middle"><img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" alt="很抱歉"></div>
<div class="right"><img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" alt="很抱歉"></div>
</div>
</div>
</body>
</html>ps:老师小年快乐!(虽然看到的时候可能已经过去了)
10
收起
正在回答
1回答
同学你好,感谢同学的祝福,也提前祝同学新年快乐~
代码是正确的,但是还可以再优化下,如下:
看下图,会发现内容是稍微有点超出的。这是因为图片本身自带的间距导致的。

建议:可以给图片设置为块级元素去除,例:

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星