请检查，混合布局作业
来源：2-14 编程练习
一个文艺的IT青年
2020-08-14 16:32:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.top{
background-color: #64BEC9;
width: 100%;
height: 600px;
}
.bottom{
background-color: pink;
width: 100%;
height: 310px;
}
img{
display: inline-block;
}
.top img{
margin-left: 10%;
width: 35%;
height: 400px;
margin-top: 100px;
}
.bottom img{
width: 20%;
margin-left: 10%;
height: 110px;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="top">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg">
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg">
</div>
<div class="bottom">
<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>
</body>
</html>
1回答
-
同学你好，代码中有如下问题：
练习要求“整个盒子在页面中水平居中显示”，同学的内容平铺了整个页面，可以给top和bottom添加个父元素，然后给父元素设置固定宽度并居中，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题