植物灌溉

介绍

朋友花园内的植物严重缺水，急需你的帮助，让我们用目前 CSS3 中新增的 Grid 布局去完成灌溉任务吧。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

1
2
3
└── css
├── images
└── index.html

其中：

  • images 是图片文件夹。
  • css/style.css 是需要补充样式的文件。
  • index.html 是主页面。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
2
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/18421/water-grid.zip && unzip water-grid.zip && rm water-grid.zip

在浏览器中预览 index.html 页面效果如下：

初始效果

目标

请使用 Grid 布局中的 grid-area 属性完善 css/style.css 中的 TODO 代码，帮助你的朋友顺利完成植物灌溉，最终实现下图效果。

最终效果

提示：

1
2
grid-area:grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area: 1 / 2 / 3 / 4;

规定

  • 请勿修改 css/style.css 文件外的任何内容。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
  • 满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 38 | 总提交次数: 38 | 通过率: 100%

难度: 中等 标签: 蓝桥杯, 2023, 国赛, Web 前端, HTML5, CSS3

题解

1
2
3
4
/* TODO 待补充代码 */
.treatment {
  grid-area: 1 / 2 / 4 / 6;
}