虽然不是狂爱足球爱好者，但多少会有关注下，像梅西和C罗是经常听到的
可能是没有我们队的原因，关注会比较少，只看个结果，所以
趁着这次机会，通过js前端技术div+css布局方式绘制本次世界杯足球比赛对阵图
世界杯圆满结束，祝贺阿根廷梅西夺冠，预测成功
2022年12月04日 14:23:59 预测冠军图，让我们为梅西圆梦吧
2022年卡塔尔世界杯是第二十二届世界杯足球赛，当地时间 2022年11月20日 至 2022年12月18日
一、足球信息
可能有些小伙伴对足球一些信息不太了解，下面将简单说下足球世界杯相关信息
1、32强分组
1）通过六大赛区预选赛产生32支球队，各个赛区名额不同
2）东道主，不用参与预选赛，所以还有31个名额
3）32强分为8个小组，每个小组固定4支球队，命名A~H组
2、 16强分组
1）每个小组的前2名进入16强
2）分组
A组第一 PK B组第二，产生胜者1B组第一 PK A组第二，产生胜者2C组第一 PK D组第二 ，产生胜者3D组第一 PK C组第二，产生胜者4E组第一 PK F组第二，产生胜者5F组第一 PK E组第二，产生胜者6G组第一 PK H组第二，产生胜者7H组第一 PK G组第二，产生胜者83、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、代码优化
刚开始做的时候，可能会写的比较啰嗦，做到后面当代码很多的时候，就可以考虑提取公共部分，从而减少代码量，比如：刚开始代码两是976行，第一次优化还剩425行，节省了1倍多。
优化前
优化后
温馨提示：图片到时会上传到CSDN
完成代码如下