【小5聊】使用div+css布局绘制32支球队比赛对阵图，拭目以待冠军花落谁家_办公生活

【小5聊】使用div+css布局绘制32支球队比赛对阵图，拭目以待冠军花落谁家

创始人

2024-03-15 03:20:09

虽然不是狂爱足球爱好者，但多少会有关注下，像梅西和C罗是经常听到的

可能是没有我们队的原因，关注会比较少，只看个结果，所以

趁着这次机会，通过js前端技术div+css布局方式绘制本次世界杯足球比赛对阵图

2022年卡塔尔世界杯是第二十二届世界杯足球赛，当地时间 2022年11月20日至 2022年12月18日

目前16强已出，会持续根据更新

一、足球信息

可能有些小伙伴对足球一些信息不太了解，下面将简单说下足球世界杯相关信息

1、32强分组

1）通过六大赛区预选赛产生32支球队，各个赛区名额不同

2）东道主，不用参与预选赛，所以还有31个名额

3）32强分为8个小组，每个小组固定4支球队，命名A~H组

2、 16强分组

1）每个小组的前2名进入16强

2）分组

A组第一 PK B组第二，产生胜者1

B组第一 PK A组第二，产生胜者2

C组第一 PK D组第二，产生胜者3

D组第一 PK C组第二，产生胜者4

E组第一 PK F组第二，产生胜者5

F组第一 PK E组第二，产生胜者6

G组第一 PK H组第二，产生胜者7

H组第一 PK G组第二，产生胜者8

3、8强分组

1）胜者1 PK 胜者3，产生胜者A

2）胜者2 PK 胜者4，产生胜者B

3）胜者5 PK 胜者7，产生胜者C

4）胜者6 PK胜者8，产生胜者D

4、4强分组

1）胜者A PK 胜者C

2）胜者B PK 胜者D

5、冠亚军

1）4强中，获胜的两队进入决赛

2）4强中，输的两队争夺第三名

二、编码绘制赛程图

根据上面规则，可通过div+css+js方式布局绘制出对阵比赛图

1、左右两边分组设置4个小组

2、主要以相对布局方式，按一定规律进行排序

3、图片到时会上传到CSDN

完成代码如下

上一篇：文献阅读-VSE++：使用困难负样本来改经视觉语义嵌入

下一篇：【POJ No. 1019】数字序列 Number Sequence

热门资讯

应用未安装解决办法平板应用未... ---IT小技术，每天Get一个小技能！一、前言描述苹果IPad2居然不能安装怎么办？与此IPad不...

长白山自助游攻略吉林长白山游... 昨天介绍了西坡的景点详细请看链接：一个人的旅行，据说能看到长白山天池全凭运气，您的运气如何？今日介绍...

脚上的穴位图脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用，包括头部穴位图、胸部穴位图、背部穴位图、胳...

demo什么意思 demo版本... 618快到了，各位的小金库大概也在准备开闸放水了吧。没有小金库的，也该向老婆撒娇卖萌服个软了，一切只...

猫咪吃了塑料袋怎么办猫咪误食... 你知道吗？塑料袋放久了会长猫哦！要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...

世界上最漂亮的人世界上最漂亮... 此前在某网上，选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中，人们投票选出了心目中最美...

我喜欢你韩语怎么说 sikid...

埃菲尔铁塔在哪中国仿建埃菲尔... 2019年4月26日，广西南宁市，街头惊现一座巨型山寨版埃菲尔铁塔，高约20米，白色塔身，造型逼真，...

北京的名胜古迹北京最著名的景... 北京从元代开始，逐渐走上帝国首都的道路，先是成为大辽朝五大首都之一的南京城，随着金灭辽，金代从海陵王...

苗族的传统节日贵州苗族节日有... 【岜沙苗族芦笙节】岜沙，苗语叫“分送”，距从江县城7.5公里，是世界上最崇拜树木并以树为神的枪手部落...