五环

作者: 开心的小哈 | 来源:发表于2018-11-23 09:56 被阅读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

    相关文章

      网友评论

          本文标题:五环

          本文链接:https://www.haomeiwen.com/subject/eobdqqtx.html