XiaoweiSchool task4 modified

paleomoon · Mar 6, 2017 · b52ca59 · b52ca59
1 parent 69522f2
commit b52ca59
Showing 1 changed file with 20 additions and 30 deletions.
diff --git a/XiaoweiSchool/task4/task4.html b/XiaoweiSchool/task4/task4.html
@@ -7,62 +7,52 @@
 			margin: 0;
 			padding: 0;
 		}
-		.parent{
-			width: 60%;
-			height: 670px;
-			border: 1px solid #aaa;
-			position: relative;
-		}
-		.child{
+
+		.box{
 			width: 400px;
 			height: 200px;
 			background-color: #ccc;
-			margin:0 auto;/*水平居中*/
+			overflow: hidden;
 
-			/*垂直居中*/
-			position: relative;
+			position: absolute;
 			top: 50%;/* 父元素高度的50% */
-			margin-top: -100px;
-  			/*transform: translateY(-50%);/* 转换 向上移动自身高度的50% */
-
-			overflow: hidden;
+			left: 50%;
+			margin: -100px 0 0 -200px;
+			/*transform: translate(-50%, -50%);/* 移动自身高度的50% */
 		}
-		.left_top{
+		.left_top,
+		.right_bottom{
 			width: 100px;
 			height: 100px;
 			background-color: #fc0;
 			-moz-border-radius:50%;
 		    -webkit-border-radius:50%;
 			border-radius: 50%;
 			position: absolute;
+
+		}
+		.left_top{
 			left: -50px;
 			top: -50px;
 		}
 		.right_bottom{
-			width: 100px;
-			height: 100px;
-			background-color: #fc0;
-			-moz-border-radius:50%;
-		    -webkit-border-radius:50%;
-			border-radius: 50%;
-			position: absolute;
 			right: -50px;
 			bottom: -50px;
 		}
 	</style>
 </head>
 <body>
-<div class="parent">
-	<div class="child">
-		<div class="left_top">
-
-		</div>
-		<div class="right_bottom">
-
-		</div>
+
+<div class="box">
+	<div class="left_top">
+
+	</div>
+	<div class="right_bottom">
+
 	</div>
 </div>
 
 
+
 </body>
 </html>