麻烦老师帮忙看看,非常感谢

来源: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回答

好帮手慕码

2019-08-12

同学你好!

代码效果实现的不错,继续加油

如果帮助到了你 欢迎采纳 祝学习愉快~

0

0 学习 · 40143 问题

查看课程