Draw a track field, can play the World Cup?

The HTML code

<div class="box1">
    <div class="box2">
        <div class="box3">
            <div class="box4">
                <div class="box5">
                    <div class="box6">
                        <div class="box7">
                            <div class="box8">
                                <div class="boxRect">
                                    <div class="boxCirc"></div>
                                    <div class="boxRectLeft1"></div>
                                    <div class="boxRectRight1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Copy the code

CSS styles

.box1 {
    background-color: #DA251E;
    /* Here we use a CSS expression to add, subtract, multiply and divide */
    width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*0*2);
    height: calc(360px*2 - 12.2 px.*0*2);
    margin: 100px auto;
    border: 0.5 px. white solid;
    / * rounded corners * /
    border-radius: calc(360px - 12.2 px.*0) / 50%;
    / * * / box
    box-sizing: border-box;
}

.box2 {
    width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*1*2);
    height: calc(360px*2 - 12.2 px.*1*2);
    margin: 12.2 px. auto;
    border: 0.5 px. white solid;
    border-radius: calc(360px - 12.2 px.*1) / 50%;
    box-sizing: border-box;
}

.box3 {
    width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*2*2);
    height: calc(360px*2 - 12.2 px.*2*2);
    margin: 12.2 px. auto;
    border: 0.5 px. white solid;
    border-radius: calc(360px - 12.2 px.*2) / 50%;
    box-sizing: border-box;
}

.box4 {
    width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*3*2);
    height: calc(360px*2 - 12.2 px.*3*2);
    margin: 12.2 px. auto;
    border: 0.5 px. white solid;
    border-radius: calc(360px - 12.2 px.*3) / 50%;
    box-sizing: border-box;
}

.box5 {
    width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*4*2);
    height: calc(360px*2 - 12.2 px.*4*2);
    margin: 12.2 px. auto;
    border: 0.5 px. white solid;
    border-radius: calc(360px - 12.2 px.*4) / 50%;
    box-sizing: border-box;
}

.box6 {
    width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*5*2);
    height: calc(360px*2 - 12.2 px.*5*2);
    margin: 12.2 px. auto;
    border: 0.5 px. white solid;
    border-radius: calc(360px - 12.2 px.*5) / 50%;
    box-sizing: border-box;
}

.box7 {
    width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*6*2);
    height: calc(360px*2 - 12.2 px.*6*2);
    margin: 12.2 px. auto;
    border: 0.5 px. white solid;
    border-radius: calc(360px - 12.2 px.*6) / 50%;
    box-sizing: border-box;
}

.box8 {
    background-color: #00923F;
    width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*7*2);
    height: calc(360px*2 - 12.2 px.*7*2);
    margin: 12.2 px. auto;
    border: 0.5 px. white solid;
    border-radius: calc(360px - 12.2 px.*7) / 50%;
    box-sizing: border-box;
}

.boxRect {
    width: calc(1719.2 px./2);
    height: calc(360px*2 - 12.2 px.*7*2 - 10px);
    margin: 5px auto;
    border: 0.5 px. white solid;
    box-sizing: border-box;
}

.boxCirc {
    width: 100px;
    height: 100px;
    margin: calc((360px*2 - 12.2 px.*7*2 - 10px - 100px) /2) auto;
    border: 0.5 px. white solid;
    border-radius: 50%;
    box-sizing: border-box;
}

.boxRectLeft1 {
    width: 100px;
    height: 200px;
    margin-top: calc(-360px*2/2 + 12.2 px.*7*2/2 + 10px - 200px/2);
    border: 0.5 px. white solid;
    box-sizing: border-box;
}

.boxRectRight1 {
    width: 100px;
    height: 200px;
    margin-top: calc(-360px*2/2 + 12.2 px.*7*2/2 + 10px + 50px);
    margin-left: calc(1719.2 px./2 - 100px);
    border: 0.5 px. white solid;
    box-sizing: border-box;
}
Copy the code

rendering

Because we haven’t learned much about layout positioning so far, some other details are difficult to draw

Here is about to draw a prototype out, and so on after learning absolute positioning and relative positioning, then do supplement and improve, will be relatively easy

Perfect green football field

With the float, we can finally move on to perfecting the green football pitch

Without further ado, let’s get right to the code

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Track and field</title>
    <style>
        /* Public part */
        .box1..box2..box3..box4..box5..box6..box7..box8..boxRect..boxColLine..boxRectLeft1..boxRectLeft2..boxCircLeft..boxCirc..boxCircRight..boxRectRight1..boxRectRight2..football {
            box-sizing: border-box;
            border: 0.5 px. white solid;
        }

        .box2..box3..box4..box5..box6..box7..box8 {
            margin: 12.2 px. auto;
        }

        .boxRectLeft1..boxRectLeft2..boxCircLeft {
            float: left;
            /* Remove the left border */
            border-left: none;
        }

        .boxCircRight..boxRectRight1..boxRectRight2 {
            float: right;
            /* Remove the right border */
            border-right: none;
        }

        /* ========== track and Field ========== */
        .box1 {
            background-color: #DA251E;
            width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*0*2);
            height: calc(360px*2 - 12.2 px.*0*2);
            margin: 100px auto;
            border-radius: calc(360px - 12.2 px.*0) / 50%;
        }

        .box2 {
            width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*1*2);
            height: calc(360px*2 - 12.2 px.*1*2);
            border-radius: calc(360px - 12.2 px.*1) / 50%;
        }

        .box3 {
            width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*2*2);
            height: calc(360px*2 - 12.2 px.*2*2);
            border-radius: calc(360px - 12.2 px.*2) / 50%;
        }

        .box4 {
            width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*3*2);
            height: calc(360px*2 - 12.2 px.*3*2);
            border-radius: calc(360px - 12.2 px.*3) / 50%;
        }

        .box5 {
            width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*4*2);
            height: calc(360px*2 - 12.2 px.*4*2);
            border-radius: calc(360px - 12.2 px.*4) / 50%;
        }

        .box6 {
            width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*5*2);
            height: calc(360px*2 - 12.2 px.*5*2);
            border-radius: calc(360px - 12.2 px.*5) / 50%;
        }

        .box7 {
            width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*6*2);
            height: calc(360px*2 - 12.2 px.*6*2);
            border-radius: calc(360px - 12.2 px.*6) / 50%;
        }

        .box8 {
            background-color: #00923F;
            width: calc(1719.2 px./2 + 360px*2 - 12.2 px.*7*2);
            height: calc(360px*2 - 12.2 px.*7*2);
            border-radius: calc(360px - 12.2 px.*7) / 50%;
        }

        /* ========== Green football pitch ========== */
        .boxRect {
            width: calc(1719.2 px./2);
            height: calc(360px*2 - 12.2 px.*7*2 - 10px);
            margin: 5px auto;
        }

        .boxRectLeft1 {
            width: 100px;
            height: 200px;
            margin-top: calc(360px*2/2 - 12.2 px.*7*2/2 - 10px/2 - 200px/2);
        }

        .boxRectLeft2 {
            width: 50px;
            height: 100px;
            margin-top: calc(200px/2 - 100px/2);
        }

        .boxCircLeft {
            width: 50px;
            height: 100px;
            margin-top: calc(360px*2/2 - 12.2 px.*7*2/2 - 10px/2 - 100px/2);
            border-radius: 0 100px 100px 0;
        }

        .boxCirc {
            float: left;
            width: 100px;
            height: 100px;
            margin: calc(360px*2/2 - 12.2 px.*7*2/2 - 10px/2 - 100px/2) auto;
            margin-left: calc(1719.2 px./2/2 - 100px - 50px - 100px/2);
            border-radius: 50%;
        }

        .boxCircRight {
            width: 50px;
            height: 100px;
            margin-top: calc(360px*2/2 - 12.2 px.*7*2/2 - 10px/2 - 100px/2);
            border-radius: 100px 0 0 100px;
        }

        .boxRectRight1 {
            width: 100px;
            height: 200px;
            margin-top: calc(360px*2/2 - 12.2 px.*7*2/2 - 10px/2 - 200px/2);
        }

        .boxRectRight2 {
            width: 50px;
            height: 100px;
            margin-top: calc(200px/2 - 100px/2);
        }

        .boxColLine {
            width: 0;
            height: 100%;
            margin-left: calc(1719.2 px./2/2);
            /* Border style */
            border: 0.25 px. white dashed;
        }

        /* ========== football ========== */
        .football {
            float: right;
            width: 10px;
            height: 10px;
            background-color: black;
            margin: 100px;
            border-radius: 50%;
        }
    </style>
</head>

<body>

    <div class="box1">
        <div class="box2">
            <div class="box3">
                <div class="box4">
                    <div class="box5">
                        <div class="box6">
                            <div class="box7">
                                <div class="box8">
                                    <div class="boxRect">
                                        <div class="boxRectLeft1">
                                            <div class="boxRectLeft2"></div>
                                        </div>
                                        <div class="boxCircLeft"></div>
                                        <div class="boxCirc"></div>
                                        <div class="boxRectRight1">
                                            <div class="boxRectRight2"></div>
                                        </div>
                                        <div class="boxCircRight"></div>
                                        <! - football -- -- >
                                        <div class="football"></div>
                                        <div class="boxColLine"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
Copy the code

The major changes are as follows:

  • Extract common CSS code
  • usefloatProperties for layout
  • Remove overlapping border styles (color thickens after overlay, remove border styles on the same side here)

Note, however, that since boxColLine is not a float element, it should be placed at the bottom

This allows you to take advantage of the floating nature and prevent any impact on the layout

The final result

I can finally enjoy playing football

Wrong, try again