边玩边学HTML和CSS

1. 选择盘子

游戏链接https://flukeout.github.io/

【注意】如果使用Microsoft Edge浏览器打开输入答案无效，则建议使用Google Chrome浏览器打开

游戏介绍：整个页面分成4部分

• 第一部分：桌子上有若干盘子或物品，我们的目标是选择在摇摆的盘子或物品
• 第二部分：输入CSS样式的地方，输入完毕后点击enter可开启下一关
• 第三部分：对第一部分桌子的HTML结构进行展示，鼠标移入会显示该元素信息
• 第四部分：关卡信息显示及提示栏，通过上方提示选择合适的选择器完成关卡

玩法：

1. 当前为第一关，可以看到桌子上有2个盘子在左右摇摆，我们的目标是选中它们

2. 观察第三部分，整个结构由一个类为table的div包裹，还有2个plate标签的子元素

3. 由所学知识和第四部分提示，可以知道通过元素选择器plate{ }既可以选中

4. 因此在第三部分中填入plate，按下enter键即可通关

   

【注意】当然选择器如何选择有很多种方式，但通过要求是要结合第四部分提示。自己也可以试试通过不同方式去实现选择效果

 

2. 网格花园

游戏链接http://cssgridgarden.com/
游戏介绍：整个页面分成2部分

• 第一部分：游戏主面板，上方文字为提示，下方为输入区
• 第二部分：游戏界面，实现流动的水能够到达网格某物体上

玩法：

1. 当前为第一关，由界面可以看到游戏为6行6列网格，每格占比都是等宽等高
2. 要实现把水敲到胡萝卜上，需要往右移动3即从第三个小格左边垂直边界开始浇水
3. 在#water中添加grid-column-start: 3;再点击next即可通关

#water {
grid-column-start: 3;
}

【注意】每个网格的垂直边界开始位置

 

3. CSS对战

游戏链接https://cssbattle.dev/

游戏介绍：游戏主界面如图所示

点击左上角下拉选择Pilot Battle最简单的关卡为例

点击#1，进入关卡1

可以看到整个页面分为三部分：左、中、右
左边是我们的代码区，需要编写相应的HTML和CSS代码
中间是输出区，即我们编写完代码的样式
右边是目标区，即我们要完成的目标样式

玩法：
 观察输出区和目标区，我们需要实现

• 把小正方形放大，然后紧贴左上角，并改变颜色
• 改变背景的颜色

 因此修改代码区如下，并点击Submit键完成本关

<div>
</div>
<style>
  body{
    margin: 0;
    background:#5D3A3A;
  }
  div {
    width: 200px;
    height: 200px;
    background: #b5e0ba;
  }
</style>

当然还有更多玩法，等着你去解锁！