作为一个前端开发者,css是我们开发过程中不可或缺的一部分,因此熟练掌握css的各种布局是至关重要的。但是学习总是枯燥的。而本篇文章则给大家推荐几个在游戏中学习css的网站,让学习css变得不再乏味。
塔防CSS(学习flex布局)
网站地址: www.flexboxdefense.com/
这个游戏规则很简单,通过flex布局移动炮台位置,然后开始游戏,炮台会让来袭敌军消灭,炮台是有攻击距离的,所以需要将其移动到距离轨道附近的敌方才能攻击。比如第一关
第一关很简单,我们只需要使用justify-content:center将两个炮台都移动到中间位置就行了
只需将炮台移动到箭头所指位置即可
送青蛙回家(练习flex布局)
网站地址: https://flexboxfroggy.com/
游戏规则很简单,通过flex布局将青蛙送到荷叶即可
感兴趣大家可以自己去试试
做法练习CSS选择器
网站地址: https://flukeout.github.io/
根据右边描述的游戏规则,将选择正在晃动的元素输入到css编辑器中即可,比如第一关让我们填写晃动的元素
直接输入plate点击enter即可过关
还有让我们写id的等等
给萝卜浇水(练习网格布局grid)
网站地址: https://cssgridgarden.com/
规则也很简单,通过网格布局将水覆盖到萝卜上即可,比如第一关
我们直接使用grid-column-start: 3;即可将水”浇”到萝卜上
本期的分享就到这里,如果觉得这些网站对你有用的话,不妨点个赞和关注吧!
原文始发于微信公众号（web前端进阶）：给大家推荐几个练习CSS布局的小游戏(值得收藏)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/291457.html
