江苏龙网

  1. 首页 > 游戏 > >

小游戏|十一款游戏教你学会 CSS！

关注 “”
网上有很多有助于学习CSS的游戏 ， 本文 收集了一些非常实用的免费CSS游戏 ， 希望这些游戏可以帮助你再次体验CSS的乐趣！
小游戏|十一款游戏教你学会 CSS！
文章图片

文章图片

作者 | Andreas Müller
译者 | 弯月 ， 责编 | 郭芮
以下为译文：
我必须承认 ， 我的记性不是很好 。特别是我记不住CSS ， 例如Flexbox布局等 。flex容器的属性justify-content可以有12种以上的不同值 ， 其中许多可以与关键字safe或unsafe组合 。详细说明可以参照这篇文章《CSS技巧：flexbox的完整指南》（https://css-tricks.com/snippets/css/a-guide-to-flexbox/） ， 这个页面只有两列 ， 高度却超过了2万像素 ， 虽然文章题目表明这是一篇完整的指南 ， 但实际上文中并没有覆盖到所有内容 。
最近 ， 我在偶然间发现了一款塔防式的flexbox教学游戏 ， 这款游戏真的是……
等等 ， 你说什么？
你没听错 ， 事实证明 ， 网上的确有很多有助于学习CSS的游戏 。我收集了一些非常实用的免费CSS游戏 ， 希望这些游戏也可以帮助你再次体验CSS的乐趣！
Flexbox Defense
小游戏|十一款游戏教你学会 CSS！
文章图片

文章图片

上述我提到的就是这款游戏 。它涵盖了flex的属性align-items、justify-content、flex-direction、align-self和order ， 游戏本身总共有12关 。特别是最后4关非常有趣 ， 而且难度也很高 。
游戏地址：http://www.flexboxdefense.com
代码库：https://github.com/channingallen/tower-defense
作者：Channing Allen
Flexbox Froggy
小游戏|十一款游戏教你学会 CSS！
文章图片

文章图片

这也是一款涉及Flexbox的游戏 ， 它涵盖的flex属性更多：align-items、justify-content、align-content、flex-direction、align-self、flex-wrap和flex-flow ， 而且游戏总共有24关 ， 如果你打通关了 ， 别忘了告诉我啊 。
游戏地址：https://flexboxfroggy.com
代码库：https://github.com/thomaspark/flexboxfroggy
作者：Codepip
Grid Garden
小游戏|十一款游戏教你学会 CSS！
文章图片

文章图片

这款游戏总共有28关 ， 你可以从中学习CSS网格布局 。它涵盖了以下网格属性：grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area、order、grid-template-columns、grid-template-rows以及grid-template 。
游戏地址：https://cssgridgarden.com
代码库：https://github.com/thomaspark/gridgarden
作者：Codepip
CSS Diner
小游戏|十一款游戏教你学会 CSS！
文章图片

文章图片

这是一款有关各种CSS选择器的小游戏 ， 总共有32关 ， 打通关后你就可以自诩为CSS选择器专家了 ， 而且你会越玩越饿 。
游戏地址：http://flukeout.github.io
代码库：https://github.com/flukeout/css-diner
作者：Luke Pacholski
Unfold
小游戏|十一款游戏教你学会 CSS！


推荐阅读


上一篇：手机游戏|iOS版迎来测试，玩家与《英雄联盟手游》仅剩“一步之遥”

下一篇：Knight|韩服第一也顶不住？DWG中野国服连跪，Knight点评真实