讨论区

介绍

讨论区提供了一个与其他学习者交流和讨论的场所，以便共同探讨和理解各种知识和主题。在讨论区中，学习者可以创建和加入不同的讨论组，参与到热门话题的讨论中，也可以发起新的话题和问题。学习者可以分享自己的知识、经验和观点，也可以向其他学习者请教问题和寻求帮助。现邀请你来建设讨论区页面，快来发光发热吧。

准备

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

1
2
3
4
5
6
7
8
├── css
│   └── style.css
├── data.txt
├── images
├── mark
│   ├── preview
│   └── index.html
└── index.html

其中：

  • css/style.css 是样式文件。
  • data.txt 是页面用到的文本。
  • images 是页面布局需要用到的图片素材。
  • mark/preview 是页面效果图。
  • mark/index.html 是布局参数标记页面。
  • index.html 是主页面。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。

1
wget https://labfile.oss.aliyuncs.com/courses/18421/html.zip&&unzip html.zip&&rm html.zip

目标

请完善 css/style.css 和 index.html 文件。

请根据 mark/preview 最终效果图和 mark/index.html 上的参数标注来完成页面布局。

在浏览器中打开 mark/index.html 页面，鼠标点击页面可以在右侧看到相应的参数标注。

规定

  • 本题只能使用项目文件夹中提供的素材。
  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。
  • 满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。

判分标准

  • 本题根据页面布局的相似度给分，低于 50% 得 0 分，高于 50% 则按比例给分。

总通过次数: 18 | 总提交次数: 25 | 通过率: 72%

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

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>讨论区</title>
    <link rel="stylesheet" href="css/style.css" />
    <style>
      body{
        background: url(./mark/preview/shequ-1-shequ.png) no-repeat center;
        background-size: contain;
      }
    </style>
  </head>
  <body></body>
</html>