蓝桥杯 - 简单 - 爱拼才会赢

介绍

由爱拼社举办的拼图大赛进行到最后一关，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 分。

代码

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>

css 复制代码

/* TODO：待补充代码  在 grid-column 后填空
以下注释将解释 grid-column 属性的含义及当前代码意图 */

/* 选择 section 元素内的第二个 div 元素
通过 nth-of-type(2) 选择器精准定位到目标元素 */
section div:nth-of-type(2) {
    /* grid-column 属性用于指定网格项在网格容器中的列位置
    2/4 表示该元素从网格的第 2 列开始，跨越到第 4 列之前结束
    即该元素会占据第 2 列和第 3 列的空间 */
    grid-column: 2/4;   
}

/* 选择 section 元素内的第六个 div 元素
通过 nth-of-type(6) 选择器精准定位到目标元素 */
section div:nth-of-type(6) {
    /* grid-column 属性用于指定网格项在网格容器中的列位置
    1/3 表示该元素从网格的第 1 列开始，跨越到第 3 列之前结束
    即该元素会占据第 1 列和第 2 列的空间 */
    grid-column: 1/3;  
}

/* 以下代码无需修改 */

/* 设置 section 元素的样式
width: 70%：将 section 元素的宽度设置为其父元素宽度的 70%
margin: 0 auto：使 section 元素在水平方向上居中显示
line-height: 0：去除行间距，避免因行高产生额外的空白
position: relative：将 section 元素的定位方式设置为相对定位，为其子元素的绝对定位提供参考 */
section {
    width: 70%;
    margin: 0 auto;
    line-height: 0;
    position: relative;
}

/* 设置 section 元素内 img 元素的样式
width: 100%：将 img 元素的宽度设置为其父元素宽度的 100%，实现图片宽度自适应 */
section img {
    width: 100%;
}

/* 设置 section 元素内 article 元素的样式
position: absolute：将 article 元素的定位方式设置为绝对定位，相对于 section 元素进行定位
top: 0：将 article 元素的顶部与 section 元素的顶部对齐
width: 100%：将 article 元素的宽度设置为其父元素宽度的 100%
background: white：将 article 元素的背景颜色设置为白色
display: grid：将 article 元素的显示方式设置为网格布局
grid-template-columns: 1fr 1fr 1fr：将网格容器划分为 3 列，每列的宽度相等
grid-gap: 20px：设置网格项之间的间距为 20px
mix-blend-mode: lighten：设置混合模式为变亮，使 article 元素与背景元素进行混合时，显示较亮的部分 */
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：将 div 元素的背景颜色设置为黑色
height: 14vw：将 div 元素的高度设置为视口宽度的 14%，实现高度的自适应 */
section div {
    background: #000;
    height: 14vw;
}

总结

Grid 布局知识点继续复习。