绘制五环

wuchangjian2021-11-16 06:34:15编程学习

div class =“plat”>





css样式:

.a1,.a2,.a3,.a4,.a5{
position:absolute;
width: 100px;
height: 100px;
background-color: transparent;
border: 10px solid;
border-radius: 110px;
}

     .a1{
         border-color: blue;
         left: 0;
         top: 0; 
     }
     .a2{
         border-color: black;
         top: 0px;
         left: 130px;
         z-index: 4;
     }
     .a3{
         border-color: yellow;
         top: 0px;
         left: 260px;
         z-index: 4;
     }
     .a4{
         border-color: red;
         top: 65px;
         left: 65px;
         z-index: 5; 
     }
     .a5{
         border-color: green;
         top: 65px;
         left: 198px;
         z-index: 6;
     }

.plat{

            position: fixed;
            top: 50%;
            left: 50%;
            margin-left:-140px;
            margin-top: -70px;
            width: 280px;
            height: 140px;
        }
<html >
<head>
    <meta charset="UTF-8">
    <title>居中五环</title>
    <style type="text/css">
        .a1,.a2,.a3,.a4,.a5{
                position:absolute;  
                width: 100px;
                height: 100px;
                background-color: transparent;
                border: 10px solid;
                border-radius: 110px;
        }
        .plat{    
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left:-140px;
            margin-top: -70px;
            width: 280px;
            height: 140px;
        }
        .a1{
            border-color: blue;
            left: 0;
            top: 0;
        }
        .a2{
            border-color: black;
            top: 0px;
            left: 130px;
            z-index: 4;
        }
        .a3{
            border-color: yellow;
            top: 0px;
            left: 260px;
            z-index: 4;
        }
        .a4{
            border-color: red;
            top: 65px;
            left: 65px;
            z-index: 5;
        }
        .a5{
            border-color: green;
            top: 65px;
            left: 198px;
            z-index: 6;
        }
    </style>
    
<body>
<div class ="plat"> 
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
    <div class="a5"></div>
<div>

标题

</body>
</html>

相关文章

DBeaverEE for Mac(数据库管理工具)企业版

DBeaverEE for Mac(数据库管理工具)企业版

Mac哪款数据库管理工具好用呢?DBeaverEE for Mac是一款运...

JavaScript 垃圾回收机制

JavaScript 垃圾回收机制

目录 一、javascript垃圾回收机制 标记清除 引用计数 二、减少Java...

2022中国品牌500强揭晓,湖南15家企业上榜

2022中国品牌500强揭晓,湖南15家企业上榜

2022-08-10 14:47:47 8月8日,由品牌联盟、中国会展...

docker安装Mysql8.0的坑

学习日记 成功安装MySQL8.0后没有任何问题  然后启动测试项目报错...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。