javaweb五环广告居中
liu.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>刘</title>
<link rel = "stylesheet" type = "text/css"
href = "MyHtml.css">
<style type = "css/text">
</style>
</head>
<body>
<div class = "plat">
<div class = "circle1"></div>
<div class = "circle2"></div>
<div class = "circle3"></div>
<div class = "circle4"></div>
<div class = "circle5"></div>
</div>
</body>
</html>
liu.css
*{
padding:0;
margin:0;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
position:absolute;
width:100px;
height:100px;
border:10px solid black;
border-radius:50%;
}
.plat{
position:absolute;
left:50%;
top:50%;
margin-left:-190px;
margin-top:-93px;
height:185px;
width:380px;
}
.circle1{
border-color:red;
left:0;
top:0;
}
.circle2{
border-color:green;
left:130px;
top:0;
z-index:3;
}
.circle3{
border-color:yellow;
left:260px;
top:0;
}
.circle4{
border-color:blue;
left:65px;
top:70px;
}
.circle5{
border-color:purple;
left:195px;
top:70px;
}