五环
2018-11-23 本文已影响0人
开心的小哈
html
<!DOCTYPE html>
<html lang="en,zh">
<head>
<link rel="stylesheet" type="text/css" href="css/new_file.css" />
</head>
<div class="plat">
<div class="adsf1"></div>
<div class="adsf2"></div>
<div class="adsf3"></div>
<div class="adsf4"></div>
<div class="adsf5"></div>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
.plat{
position: fixed;
left: 50%;
top: 50%;
margin-left: -175px;
margin-top: -87.5px;
border: 2px solid #000000;
width: 350px;
height: 175px;
}
.adsf1,
.adsf2,
.adsf3,
.adsf4,
.adsf5{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid black;
}
.adsf1{
border-color: aqua;
left: 0;
top: 0;
}
.adsf2{
border-color: blue;
left: 120px;
top: 0;
}
.adsf3{
border-color: chartreuse;
left: 240px;
top: 0;
}
.adsf4{
z-index: 1;
border-color: brown;
left: 60px;
top: 55px;
}
.adsf5{
z-index: 1;
border-color: fuchsia;
left: 180px;
top: 55px;
}
TIM图片20181123095600.png
