Making five links with html+css (minimal code)

Making five links with html+css (minimal code)
Five rings
Make the five rings into a floating, always in the middle of the screen.

difficulty
position: fixed

When in the middle of the body, left: 50%; top:50%;

Use style="text/css" in css

Method
Use border radius: 50% plus z-index to set the cascade relationship
First, we use five block level elements to form the color and shape of five rings, and place the five rings in a parent container div, and then place the parent element div in the middle of the browser.
Design notes
The role of div: div is a block level element. It can divide html into independent and different parts. If the div is marked with id and class, then the tag can be used by css to become more effective, and various styles can be designed through id or class.

Design details
html design:

First, set class to five rings to use for css file association style, and put these five rings into a parent div

div class ="plat">

<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>

css style design:

By binding the set class in html, draw the shape, size and position of the five rings

.a1,.a2,.a3,.a4,.a5{

                 position:absolute;  
                 width: 100px;
                 height: 100px;
                 background-color: transparent;
                 border: 10px solid;
                 border-radius: 110px;
         }

Draw the color and location of each ring:

     .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;
     }

Where to design the parent div:

First of all, we need to know that the five rings we designed are inside the div, so adjusting the location of the div can achieve the browser centered i effect.

.plat{


            position: fixed;
            top: 50%;
            left: 50%;
            margin-left:-140px;
            margin-top: -70px;
            width: 280px;
            height: 140px;
        }

Code

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Central five rings</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>

Effect
Original address https://www.cnblogs.com/gzyc/p/10604474.html

Keywords: Front-end

Added by blackwinged on Mon, 02 Dec 2019 02:40:42 +0200

Programming VIP

Making five links with html+css (minimal code)

Popular Keywords