麻烦老师帮忙看看,非常感谢
来源:2-14 编程练习
duqinaerfa
2019-08-12 18:56:57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin: 0;
padding: 0;
}
.container{
width: 1000px;
height: 600px;
}
.top{
width: 1000px;
height: 400px;
background: lightblue;
}
.bottom{
width: 1000px;
height: 200px;
background: pink;
}
.p1{
width: 400px;
height: 300px;
float: left;
margin: 50px 33.34px 50px 66.67px;
}
.p2{
width: 400px;
height: 300px;
float: left;
margin: 50px 66.67px 50px 33.34px;
}
.p3{
width: 250px;
height: 150px;
float: left;
margin: 25px 31.25px 25px 62.5px;
}
.p4{
width: 250px;
height: 150px;
float: left;
margin: 25px 31.25px;
}
.p5{
width: 250px;
height: 150px;
float: left;
margin: 25px 62.5px 25px 31.25px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="top">
<div class="tl">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" class="p1">
</div>
<div class="tr">
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" class="p2">
</div>
</div>
<div class="bottom">
<div class="bl">
<img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" class="p3">
</div>
<div class="bm">
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" class="p4">
</div>
<div class="br">
<img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" class="p5">
</div>
</div>
</div>
</body>
</html>1回答
同学你好!
代码效果实现的不错,继续加油
如果帮助到了你 欢迎采纳 祝学习愉快~
相似问题