第四节 实践任务

一、头脑风暴

响应式网格布局的纯文字逻辑推演

（一）活动背景

在真实的前端开发工作流中，最高效的编码方式往往是“先想后写”。许多初学者习惯于直接打开编辑器盲目尝试代码，导致布局混乱、不断返工。本次活动旨在锻炼同学们的“代码架构思维”，要求大家完全脱离代码编辑器和任何画图工具，仅通过纯文字的逻辑描述，在脑海中完成一次复杂响应式页面的架构推演。

（二）核心议题

本次活动为单人独立思考与纯文字作答任务。请每位同学在电脑自带的记事本或 Word 文档中，针对以下特定开发场景，写下一份结构清晰的“CSS 逻辑规划书”。

假设开发场景： 你需要为一个电商网站开发一个“产品展示墙”。该模块内部有 12 个商品卡片。 视觉与交互需求如下：

模块内容在宽屏电脑上必须排成整齐的 4 列。

卡片与卡片之间必须有 20px 的均匀缝隙。

当用户使用平板或手机（屏幕宽度小于 960px）访问时，必须自动折叠为单列显示，且卡片内的商品图片不能撑破屏幕。

（三）独立推演

请在你的文本文档中，依次用纯文字回答以下三个架构逻辑问题（不需要默写完整的 CSS 代码，重点在于描述实现思路和核心属性）：

环节 1：PC 端网格容器的划分逻辑（建议用时：5分钟）

请用文字描述：为了实现 PC 端的 4 列等宽布局，你应该在父容器上开启什么布局模式？为了确保这 4 列能完美等分且不受具体像素宽度的局限，你应该使用 CSS Grid 的哪个专属弹性单位来进行列数划分？请写出具体的划分思路。

环节 2：盒模型与间距的防错逻辑（建议用时：5分钟）

请用文字分析：在处理卡片之间 20px 的均匀缝隙时，为什么在网格布局中强烈建议直接使用 gap 属性，而不是使用传统的 margin（外边距）属性去推挤？如果强行给每个卡片加上 margin: 10px，结合你对“CSS 盒模型”的理解，这可能会引发什么严重的排版灾难？

环节 3：移动端自适应的断点逻辑（建议用时：5分钟）

请用文字规划：为了满足屏幕宽度小于 960px 时的单列显示需求，你需要引入 CSS 的哪种核心技术？在这个技术规则内部，你需要将刚才设定的 4 列网格属性修改为什么状态？为了防止商品图片在小屏幕下溢出，需要给图片追加哪一个关键的宽度限制属性？

二、实践任务

教学视频HTML讲解

（一）任务目标

复习并解析前期的 HTML 结构，结合本章学习的 CSS 布局知识，使用通义灵码辅助完成代码的编写、解释和优化，最终形成一个结构清晰、样式美观的响应式网页。

（二）任务要求

• 独立创建并管理项目文件夹。
• 使用通义灵码辅助理解陌生的代码片段并优化页面样式。
• 提交完整的项目文件，必须包括 index.html、styles.css 和 scripts.js。

（三）任务步骤

1. 项目文件准备

首先，在您的电脑上新建一个项目文件夹（例如命名为 task-chapter5），并在该文件夹内创建以下三个 Web 开发基础文件：

index.html
styles.css
scripts.js

在 index.html 的 head 标签和 body 标签底部，分别引入对应的样式表和脚本文件：

<link rel="stylesheet" href="styles.css" />
<script src="scripts.js"></script>

2. 代码解析与 AI 辅助

将第三章完成的实践任务 HTML 代码复制到 index.html 中。在编写 styles.css 时，如果遇到复杂的布局需求，可以充分利用通义灵码。

实操演示： 在代码编辑器中选中一段你不太理解的代码，唤出通义灵码并输入提问：

请帮我逐行解释这段 HTML/CSS 代码的作用。

或者在你需要生成新布局时，输入提示词：

请根据我 index.html 中的类名，帮我在 styles.css 中生成一个响应式的网格布局，要求 PC 端三列，手机端单列，间距为 15px。

3. 代码优化与重构

初学者在编写 CSS 时，很容易出现样式冲突或代码冗余（例如重复写了多次 margin）。在完成基础效果后，我们可以利用 AI 来提升代码质量。

将你的代码发送给通义灵码，并附上如下指令：

这是我完成的 CSS 代码，请帮我检查是否存在冗余或不规范的写法。请提供优化后的代码，并解释你修改了哪些地方以及为什么这样修改。

4. 提交要求

确保所有文件（包含图片素材文件夹，如有）都在同一个主文件夹内。打开浏览器的开发者工具，切换不同设备尺寸，检查网页的自适应效果是否正常。确认无误后，将整个项目文件夹打包压缩进行提交。