画一个田径场

已于 2022-03-17 09:43:45 修改
阅读量634 收藏 1
点赞数
文章标签： css css3 html
于 2022-03-17 09:35:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59708269/article/details/123542413
版权

画了一个田径场，可以踢世界杯吗？

html代码

<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>

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

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

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

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

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

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

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

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

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

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

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

<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>田径场</title>
<style>
/* 公共部分 */
.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7,
.box8,
.boxRect,
.boxColLine,
.boxRectLeft1,
.boxRectLeft2,
.boxCircLeft,
.boxCirc,
.boxCircRight,
.boxRectRight1,
.boxRectRight2,
.football {
box-sizing: border-box;
border: 0.5px white solid;
}

    <span class="token selector">.box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7,
    .box8</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 12.2px auto<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.boxRectLeft1,
    .boxRectLeft2,
    .boxCircLeft</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
        <span class="token comment">/* 去除左边框 */</span>
        <span class="token property">border-left</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.boxCircRight,
    .boxRectRight1,
    .boxRectRight2</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
        <span class="token comment">/* 去除右边框 */</span>
        <span class="token property">border-right</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">/* ==========田径场========== */</span>
    <span class="token selector">.box1</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #DA251E<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1719.2px/2 + 360px*2 - 12.2px*0*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2 - 12.2px*0*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 100px auto<span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px - 12.2px*0<span class="token punctuation">)</span> / 50%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.box2</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1719.2px/2 + 360px*2 - 12.2px*1*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2 - 12.2px*1*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px - 12.2px*1<span class="token punctuation">)</span> / 50%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.box3</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1719.2px/2 + 360px*2 - 12.2px*2*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2 - 12.2px*2*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px - 12.2px*2<span class="token punctuation">)</span> / 50%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.box4</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1719.2px/2 + 360px*2 - 12.2px*3*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2 - 12.2px*3*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px - 12.2px*3<span class="token punctuation">)</span> / 50%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.box5</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1719.2px/2 + 360px*2 - 12.2px*4*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2 - 12.2px*4*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px - 12.2px*4<span class="token punctuation">)</span> / 50%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.box6</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1719.2px/2 + 360px*2 - 12.2px*5*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2 - 12.2px*5*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px - 12.2px*5<span class="token punctuation">)</span> / 50%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.box7</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1719.2px/2 + 360px*2 - 12.2px*6*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2 - 12.2px*6*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px - 12.2px*6<span class="token punctuation">)</span> / 50%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.box8</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #00923F<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1719.2px/2 + 360px*2 - 12.2px*7*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2 - 12.2px*7*2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px - 12.2px*7<span class="token punctuation">)</span> / 50%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">/* ==========绿茵足球场========== */</span>
    <span class="token selector">.boxRect</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1719.2px/2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2 - 12.2px*7*2 - 10px<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 5px auto<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.boxRectLeft1</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2/2 - 12.2px*7*2/2 - 10px/2 - 200px/2<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.boxRectLeft2</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>200px/2 - 100px/2<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.boxCircLeft</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2/2 - 12.2px*7*2/2 - 10px/2 - 100px/2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> 0 100px 100px 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.boxCirc</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2/2 - 12.2px*7*2/2 - 10px/2 - 100px/2<span class="token punctuation">)</span> auto<span class="token punctuation">;</span>
        <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1719.2px/2/2 - 100px - 50px - 100px/2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.boxCircRight</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2/2 - 12.2px*7*2/2 - 10px/2 - 100px/2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> 100px 0 0 100px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.boxRectRight1</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>360px*2/2 - 12.2px*7*2/2 - 10px/2 - 200px/2<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.boxRectRight2</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>200px/2 - 100px/2<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.boxColLine</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
        <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1719.2px/2/2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">/* 边框样式 */</span>
        <span class="token property">border</span><span class="token punctuation">:</span> 0.25px white dashed<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">/* ==========足球========== */</span>
    <span class="token selector">.football</span> <span class="token punctuation">{<!-- --></span>
        <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
        <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</head>

<body>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box6<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box7<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxRect<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxRectLeft1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxRectLeft2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxCircLeft<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxCirc<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxRectRight1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxRectRight2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxCircRight<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token comment">&lt;!-- 足球 --&gt;</span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>football<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxColLine<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

</body>

</html>

这次主要的改动如下：

  • 提取公共css代码
  • 使用float属性进行布局
  • 删除重叠部分边框样式（叠加之后颜色会变粗，这里去掉同一侧的边框样式）

不过需要注意的是由于boxColLine不是float元素，应该放置最下方

这样可以利用浮动的特点，防止对布局产生影响

最终效果

image-20210525004852198

终于可以愉快的踢球了

img

搞错了，再来

img

彭于晏爱编程
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
教你用Python画一个漫画版谷爱凌~
L010409的博客
02-16 1531
最近各大社交媒体可是被谷爱凌给刷屏了，就在2月8日上午，她在北京冬奥会自由式滑雪女子大跳台比赛中获得冠军，以从未在赛场尝试过的高难度动作获得了全场最高分。 不仅如此，谷爱凌在17岁时就已经拥有了六十多枚奖牌，仅在2021-2022赛季世界杯就获得了6金2银1铜共9枚奖牌。除了滑雪，还会钢琴、马术、芭蕾，因为喜欢跑步，还差点成为田径运动员。 她还是个学霸，以1580分的SAT(美国高中生大学入学考试，满分1600)成绩被斯坦福大学录取。她还涉足时尚界，成为众多时尚品牌和刊物的宠儿。 这不是妥
画了一个田径场，可以踢世界杯吗？
VectorX's Blog
05-24 1217
田径场实战
利用CSS3绘制一个简单的操场
Jealyn的个人博客
07-18 5369
伴随着CSS3（CSS Module 3）的发布，我们设计网页时有了更多的选择。对于一些比较简单的小图标和图片，我们可以利用CSS3很方便的进行绘制，从而减少页面的图片数量，增加了网页的访问速度。今天我主要利用CSS3的几个属性，简单的绘制一个操场。我用到的核心属性为： border-radius box-shadow before 和 after 伪元素
react+react-router+redux开发体育馆管理系统（3）--场地类型管理模块开发
可乐会唱歌的博客
07-19 1402
接下来实现的是场地类型管理模块，先把主页的框架写出来，ui库使用的是antd 附官网地址:https://ant.design/index-cn
js实现飞机跑道动画特效
crazyFlex的博客
12-21 607
效果如图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap飞机跑道进度条动画特效 - 站长素材</title> <link rel="stylesheet" href="css/font-awesome.css"> <l...
【Web前端HTML5&CSS3】08-盒模型补充
VectorX's Blog
05-24 1845
盒模型补充及田径场实战 1. 盒子大小 2. 轮廓 3. 阴影 4. 圆角 圆 椭圆
html 跑步比赛小游戏,趣味跑步比赛游戏
weixin_29119475的博客
06-04 201
趣味跑步比赛手机版是一款非常的魔性的休闲跑步小游戏，靓丽的颜色组成了精彩的游戏画面，把玩家带进这个有趣的世界，充满了想象力的那些脑洞大开的跑道的设计十分的好玩，让玩家在不用于一般的赛道之上比赛冲满了惊险和刺激，还要时时刻刻的防备身边的小伙伴的攻击和躲避那些赛道上的奇葩障碍。趣味跑步比赛游戏官方介绍趣味性十足的休闲跑酷类游戏，玩家只需简单的点击就可以享受游戏的乐趣，超轻松的游戏氛围能够带给你很不错的...
秋季运动会开幕词50字 [秋季田径运动会开幕词]
08-19
在50字的简洁篇幅中，秋季田径运动会开幕词需要精炼且富有感染力，既要表达对赛事的期待，也要体现对运动员和工作人员的尊重。 在这个特定的开幕词中，讲话者首先将当前的社会背景——中国申奥成功和中国足球的进步...
起跑线田径运动PPT模板.pptx
01-20
【起跑线田径运动PPT模板】是一个专为田径运动设计的演示文稿模板，旨在帮助用户高效地创建与田径相关的报告、讲座或训练课程。在制作PPT时，选择合适的模板能极大地提升内容的表现力和专业性，节约时间并确保视觉...
运动场墙画CDRX7
12-06
运动场墙画.cdr 图片矢量资源
你能用uml画一个种田游戏的模型吗？
09-12
而Athlete和Result之间是一对多的关系，因为一个运动员在每个项目中都有一个成绩，但一个成绩只对应一个运动员。 以上是一个简单的田径比赛UML模型的示例，具体实现还需要根据实际需要进行调整和完善。 ### 回答2...
playground:操场
05-24
只是一个操场-这里没什么有趣的:)
前端Warning解决：多行文本省略号样式失效丢失,css
weixin_49523082的博客
09-09 240
【代码】前端Warning解决：多行文本省略号样式失效丢失,css。
用CSS 方式设置 table 样式
weixin_45274678的博客
09-09 875
在现代Web开发中，使用CSS来设置table的样式是一种常见且强大的方法，它能让你的表格数据既美观又易于阅读。下面我将通过一个示例来展示如何使用现代CSS技巧来美化表格。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1930
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
CSS —— display属性
m0_73557953的博客
09-08 869
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"（将元素转换为行内块元素）HTML中标签元素大体被分为三种类型：块元素、行内元素和行内块元素。（将元素作为弹性盒子显示）（弹性布局）2.水平方向，占满它父元素的可用空间（宽度是父级的100%）如果前面的兄弟元素是inline模式，往往会在同行显示。（将元素转换为行内元素）如果前面的兄弟元素是block模式，则会在不同行显示。（将元素作为网格容器显示）（将元素作为表格显示）行内块元素：inline-block。
CSS中的位置定位总结
最新发布
adminstate的博客
09-12 368
CSS位置定位position的总结
“CSS 定位”如何工作？（补充）——WEB开发系列34
一条晒干的咸鱼的博客
09-09 1326
CSS定位是一个非常重要的布局工具，它允许我们精确地控制元素的位置，从而创建复杂的布局效果。定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
通过AI来创建一个_____html css网页制作成品 例子演示
mg668的博客
09-09 911
选择哪种方式取决于您的具体需求和目标受众。对于开发者而言，在线演示或代码库分享可能是最常见的方式；而对于非技术用户，直接查看或视频演示可能更直观。使用AI 输入创建一个 html css网页制作成品 例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值