请老师帮忙检查一下,谢谢!
来源:2-14 编程练习
weibo_慕婉清1565219
2019-10-23 10:29:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.container{
width: 1000px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.conter1{
background-color: #33CCFF;
width: 1000px;
height: 250px;
}
.left1{
float: left;
margin: 15px 93px;
}
.right1{
float: right;
margin: 15px 93px 15px 0;
}
.conter2{
background-color: #FF99FF;
width: 1000px;
height: 100px;
}
img{
display: inline-block;
}
.left2{
float: left;
margin: 18px 100px;
}
.middle2{
float: left;
margin: 18px 100px 18px 0;
}
.right2{
float: right;
margin: 18px 100px 18px 0;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="conter1">
<div class="left1">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg">
</div>
<div class="right1">
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg">
</div>
</div>
<div class="conter2">
<div class="left2">
<img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg">
</div>
<div class="middle2">
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg">
</div>
<div class="right2">
<img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg">
</div>
</div>
</div>
</body>
</html>
1回答
同学你好!
代码效果实现的是可以的。
如果帮到了你,欢迎采纳,祝学习愉快~
相似问题