💪 通过在线游戏训练你的 CSS 技能 👾

基本 CSS

弹性盒布局

有用的参考资料

作为前端开发人员，我们经常需要为我们的 Web 应用程序设计一个简洁且吸引人的 UI。

如今，有很多概念和技术需要了解：SCSS、响应式设计、网格布局和弹性框等等。即使我们每天在工作中用到它们，通常也只会记住一些最常见的规则。

因此，为什么不在玩耍的同时练习这些概念并让学习过程变得有趣呢？

有一些在线游戏可以让我们训练设计技能，并以一种有趣的方式不断更新。让我们一起来看看其中的一些。

基本 CSS

CSS 餐厅

目标是使用 CSS 语句选择屏幕上的特定 UI 元素。如果输入的规则正确，我们就可以进入下一关。一共 32 关。
免费 畅玩
 

CSS 网格花园

在这个游戏中，我们必须掌握 CSS 网格来浇灌胡萝卜作物。为了达成目标，我们需要定义列、行和网格模板区域。
免费 ，快来玩吧！
 

Gridcritters

这款游戏堪称一款小型设计杰作。
我们需要运用 CSS 网格技巧，拯救濒临灭绝的外星生物！每一关都需要满足更具挑战性的要求才能通关，晋级下一关。

这款游戏由前IT架构师Dave Geddes开发，现已转型为教育平台开发者。您可以在这里阅读项目背后的故事以及游戏主页使用的CSS网格规则。这篇博客文章本身就非常有参考价值！
价格：179美元， 快来玩吧！
 

CSS 之战

在 CSS Battle 中，我们必须用尽可能少的代码复制目标布局，并且我们可以与其他玩家竞争以获得排行榜上的最高分。

免费 玩吧
👉感谢@Nick Taylor 在评论中提出的建议！
 

弹性盒布局

弹性盒青蛙

通过编写 CSS 代码来帮助 Froggy 和朋友们！

Flexbox Froggy 的灵感来自于经典街机游戏 Frogger 以及精彩的 CSS Diner 和 Erase All Kittens 等网络知识游戏，在这些游戏中您可以分别了解 CSS 选择器和 HTML 标记。

我们必须使用 CSS 弹性框指令，将青蛙带回它们的睡莲叶。为了实现目标，我们需要控制网页上元素的对齐、间距和换行。
免费 ，快来玩吧
 

Flexbox 防御

Flexbox Defense 是基于经典塔防游戏的，但我们用 CSS 指令来放置元素。我们使用主容器的 justify-content 属性将单个塔移动到有效位置。
免费 ，快来玩吧！
 

弹性盒僵尸

这款游戏也是由 Dave Geddes（也就是上文的 Gridcritters）设计的。在这里，我们使用 Flexbox 来定位英雄的弩，击杀僵尸并在游戏中生存下来。

看看下面戴夫在游戏发布时使用的视频。它的画面和剧情都非常棒！

每个部分都会揭示部分情节，让您了解新的 flexbox 概念，并提出僵尸生存挑战，迫使您巩固新技能，就像您的生命依赖于它一样。

免费 玩吧
 

你还知道其他 CSS/设计游戏吗？
请在下方评论区留言，我会将它们添加到上面的列表中。

有用的参考资料

如果我们需要学习基础知识或只是偶尔查看一下以供参考，我们可以访问下面列出的资源。
 

CSS 选择器

关于所有Css 选择器及其应用方法的概述。
 

网格 CSS

用于学习 CSS 网格布局的综合资源集合（视频和示例）。
 

弹性盒布局

CSS 弹性盒布局的可视化指南（我认为是最好的指南之一）。本指南重点介绍了父元素（弹性容器）和子元素（弹性项目）的所有可能属性。
链接