logo
JR Academy · Blog职业洞察

推荐6️⃣款免费小游戏,带你无痛学习CSS

今天局长给大家推荐6款免费的小游戏,帮助你巩固和练习CSS基础。 1️⃣ CSS Grid Garden 画风可爱!一共有28关,通过使用 CSS Grid Layout来浇灌胡萝卜作物并毒害杂草。帮助你熟练定义网站上的列、行和网格模板区域。 2️⃣ Flexbox Froggy 一共24关,需要用 flex 布局让青蛙跳到荷叶上。游戏里面几乎包含了所...

发布日期
阅读时长1 分钟
作者
87efacdde17b733b3d990c7e60c4446b_0.jpg

今天局长给大家推荐6款免费的小游戏,帮助你巩固和练习CSS基础。

1️⃣ CSS Grid Garden

画风可爱!一共有28关,通过使用 CSS Grid Layout来浇灌胡萝卜作物并毒害杂草。帮助你熟练定义网站上的列、行和网格模板区域。

2️⃣ Flexbox Froggy

一共24关,需要用 flex 布局让青蛙跳到荷叶上。游戏里面几乎包含了所有常用的属性,很生动形象好记忆。要是 Flex 布局还不熟的话,可以在这多练练。

3️⃣ Flexbox Zombies

音效逼真!每一个章节都有不同的故事情节,带你学习和实践新的 flexbox 概念。用Flexbox定位弩箭打僵尸,现在2.0版本已经上线,僵尸已经从1.0版本的静态升级为动态了🧟

👉🏻 这款游戏需要注册

4️⃣ CSS Diner

一共32关,主要是练习CSS Selectors来准备丰盛的晚餐。帮助你了解巩固 HTML 标签、类、id 和其他重要概念。

5️⃣ Flexbox Defense

一款塔防游戏。通过CSS来定位你的塔抵御敌军的入侵。主要练习Flexbox

6️⃣ CSS Battle

前面5个小游戏都是单机游戏,终于有一个交互性的游戏了!一共有12个级别,需要你用 HTML和 CSS 100%还原它给出的页面,然后再尽量减少代码,你也可以查看全球的排行榜,看看其他玩家的解决方案。

#澳洲IT#游戏#css#html#前端开发#知识分享

87efacdde17b733b3d990c7e60c4446b_1.jpg87efacdde17b733b3d990c7e60c4446b_4.jpg87efacdde17b733b3d990c7e60c4446b_5.jpg87efacdde17b733b3d990c7e60c4446b_2.jpg87efacdde17b733b3d990c7e60c4446b_3.jpg
作者澳洲求职情报局
一键分享或复制链接
澳洲求职情报局
澳洲求职情报局

匠人学院,全球华人学习 AI 第一站

查看该作者的更多文章 →

相关文章推荐

查看全部文章 →