zoukankan      html  css  js  c++  java
  • 画奥运五环

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        * {margin: 0;padding: 0;}
        .box {
            380px;height: 186px;
            position: absolute;
            top: 50%;left: 50%;
            margin-top: -93px; margin-left: -190px;
            /* 盒子整体在浏览器居中 */
        }
        .box div {
            100px;height: 100px;
            border: 10px solid black;
            border-radius: 50%;
            /* 画圆 */
            position: absolute;
        }
        .box .circle1 {
            border-color: red;
            top: 0;left: 0;
        }
        .box .circle2 {
            border-color: green;
            top: 0;left: 130px;
            z-index: 1;
            /* 提升层级 */
        }
        .box .circle3 {
            border-color: yellow;
            top: 0;left: 260px;
        }
        .box .circle4 {
            border-color: blue;
            top: 70px;left: 65px;
        }
        .box .circle5 {
            border-color: purple;
            top: 70px;left: 195px;
        }
        /* 每个⚪设置各自颜色,添加偏移量 */
        </style>
    </head>
    <body>
        <div class="box">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
            <div class="circle5"></div>
        </div>
    </body>
    </html>

  • 相关阅读:
    python不是内部或外部命令
    Fix: The account is not authorized to log in from this station
    mac 下安装caffe(一)
    mac下安装tensorflow及入门例子
    tensorflow移植到ios
    ios添加麦克风访问权限
    ios 使用Starscream实现websocket简单例子
    使用Carthage安装及使用第三方库
    Homebrew 命令
    mac Homebrew Updating慢,替换及重置Homebrew默认源
  • 原文地址:https://www.cnblogs.com/1234just/p/13746136.html
Copyright © 2011-2022 走看看