HTML实现奥运五环

wuchangjian2021-11-15 17:49:20编程学习
<!DOCTYPE html>
<html>
<head>
    <title>奥运五环</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        width: 780px;
        height: 370px;
        border:1px solid black;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -390px;
        margin-top: -185px;
    }
    .circle{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
    }
    /*蓝黑红黄绿*/
    .blue{
        border:20px solid blue;
    }
    .blue2{
        border:20px solid transparent;
        border-right-color: blue;
        z-index: 2;
    }
    .black{
        border:20px solid black;
        left: 270px;
    }
    .black2{
        border:20px solid transparent;
        border-bottom-color: black;
        border-right-color: black;
        left: 270px;
        z-index: 2;
    }
    .red{
        border:20px solid red;
        left: 540px;
    }
    .red2{
        border:20px solid transparent;
        border-left-color: red;
        left: 540px;
        z-index: 2;
    }
    .yellow{
        border:20px solid yellow;
        left: 140px;
        top:130px;
    }
    .green{
        border:20px solid green;
        left: 410px;
        top:130px;
    }
    .green2{
        border:20px solid transparent;
        border-left-color: green;
        left: 410px;
        top:130px;
        z-index: 2;
    }
</style>
</head>
<body>
    <div class="wrapper">
        <div class = "circle blue"></div>
        <div class = "circle blue2"></div>
        <div class = "circle black"></div>
        <div class = "circle black2"></div>
        <div class = "circle red"></div>
        <div class = "circle red2"></div>
        <div class = "circle yellow"></div>
        <div class = "circle green"></div>
        <div class = "circle green2"></div>
    </div>
</body>
</html>

相关文章

Java秒杀系统(三):整体业务流程介绍与数据库设计

Java秒杀系统(三):整体业务流程介绍与数据库设计

摘要:本篇博文是“Java秒杀系统实战系列文章”的第三篇,本...

Python爬虫通过cookie跳过登录访问页面

1、 什么是Cooki         Cookies是一种能够让网站服务器把少量数据...

Linux基础学习笔记

系统底层安全控制及其优化方法 1.用户及其用户组存在的意义 目录 系统底层安全控制...

[前端学习笔记4]HTML基本结构~

<!-- 文档声明,声明当前网页的版本 --><!doc...

第1篇:window入侵排查

第1篇:window入侵排查

0x00 前言 当企业发生黑客入侵、系统崩溃或其它影响业务正常运行的安全事件时...

发表评论    

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