在网页中间显示一个同心圆

网页文件1.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的网页</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<!-- 同心圆 -->
<div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
<div id="div1" class="son">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</div>

</body> 

</html>

以下是css文件 1.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.father{position: relative;}
.son{position: relative;top:50%;left: 50%;margin-top: -75px;margin-left: -75px;}

/*同心圆：中间黑，然后是绿、红*/

#div1{

position: absolute;

width:150px;
height:150px;
background-color: red;
border-radius: 50%;
}

#div2{
position: absolute;
width:100px;
height:100px;
margin-left: 25px;
margin-top: 25px;
background-color: green;
border-radius: 50%;
}

#div3{
position: absolute;
width: 50px;
height: 50px;
margin-left: 25px;
margin-top: 25px;
background-color: #000;
border-radius: 50%;
}

posted @ 2021-11-19 17:42  paoPaoLong_liu  阅读(117)  评论(0)    收藏  举报