HTML+CSS编写五环居中案例

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</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>

 

css代码如下

* {
    margin: 0;
    padding: 0;
}

.plat {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -190px;
    margin-top: -93px;
    height: 186px;
    width: 380px;
}

.circle1,
.circle2,
.circle3,
.circle4,
.circle5 {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 50%;
}

.circle1 {
    border-color: red;
    left: 0;
    top: 0;
}

.circle2 {
    border-color: green;
    left: 130px;
    top: 0px;
    z-index: 3;
}

.circle3 {
    border-color: yellow;
    left: 260px;
    top: 0px;
}

.circle4 {
    border-color: olive;
    left: 65px;
    top: 65px;
}

.circle5 {
    border-color: pink;
    left: 195px;
    top: 65px;
}

结果显示如下：

 

 

参考自腾讯课堂！

 

谢谢

 

posted @ 2019-08-29 14:20  宝山方圆  阅读(417)  评论(0)  编辑  收藏  举报