zoukankan      html  css  js  c++  java
  • 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;
    }

    结果显示如下:

    参考自腾讯课堂!

    谢谢

  • 相关阅读:
    解决sql2008附加不了2005的数据库文件的问题
    方阵
    台阶问题
    螺旋矩阵
    兔子问题
    九乘九乘法口诀
    选猴王
    拿鸡蛋问题
    软工个人作业
    小学四则运算法则训练
  • 原文地址:https://www.cnblogs.com/zhzhang/p/11429455.html
Copyright © 2011-2022 走看看