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

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>

css样式

.box1 {background-color: #DA251E;/* 这里使用css的一个表达式，方便加减乘除计算 */width: calc(1719.2px/2 + 360px*2 - 12.2px*0*2);height: calc(360px*2 - 12.2px*0*2);margin: 100px auto;border: 0.5px white solid;/* 圆角 */border-radius: calc(360px - 12.2px*0) / 50%;/* 盒子 */box-sizing: border-box;
}.box2 {width: calc(1719.2px/2 + 360px*2 - 12.2px*1*2);height: calc(360px*2 - 12.2px*1*2);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 + 360px*2 - 12.2px*2*2);height: calc(360px*2 - 12.2px*2*2);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 + 360px*2 - 12.2px*3*2);height: calc(360px*2 - 12.2px*3*2);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 + 360px*2 - 12.2px*4*2);height: calc(360px*2 - 12.2px*4*2);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 + 360px*2 - 12.2px*5*2);height: calc(360px*2 - 12.2px*5*2);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 + 360px*2 - 12.2px*6*2);height: calc(360px*2 - 12.2px*6*2);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 + 360px*2 - 12.2px*7*2);height: calc(360px*2 - 12.2px*7*2);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(360px*2 - 12.2px*7*2 - 10px);margin: 5px auto;border: 0.5px white solid;box-sizing: border-box;
}.boxCirc {width: 100px;height: 100px;margin: calc((360px*2 - 12.2px*7*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(-360px*2/2 + 12.2px*7*2/2 + 10px - 200px/2);border: 0.5px white solid;box-sizing: border-box;
}.boxRectRight1 {width: 100px;height: 200px;margin-top: calc(-360px*2/2 + 12.2px*7*2/2 + 10px + 50px);margin-left: calc(1719.2px/2 - 100px);border: 0.5px white solid;box-sizing: border-box;
}

效果图

由于因为到目前为止，还没有学习更多的布局定位知识，所以一些其他的细节地方比较难绘制

这里就大概绘制一个雏形出来，等后面学习了绝对定位和相对定位之后再做补充和完善，会相对容易一些

绿茵足球场完善

学完了浮动，我们终于可以继续完善绿茵足球场了

废话不多说，直接上代码

<!DOCTYPE html>
<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>田径场</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;}.box2,.box3,.box4,.box5,.box6,.box7,.box8 {margin: 12.2px auto;}.boxRectLeft1,.boxRectLeft2,.boxCircLeft {float: left;/* 去除左边框 */border-left: none;}.boxCircRight,.boxRectRight1,.boxRectRight2 {float: right;/* 去除右边框 */border-right: none;}/* ==========田径场========== */.box1 {background-color: #DA251E;width: calc(1719.2px/2 + 360px*2 - 12.2px*0*2);height: calc(360px*2 - 12.2px*0*2);margin: 100px auto;border-radius: calc(360px - 12.2px*0) / 50%;}.box2 {width: calc(1719.2px/2 + 360px*2 - 12.2px*1*2);height: calc(360px*2 - 12.2px*1*2);border-radius: calc(360px - 12.2px*1) / 50%;}.box3 {width: calc(1719.2px/2 + 360px*2 - 12.2px*2*2);height: calc(360px*2 - 12.2px*2*2);border-radius: calc(360px - 12.2px*2) / 50%;}.box4 {width: calc(1719.2px/2 + 360px*2 - 12.2px*3*2);height: calc(360px*2 - 12.2px*3*2);border-radius: calc(360px - 12.2px*3) / 50%;}.box5 {width: calc(1719.2px/2 + 360px*2 - 12.2px*4*2);height: calc(360px*2 - 12.2px*4*2);border-radius: calc(360px - 12.2px*4) / 50%;}.box6 {width: calc(1719.2px/2 + 360px*2 - 12.2px*5*2);height: calc(360px*2 - 12.2px*5*2);border-radius: calc(360px - 12.2px*5) / 50%;}.box7 {width: calc(1719.2px/2 + 360px*2 - 12.2px*6*2);height: calc(360px*2 - 12.2px*6*2);border-radius: calc(360px - 12.2px*6) / 50%;}.box8 {background-color: #00923F;width: calc(1719.2px/2 + 360px*2 - 12.2px*7*2);height: calc(360px*2 - 12.2px*7*2);border-radius: calc(360px - 12.2px*7) / 50%;}/* ==========绿茵足球场========== */.boxRect {width: calc(1719.2px/2);height: calc(360px*2 - 12.2px*7*2 - 10px);margin: 5px auto;}.boxRectLeft1 {width: 100px;height: 200px;margin-top: calc(360px*2/2 - 12.2px*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.2px*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.2px*7*2/2 - 10px/2 - 100px/2) auto;margin-left: calc(1719.2px/2/2 - 100px - 50px - 100px/2);border-radius: 50%;}.boxCircRight {width: 50px;height: 100px;margin-top: calc(360px*2/2 - 12.2px*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.2px*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.2px/2/2);/* 边框样式 */border: 0.25px white dashed;}/* ==========足球========== */.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><!-- 足球 --><div class="football"></div><div class="boxColLine"></div></div></div></div></div></div></div></div></div></div>
</body></html>

这次主要的改动如下：

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

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

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

最终效果

终于可以愉快的踢球了

搞错了，再来

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

人形机器人踢“世界杯”有经验！主动躲避摔伤风险，跟踪目标精准进球
来源|机器人大讲堂文|Robospeak 机器人也踢世界杯?而且还是每年一次? 见过了各种跑酷.跳舞.翻跟头的人形机器人,机器人会踢足球似乎也不是什么新鲜事了.不过有这样一个竞赛,每年都把全世界的人 ...
贾跃亭画了一个8500亿的大饼
神奇的乐视:贾跃亭画了一个8500亿的大饼乐视控股将拿出原始总股本的50%作为股权激励总量给予员工的消息相当激励人心.有文章指出,按乐视控股上市时1.7万亿市值计算,届时乐视员工将分食8500亿元. ...
python中词云图怎样变成特殊图案_如何利用python画出一个多变的词云图？（1）...
问题描述: 如何利用python画出一个多变的词云图? 解决方法:import numpy as np import matplotlib import matplotlib.pyplot as pl ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
[html] 你能否画出一个0.5px的直线？
[html] 你能否画出一个0.5px的直线? 通过scale(0.5)来实现个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关 ...
[html] 使用svg画出一个矩形
[html] 使用svg画出一个矩形 <svg width="400" height="200" viewbox="0 0 2000 1000& ...
[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法先画一个圆,外加两个绝对定位的半圆扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现这只能切出180°以内的扇形超过180°的 ...
[css] 使用css画出一个五角星
[css] 使用css画出一个五角星 #star-five {margin: 50px 0;position: absolute;display: block;color: red;width: 0; ...
[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...

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

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

绿茵足球场完善

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

最新文章

热门文章