【CSS——效果实现】自适应页面（蓝桥杯真题-5136）【合集】

背景介绍

响应式布局是在 2010 年 5 月份提出的一个概念，这个概念是为解决移动互联网浏览而诞生的。简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。通过响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。因此越来越多的设计师采用这个技术。 本题需要在已提供的基础项目中，使用 CSS 或者 DOM 操作达到 Menu 和内容页自适应的效果。

准备步骤

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

├── css
│   └── style.css
├── images
│   ├── C++_course.png
│   ├── linux_course.png
│   └── python_course.png
├── index.html
├─── js
│    └── jQuery.min.js
├── default.gif
├── effect.gif

其中：

• index.html 是主页面。
• css/style.css 是需要补充样式的文件。
• js/jQuery.min.js 是 jQuery 库文件。
• images 是图片文件夹。
• default.gif 是 PC 端默认效果图。
• effect.gif 是移动端自适应效果图。

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

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/18213/04.zip && unzip 04.zip && rm 04.zip

在浏览器中预览 index.html 页面，默认 PC 端页面显示如下所示：

目标效果

初始页面已经具备基础的布局和交互效果，包含 hover 高亮，展示二级菜单等。效果见文件夹下面的 gif 图，图片名称为 default.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）：

请通过补全 css/style.css 中代码或操作 DOM 的方式，达到根据屏幕大小显示不同布局的效果。

• 以 800px 为界限，800px 以上显示 PC 端布局，否则显示移动端布局，需要实现移动端布局样式如下：

• 移动端 Menu 由左上侧按钮（即 class 包含 icon-menu 的 label 标签）控制显隐，按钮大小已经默认提供，无需手动设置大小。且 Menu 按钮展示时，需要浮动在内容卡片上方，不能被遮挡，移动端和 PC 端顶部导航栏高度一致，均为 54px。
• 移动端导航栏的菜单项每一项独占一行。
• 显示移动端布局时，卡片描述和对应图片各占一行，且都撑满 #tutorials 容器。

移动端页面展开菜单栏效果如下所示：

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）：

要求规定

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

判分标准

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

通关代码✔️

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #191620;
}

/* 菜单样式 */
.menu {
  background: #252525;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  margin-bottom: 30px;
  position: relative;
  height: 54px;
}

.menu li {
  display: inline-block;
}
.menu a {
  padding: 16px;
}
.dropdown {
  position: relative;
}
.dropdown li a {
  display: block;
  padding: 8px 16px;
  white-space: nowrap;
}
.dropdown ul {
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
  padding: 8px 0;
  position: absolute;
  min-width: 100%;
}
input.menu-btn,
label.menu-btn {
  display: none;
}

@media (max-width: 800px) {
  .collapse {
    border-top: 1px #959595 solid;
    display: none;
    position: absolute;
    top: 54px;
    left: 0;
    width: 100%;
    background-color: #252525;
    z-index: 1;
  }
  .menu li{
    display: block;
  }
  input.menu-btn:checked ~ .collapse {
    display: block; /* 点击按钮显示菜单 */
  }
  label.menu-btn {
    display: block; /* 显示菜单按钮 */
    position: absolute;
    top: 0;
    left: 0;
    padding: 16px;
    cursor: pointer;
    color: #959595;
  }
  #tutorials .row{
    display: block;
}
#tutorials .text,
#tutorials img {
  width: 100%; /* 撑满 #tutorials 容器 */
  margin: 10px 0;
}
}
.menu li,
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  color: #959595;
  display: inline-block;
  padding: 16px 32px;
  text-decoration: none;
}
.dropdown:hover a,
.menu a:hover {
  color: #fff;
}
.menu ul ul {
  display: none;
}
.dropdown:hover ul {
  display: block;
}
.dropdown ul {
  background: #fff;
  padding: 0;
}
.dropdown ul a,
.dropdown:hover ul a {
  color: #000;
}
.dropdown ul a:hover,
.dropdown:hover ul a:hover {
  color: rgb(2, 107, 107);
}
.dropdown ul ul {
  border-bottom: 1px #ccc solid;
  border-top: 1px #ccc solid;
  box-shadow: none;
  margin-bottom: 16px;
  max-width: 100%;
  position: relative;
}

.icon-menu::before {
  content: "\2630";
}

/* 页面内容 */
.card {
  width: 45%;
  border: 2px solid;
  padding: 10px;
  margin: 10px;
  display: inline-block;
}
.card img {
  width: 100%;
}
.card-content {
  font-size: 10px;
}

.page {
  display: flex;
  justify-content: center;
  width: 100%;
}

#tutorials {
  max-width: 800px;
  margin: 0 20px;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1.5rem;
  margin: 20px 0;
}

#tutorials h3 {
  margin: 0;
  color: #86fbfb;
}

#tutorials h4 {
  margin: 0;
  color: white;
}

.box {
  padding: 10px;
  border-radius: 10px;
  color: white;
  background-color: darkcyan;
  line-height: 1.5;
}

#tutorials img {
  padding: 10px;
  border: 1px solid #86fbfb;
  border-radius: 25px;
  width: 100%;
  margin: 10px;
  display: block;
}

/* TODO: 考生需要完成以下内容 */

代码解析📑

一、HTML 部分

代码整体功能概述

这段 HTML 代码构建了一个自适应页面，包含一个导航菜单栏和页面内容展示区。导航栏提供了如 “首页”“课程”“竞赛”“蓝桥杯” 等菜单项，其中 “课程” 还有下拉子菜单。页面内容展示区展示了三门课程的相关信息，包括课程类别、名称和描述，以及对应的课程封面图片。页面支持根据不同设备屏幕大小进行自适应布局，具体的样式控制依赖于引入的 css/style.css 文件，同时引入了 jQuery 库，方便后续进行脚本控制。

代码详细解释

1. HTML 头部部分

<!DOCTYPE html>
<html lang="zh-CN">
  <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" />
  </head>

• <!DOCTYPE html>：声明文档类型为 HTML5。
• <html lang="zh-CN">：指定页面语言为中文（中国大陆）。
• <meta charset="UTF-8" />：设置字符编码为 UTF - 8，确保页面能正确显示各种字符。
• <meta http-equiv="X-UA-Compatible" content="IE=edge" />：让页面在 Internet Explorer 浏览器中以最新的渲染模式显示。
• <meta name="viewport" content="width=device-width, initial-scale=1.0" />：使页面在不同设备上能自适应显示，width=device-width 表示页面宽度等于设备宽度，initial-scale=1.0 表示初始缩放比例为 1。
• <title>自适应页面</title>：设置页面的标题为 “自适应页面”，显示在浏览器的标签页上。
• <link rel="stylesheet" href="./css/style.css" />：引入外部样式表 css/style.css，用于定义页面的样式。

2. 导航菜单栏部分

<nav class="menu">
  <label for="menu-btn" class="menu-btn icon-menu"></label>
  <input type="checkbox" id="menu-btn" class="menu-btn" />
  <ul class="collapse">
    <li><a href="javascript:void(0)">首页</a></li>
    <li class="dropdown">
      <a href="javascript:void(0)">课程</a>
      <ul>
        <li><a href="javascript:void(0)">全部课程</a></li>
        <li><a href="javascript:void(0)">学习路径</a></li>
        <li><a href="javascript:void(0)">训练营</a></li>
      </ul>
    </li>
    <li><a href="javascript:void(0)">竞赛</a></li>
    <li><a href="javascript:void(0)">蓝桥杯</a></li>
  </ul>
</nav>

• <nav class="menu">：使用 <nav> 标签定义导航栏，添加 menu 类，方便后续样式控制。
• <label for="menu-btn" class="menu-btn icon-menu"></label> 和 <input type="checkbox" id="menu-btn" class="menu-btn" />：这是一个用于移动端的菜单按钮实现方式。label 标签用于触发 input 复选框的选中状态，icon-menu 类可能用于显示菜单图标。
• <ul class="collapse">：定义一个无序列表，作为菜单的容器，collapse 类可能用于控制菜单的折叠和展开效果。
• 菜单项通过 <li> 标签定义，其中 “课程” 菜单项有下拉子菜单，通过嵌套的 <ul> 列表实现。javascript:void(0) 表示点击链接时不执行任何操作，可根据实际需求替换为具体的链接地址。

3. 页面内容部分

<div class="page">
  <section id="tutorials">
    <div class="row">
      <div class="text">
        <h4>最新课程</h4>
        <h3>Linux 基础入门</h3>
        <p class="box">
          本课程教你如何熟练地使用 Linux，本实验中通过在线动手实验的方式学习
          Linux
          常用命令，用户与权限管理，目录结构与文件操作，环境变量，计划任务，管道与数据流重定向等基本知识点。
        </p>
      </div>
      <img src="images/linux_course.png" alt="Linux课程封面" />
    </div>
    <!-- 另外两个 .row 结构类似 -->
  </section>
</div>

• <div class="page">：作为页面内容的外层容器。
• <section id="tutorials">：使用 <section> 标签定义一个内容区域，id 为 tutorials，用于展示课程信息。
• <div class="row">：每个 row 代表一门课程的展示单元，包含课程描述和对应的课程封面图片。
• <div class="text">：用于包裹课程的文本信息，包括课程类别（<h4>）、课程名称（<h3>）和课程描述（<p class="box">）。
• <img> 标签用于显示课程封面图片，src 属性指定图片的路径，alt 属性提供图片的替代文本，在图片无法加载时显示。

4. 脚本引入部分

<script src="./js/jQuery.min.js"></script>
<script>
  /* TODO: 考生可以根据需要使用 jQuery 实现脚本控制，也可以只使用纯 css 实现 */
</script>

• <script src="./js/jQuery.min.js"></script>：引入 jQuery 库，方便后续使用 jQuery 进行交互效果的实现，如菜单的展开和收缩等。
• 内部 <script> 标签预留了空间，可根据需求编写 JavaScript 代码，实现更多的交互功能，也可以仅使用 CSS 来完成页面的自适应和交互效果。

二、CSS 部分

代码功能概述

这段代码是一个 CSS 媒体查询，用于在视口宽度小于等于 800px 时（通常是移动设备屏幕），对页面的布局和样式进行调整，以实现响应式设计。具体来说，它调整了导航菜单的显示方式和页面内容卡片的布局。

代码详细解释

1. 媒体查询部分

@media (max-width: 800px) {
  /* 这里是在视口宽度小于等于 800px 时应用的样式 */
}

@media 是 CSS 中用于媒体查询的关键字，(max-width: 800px) 表示当视口的宽度小于或等于 800px 时，内部的样式规则将会生效。

2. 导航菜单折叠部分（.collapse）

.collapse {
  border-top: 1px #959595 solid;
  display: none; /* 初始隐藏菜单 */
  position: absolute;
  top: 54px; /* 顶部导航栏高度 */
  left: 0;
  width: 100%;
  background-color: #252525;
  z-index: 1; /* 确保菜单浮动在内容卡片上方 */
}

• border-top: 1px #959595 solid;：为菜单容器的顶部添加一条 1 像素宽、颜色为 #959595 的实线边框。
• display: none;：初始状态下，菜单是隐藏的，不会显示在页面上。
• position: absolute;：将菜单容器的定位方式设置为绝对定位，使其可以脱离文档流，方便进行位置调整。
• top: 54px;：菜单容器距离页面顶部 54px，这通常是顶部导航栏的高度，确保菜单显示在导航栏下方。
• left: 0;：菜单容器左对齐。
• width: 100%;：菜单容器的宽度与视口宽度相同。
• background-color: #252525;：设置菜单容器的背景颜色为深灰色。
• z-index: 1;：设置菜单容器的堆叠顺序为 1，使其显示在其他元素之上，避免被内容卡片遮挡。

3. 菜单项样式（.menu li）

.menu li {
  display: block; /* 菜单项独占一行 */
}

将菜单项的显示方式设置为块级元素，这样每个菜单项都会单独占据一行，适应移动设备屏幕的纵向布局。

4. 菜单展开逻辑（input.menu-btn:checked ~ .collapse）

input.menu-btn:checked ~ .collapse {
  display: block; /* 点击按钮显示菜单 */
}

• input.menu-btn:checked：表示当 input 元素（类名为 menu-btn）被选中（例如复选框被勾选）时。
• ~ .collapse：选择与该 input 元素同级且在其后的 .collapse 元素。
• display: block;：当 input 元素被选中时，将 .collapse 元素的显示方式设置为块级元素，即显示菜单。

5. 菜单按钮样式（label.menu-btn）

label.menu-btn {
  display: block; /* 显示菜单按钮 */
  position: absolute;
  top: 0;
  left: 0;
  padding: 16px;
  cursor: pointer;
  color: #959595;
}

• display: block;：显示菜单按钮。
• position: absolute;：将菜单按钮的定位方式设置为绝对定位。
• top: 0; 和 left: 0;：将菜单按钮放置在页面的左上角。
• padding: 16px;：为菜单按钮添加内边距，增加点击区域。
• cursor: pointer;：将鼠标指针样式设置为手型，提示用户该元素可以点击。
• color: #959595;：设置菜单按钮的文本颜色为深灰色。

6. 页面内容卡片样式（#tutorials 部分）

/* 移动端卡片样式 */
#tutorials .row {
  display: block; /* 卡片描述和图片各占一行 */
}

#tutorials .text,
#tutorials img {
  width: 100%; /* 撑满 #tutorials 容器 */
  margin: 10px 0;
}

• #tutorials .row：将 #tutorials 容器内的 .row 元素的显示方式设置为块级元素，使得卡片描述和图片各占一行。
• #tutorials .text 和 #tutorials img：将卡片描述和图片的宽度设置为 100%，使其撑满 #tutorials 容器，并在上下各留出 10px 的外边距。

三、工作流程▶️ 实现自适应页面效果的整体思路 上述 HTML 和 CSS 代码实现自适应页面效果的核心思路是利用媒体查询（Media Query）结合 HTML 结构与 CSS 样式控制，根据不同的屏幕宽度调整页面布局和元素样式，以确保页面在不同设备（如 PC、平板、手机）上都能有良好的显示效果和用户体验。 工作流程详细分析 1. 项目初始化

• 确定需求：明确要实现一个能在不同设备上自适应显示的页面，包含导航菜单和课程内容展示，以 800px 为界限区分 PC 端和移动端布局。
• 搭建项目结构：创建项目所需的文件夹和文件，如 css 文件夹用于存放样式文件（style.css），images 文件夹用于存放图片，js 文件夹用于存放脚本文件（如 jQuery.min.js），根目录下创建 index.html 作为主页面。

2. HTML 结构构建

• 头部设置：在 index.html 中设置页面的基本元数据，包括字符编码、兼容性、视口信息和页面标题，同时引入外部样式表，确保页面能正确渲染和自适应。
• 导航菜单搭建：使用 <nav> 标签创建导航栏，包含菜单按钮（通过 <label> 和 <input type="checkbox"> 组合实现）和菜单项列表，菜单项包含下拉菜单结构，为后续的交互和样式控制提供基础。
• 页面内容布局：使用 <div> 和 <section> 标签划分页面内容区域，展示课程信息，包括课程类别、名称、描述和对应的封面图片，形成清晰的内容结构。

3. CSS 样式设计

• 全局样式定义：在 style.css 中设置全局样式，如 box-sizing 属性确保元素的布局计算方式一致，设置页面背景颜色等，为后续的样式设置提供统一的基础。
• PC 端样式设置：为导航菜单、菜单项、下拉菜单以及页面内容的各个元素设置默认样式，使页面在 PC 端呈现出预期的布局和外观，如菜单水平排列、课程内容采用网格布局等。
• 移动端样式适配（媒体查询）：使用媒体查询（@media (max-width: 800px)）针对小屏幕设备（宽度小于等于 800px）调整样式。将菜单改为可折叠的垂直菜单，菜单项独占一行，课程内容的描述和图片也改为垂直排列，确保在移动端有良好的显示效果。

4. 交互功能实现（可选）

• 引入脚本库：如果需要更复杂的交互效果，引入 jQuery 库（jQuery.min.js）。
• 菜单交互实现：通过 CSS 选择器（如 input.menu-btn:checked ~ .collapse）或编写 JavaScript 代码，实现点击菜单按钮展开和收缩菜单的交互效果。

5. 测试与优化

• 不同设备测试：在多种不同屏幕尺寸的设备上（如 PC、平板、手机）测试页面，检查布局是否自适应、菜单交互是否正常、内容显示是否完整等。
• 细节优化：根据测试结果，对页面的样式和交互进行优化，如调整元素的间距、字体大小、颜色等，提升用户体验。

测试结果👍