【CSS——效果实现】爱拼才会赢（蓝桥杯真题-18568）【合集】

Rossy Yan

发布于 2025-03-05 08:53:13

6690

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

背景介绍

由爱拼社举办的拼图大赛进行到最后一关，1 号选手小蓝披荆斩棘成为全场黑马。本关卡需要选手使用 CSS Grid 布局完成拼图页面，但是由于小蓝技术水平有限，拼图的效果没有达到预期。现在邀请你作为协助嘉宾帮助小蓝优化拼图页面的效果。本题需要在已提供的基础项目中，使用 CSS 让拼图正确显示。

准备步骤

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

其中:

├── css
│   └── style.css
├── images
└── index.html

index.html 是主页面。
images 是图片文件夹。
css/style.css 是待补充的 css 文件。

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

目标效果

请使用 Grid 完善 css/style.css 中的 TODO 代码，使 article 元素下第二个 div 在右侧占据 2 列的位置，第 6 个 div 在左侧占据 2 列的位置，最终实现下图效果。

提示：grid-column: start / end; ，其中 start 对应值为数字，表示网格项的起始位置。end 对应值为数字，表示网格项的结束位置。

要求规定

请勿修改 css/style.css 文件外的任何内容。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题⽆法通过。

判分标准

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

通关代码✔️

/* TODO：待补充代码  在 grid-column 后填空*/
/* 第二个 div */
section div:nth-of-type(2){
	grid-column: 2/4;   /*待补充代码 */
}
/* 第六个 div */
section div:nth-of-type(6) {
	grid-column: 1/3;  /*待补充代码 */
}
/* 以下代码无需修改 */
section {
	width: 70%;
	margin: 0 auto;
	line-height: 0;
	position: relative;
}
section img {
	width: 100%;
	
}
section article {
	position: absolute;
	top: 0;
	width: 100%;
	background: white;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	mix-blend-mode: lighten;
}
section div {
	background: #000;
	height: 14vw;
}

代码解析

一、HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱拼才会赢</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <section>
        <img src="./images/person.png" alt="">
        <article>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </article>
    </section>
</body>
</html>

文档类型声明：<!DOCTYPE html> 声明了文档类型为 HTML5，让浏览器以 HTML5 标准来解析页面。
HTML 根元素：<html lang="en"> 定义了 HTML 文档的根元素，并指定语言为英语。
头部信息：
- <meta charset="UTF-8"> 设置字符编码为 UTF - 8，支持多种语言字符的显示。
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> 用于响应式设计，使页面在不同设备上能正确缩放显示。
- <title>爱拼才会赢</title> 设置页面标题，显示在浏览器标签上。
- <link rel="stylesheet" href="./css/style.css"> 引入外部 CSS 样式表，用于美化页面。
主体内容：
- <section> 是一个语义化的容器元素，用于组合相关内容。
- <img src="./images/person.png" alt=""> 在 section 内插入一张图片，src 属性指定图片路径，alt 属性用于图片无法显示时的替代文本。
- <article> 是一个独立的内容块，这里用于包含拼图块。
- 内部的 7 个 <div> 元素代表拼图块，目前没有具体内容，仅作为拼图块的占位元素。

二、CSS 部分

/* 第二个 div */
section div:nth-of-type(2) {
    grid-column: 2/4;  
}
/* 第六个 div */
section div:nth-of-type(6) {
    grid-column: 1/3;  
}
/* 以下代码无需修改 */
section {
    width: 70%;
    margin: 0 auto;
    line-height: 0;
    position: relative;
}
section img {
    width: 100%;
}
section article {
    position: absolute;
    top: 0;
    width: 100%;
    background: white;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    mix-blend-mode: lighten;
}
section div {
    background: #000;
    height: 14vw;
}

定位特定元素并设置列布局：
- section div:nth-of-type(2) 选择器选中 section 元素下的第二个 div 元素。grid-column: 2/4; 表示该元素在网格布局中从第 2 列开始，到第 4 列结束，从而在右侧占据 2 列的位置。
- section div:nth-of-type(6) 选择器选中 section 元素下的第六个 div 元素。grid-column: 1/3; 表示该元素从第 1 列开始，到第 3 列结束，在左侧占据 2 列的位置。
section 样式：
- width: 70%; 设置 section 的宽度为视口宽度的 70%。
- margin: 0 auto; 使 section 在水平方向上居中显示。
- line-height: 0; 去除行间距，避免图片和其他元素之间出现间隙。
- position: relative; 设置相对定位，为内部的绝对定位元素（article）提供定位参考。
section img 样式：width: 100%; 使图片宽度充满其父元素 section。
section article 样式：
- position: absolute; 设置绝对定位，使其相对于 section 进行定位。
- top: 0; 将 article 定位在 section 的顶部。
- width: 100%; 宽度充满 section。
- background: white; 设置背景颜色为白色。
- display: grid; 启用网格布局模式。
- grid-template-columns: 1fr 1fr 1fr; 将网格容器划分为 3 列，每列宽度相等（1fr 表示一个灵活的分数单位）。
- grid-gap: 20px; 设置列与列之间的间隙为 20 像素。
- mix-blend-mode: lighten; 设置混合模式为 lighten，使拼图块与下方图片混合时，根据颜色混合规则产生特殊效果（使拼图块看起来像是覆盖在图片上）。
section div 样式：
- background: #000; 设置背景颜色为黑色，代表拼图块的颜色。
- height: 14vw; 设置高度为视口宽度的 14%，使拼图块高度随视口宽度变化而等比例变化，保持响应式效果。

三、工作流程▶️

页面结构搭建：HTML 代码构建了基本的页面结构，包含一个 section 容器，内部有一张图片和一个包含 7 个 div 元素的 article 容器，这些 div 作为拼图块的占位。
引入样式表：通过 <link> 标签引入外部 CSS 样式表，将样式与 HTML 结构关联起来。
整体布局设置：CSS 样式首先对 section 进行整体布局设置，包括宽度、居中显示、行间距和定位方式。同时设置图片宽度充满 section，为后续拼图块的覆盖效果做准备。
启用网格布局：对 article 元素启用网格布局，并定义其列结构为 3 列且等宽，设置列间隙，同时通过绝对定位将其覆盖在图片上方，并设置混合模式以实现与图片的融合效果。
拼图块定位：利用 grid-column 属性，根据题目要求分别对第二个和第六个 div 进行列位置的调整，使其在网格布局中占据特定的列，从而实现拼图块的正确排列效果。
拼图块样式设置：为每个 div （拼图块）设置黑色背景和相对视口宽度的高度，使其在页面上显示为具有一定大小和颜色的拼图块。