有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗小智。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。彻底学习CSS可能是一个相当大的挑战。但是没有捷径，只能多练多写。但是仍然有一些有趣的学习方式，那就是通过游戏。本文将重点介绍10个令人惊叹的游戏，您可以边玩边学习CSS。1.Flexboxfroggy地址：https://flexboxfroggy.com/《Flexbox froggy》这是一个很有趣的游戏，主要用来学习flex布局。它有24个难度递增的级别。我们可以使用flex相关的属性将青蛙放在正确的位置并通过关卡。2、Flexbox防御地址：http://www.flexboxdefense.com/《Flexbox defense》也是一款学习flex布局的游戏。在这个游戏中，我们必须使用弹性布局将堡垒移动到正确的位置，以保卫一条不被攻击的道路。它有12个难度递增的级别和一个更深入的检查flex的程序。3、KnightsoftheFlexboxTable地址：https://knightsoftheflexboxta...也是一款学习flex布局的游戏，不过使用的是TailwindCSS风格。如果你喜欢使用TailwindCSS，那么这款游戏很适合你。它有18个级别。难度逐渐加深，考flex的程序也越来越深。4.FlexBox冒险地址：https://codingfantasy.com/gam...《 Flex Box adventure》也是一款学习flex布局的游戏。它有24个级别。除了风格不同，还有一个更人性化的体验，那就是有提示。如果我们想不出答案，我们可以通过提示找到我们想要的正确答案。5.Flexbox僵尸地址：https://mastery.games/flexbox...《 Flexbox zombies》也是一款学习flex布局的游戏。这个游戏中的图形非常棒！我被故事情节的酷炫所震撼。6、网格园地地址：https://cssgridgarden.com/《Grid garden》是一个超级好玩的CSS网格学习方式。我们必须使用网格布局来确保所有的胡萝卜都得到水来通过关卡。它有28个级别来练习大量的CSS网格选项！7.格子攻击地址：https://codingfantasy.com/gam...这款游戏是《 Flexbox adventure 》的同一个作者开发的，游戏体验也很不错。在游戏中，我们必须使用CSS网格来改变土地，让恶魔无法生存。它有80个级别，并为我们提供了学习CSSGrid的超级有趣方式的选项。8、CSSDiner地址：https://flukeout.github.io/CSSDiner是一款学习CSS选择器的游戏。通过题目，我们需要写一个具体的css选择器来选择表格上的指定项来过关。当我们选择一个项目时，会出现有趣的动画效果来增加我们的游戏体验。9.猜CSS地址：https://www.guess-css.app/这个游戏和CSSDiner很像，给一张图片，然后提供3个选项，我们根据自己的想法在脑海中构造答案现有知识，然后从3个选项中选择一个我们认为是正确答案的选项通过。10.CSSSpeedrun地址：https://css-speedrun.netlify....在这个游戏中，我们需要根据箭头的符号来编写相应的CSS选择器，这里是题目的时间安排，大家一定要试试我们最好的快速完成对于喜欢给游戏增加难度的开发者来说是一个巨大的挑战。.这个游戏有十个关卡，你可以多玩几次来提高你的解题速度。我卡在了第三个问题，你知道怎么解决吗？编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。参考：https://dev.to/dailydevtips1/...交流有梦想，有干货，微信搜索【伟大的走向世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
