2018/1/23 日小结（2）

画一个奥运五环
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 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;
           width: 380px;
           height: 186px;
       }
        .circle1{
            border-color: blue;
            left: 0;
            top: 0;
        }
        .circle2{
            z-index: 3;
            border-color: black;
            left: 130px;
            top: 0;
        }
        .circle3{
            border-color: red;
            left: 260px;
            top: 0;
        }
        .circle4{
            border-color: yellow;
            left: 65px;
            top: 70px;
        }
        .circle5{
            border-color: green;
            left: 195px;
            top: 70px;
        }

    </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>
效果展示
2018/1/23 日小结（2）