zoukankan      html  css  js  c++  java
  • 五环

    HTML代码
    <!DOCTYPE html>
    <html>
    <head>
    <title>五环</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="wuhuan.css">
    </head>
    <body>
    <div class="wuhuan">
    <div class="blue"><div class="blue1"><div class="black"><div class="black1"><div class="red"><div class="red1"><div class="yellow"><div class="yellow1"><div class="green"><div class="green1"></div></div></div></div></div></div></div></div></div>


    </div>

    </div><div class="wenzi">奥林匹克标志(Olympic Logo /Symbole Olympique/Olympic Rings)是<br>由皮埃尔·德·顾拜旦先生于1913年构思设计的,是由《奥林匹克宪章》确定的,<br>也被称为奥运五环标志,它是世界范围内最为人们广泛认知的奥林匹克运动会标<br>志。它由5个奥林匹克环套接组成,有蓝、黄、黑、绿、红5种颜色。环从左到右互<br>相套接,上面是蓝、黑、红环,下面是黄、绿环。整个造形为一个底部小的规则梯形。
    </div>
    <br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>
    </html>

    css代码

    .wuhuan{
    position:fixed;
    left:200px;
    top:100px;
    }
    .wenzi{
    color:green;
    }

    .blue{
    100px;
    height:100px;
    position:relative;
    left:100px;
    top:100px;
    padding:10px;
    border:10px solid blue;
    border-radius:50%;
    }
    .blue1{
    100px;
    height:100px;
    background-color:transparent;
    border-radius:50%;
    }


    .black{
    100px;
    height:100px;
    position:absolute;
    left:150px;
    top:-10px;
    padding:10px;
    border:10px solid black ;
    border-radius:50%;
    }
    .black1{
    100px;
    height:100px;
    background-color:transparent;
    border-radius:50%;
    }


    .red{
    100px;
    height:100px;
    position:absolute;
    left:150px;
    top:-10px;
    padding:10px;
    border:10px solid red ;
    border-radius:50%;
    }
    .red1{
    100px;
    height:100px;
    background-color:transparent;
    border-radius:50%;
    }


    .yellow{
    100px;
    height:100px;
    position:absolute;
    left:-265px;
    top:50px;
    padding:10px;
    border:10px solid yellow ;
    border-radius:50%;
    }
    .yellow1{
    100px;
    height:100px;
    background-color:transparent;
    border-radius:50%;
    }
    .green{
    100px;
    height:100px;
    position:absolute;
    left:150px;
    top:-10px;
    padding:10px;
    border:10px solid green ;
    border-radius:50%;
    }
    .green1{
    100px;
    height:100px;
    background-color:transparent;
    border-radius:50%;
    }

  • 相关阅读:
    Git .gitignore文件简介及使用
    JMeter 报告监听器导入.jtl结果文件报错解决方案
    JMeter 中实现发送Java请求
    JMeter 正则表达式提取器结合ForEach控制器遍历提取变量值
    Tomcat_记一次tomcatwar包应用简单部署过程
    Python_基于Python同Linux进行交互式操作实现通过堡垒机访问目标机
    Python_关于多线程下变量赋值取值的一点研究
    JMeter 后置处理器之正则表达式提取器详解
    性能测试 CentOS下结合InfluxDB及Grafana图表实时展示JMeter相关性能数据
    Python 标准类库-数据类型之copy-深拷贝浅拷贝操作
  • 原文地址:https://www.cnblogs.com/l-mz/p/9751934.html
Copyright © 2011-2022 走看看