新鲜的蔬菜

介绍

厨房里新到一批蔬菜，被凌乱地堆放在一起，现在我们给蔬菜分下类，把相同的蔬菜放到同一个菜板上，拿给厨师烹饪美味佳肴吧。

准备

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

1
2
3
4
├── css
│   └── style.css
├── images
└── index.html

其中：

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

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

1
2
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9788/02.zip && unzip 02.zip && rm 02.zip

在浏览器打开后，效果如下：

初始效果

目标

完成 css/style.css 中的 TODO 部分。所有元素的大小都已给出，无需修改，完成后效果如下（图中灰色线条为布局参考线无需实现）：

布局位置示意图

规定

  • 请勿修改页面中所有给出元素的大小，以免造成无法判题通过。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

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

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

难度: 中等 标签: 2022, 国赛, Web 前端, HTML5, CSS3

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* TODO：待补充代码 */

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

#box1 .item {
  grid-area: 2 / 2;
}

#box2 .item:nth-child(1) {
  grid-area: 1 / 1;
}

#box2 .item:nth-child(2) {
  grid-area: 3 / 3;
}

#box3 .item:nth-child(1) {
  grid-area: 1 / 1;
}

#box3 .item:nth-child(2) {
  grid-area: 2 / 2;
}

#box3 .item:nth-child(3) {
  grid-area: 3 / 3;
}