绘制五环

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>

相关文章

LeetCode 73. Set Matrix Zeroes

用matrix[0][j] 记录第j列是否为0 用matrix[i][0]记录第i行是...

笨办法学Python第十一天:那是什么?

在第十天我们学习了一些新东西,看到两种让字符串扩展到多行的方法。 第一种...

电脑常识C# .NET Core 3.1 中 AssemblyLoadContext 的基本使用

电脑常识C# .NET Core 3.1 中 AssemblyLoadContext 的基本使用

电脑常识C# .NET Core 3.1 中 AssemblyLoadContext 的...

1159:斐波那契数列

1159:斐波那契数列

【题目描述】 用递归函数输出斐波那契数列第n项。0,1,1,...

发表评论    

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