【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

CSS Diner:富有趣味性的CSS学习网站,以游戏的方式学习CSS语法

释放双眼,带上耳机,听听看~!

css 选择器是学习css中比较麻烦的事,功能比较多,种类也比较多。学习起来可能不是那么简单,看了一些基本知识后,不知道到底学得怎么样了,下面的网站就可以很好地检测你的基本知识怎么样,一共32关,需要一关关的闯。挺有意思的,我花了半小时的时间闯完了,有一些选择器之前都没了解过,也得再查资料学习。

CSS Diner:富有趣味性的CSS学习网站,以游戏的方式学习CSS语法

在这个游戏中,你可以学习 32 个 CSS 选择器的用法(含 CSS3),从简单到高级,比如子元素选择器、后代选择器、伪元素选择器等等,如果你通关这个CSS Diner,我想你对 CSS 的选择器已经了解差不多了。比如下面一起来看看如何玩法。

1、游戏玩法

如下图,这游戏是要我们选择画面中会”动”的元素,下图是两个碟子,那么我们就选择碟子了。

CSS Diner:富有趣味性的CSS学习网站,以游戏的方式学习CSS语法

碟子的选择器为 plate,输入后回车,如果答案正确就会跳到下一题,玩法就是这么简单。

CSS Diner:富有趣味性的CSS学习网站,以游戏的方式学习CSS语法

下图为第五题,选择在“动”的食物,是中间哪个黄瓜,所以我们输入“#fancy pickle”

CSS Diner:富有趣味性的CSS学习网站,以游戏的方式学习CSS语法

2、切换题目

另外你也可以通过这里来选择不同的题目,建议还是每条都做完吧,不要作弊哦!

CSS Diner:富有趣味性的CSS学习网站,以游戏的方式学习CSS语法

3、胜利

如果你通过所有测试,哪么会显示以下画面,成为 CSS 大神!

CSS Diner:富有趣味性的CSS学习网站,以游戏的方式学习CSS语法

网站地址

给TA买糖
共{{data.count}}人
人已赞赏
网站推荐

一证通查:查询名下所有已办理的手机号,防止身份被冒用

2021-9-18 8:38:33

typecho插件

Typecho-Plugin-ExSearch:高能玩法!将内容静态化,使搜索在前端进行。

2019-4-22 17:55:32

兴趣领域微信公众号
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索