2-14编程练习 老师帮忙看看 谢谢
来源：2-14 编程练习
幕布斯0094879
2019-08-12 20:23:14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
padding: 0;
margin: 0;
}
.container{
width: 80%;
height: 400px;
margin: 0 auto;
background: blue;
}
.top{
width: 100%;
height: 300px;
background: skyblue;
position: relative;
overflow: hidden;
}
.bottom{
width: 100%;
height: 100px;
background: pink;
position: relative;
}
.left{
width: 35%;
float: left;
margin-left: 10%;
position: absolute;
top: 50%;
margin-top: -10.5%;
}
.right{
width: 35%;
float: left;
margin-left: 55%;
position: absolute;
top: 50%;
margin-top: -10.5%;
}
.left img{
width: 100%;
height: 100%;
}
.right img{
width: 100%;
height: 100%;
}
.left1{
width: 20%;
float: left;
margin-left: 10%;
position: absolute;
top: 50%;
margin-top: -3%;
}
.left1 img{
width: 100%;
height: 100%;
}
.middle{
width: 20%;
float: left;
margin-left: 40%;
position: absolute;
top: 50%;
margin-top: -3%;
}
.middle img{
width: 100%;
height: 100%;
}
.right1{
width: 20%;
float: right;
margin-left: 70%;
position: absolute;
top: 50%;
margin-top: -3%;
}
.right1 img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="top">
<div class="left"><img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" /></div>
<div class="right"><img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" /></div>
</div>
<div class="bottom">
<div class="left1"><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" /></div>
<div class="middle"><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" /></div>
<div class="right1"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" /></div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，这样实现是可以的，但是跟着分辨率的改变，上下的间距也会改变。建议：这里可以试验固定的宽高来设置下哦。
祝学习愉快！
0
相似问题