HTML+CSS+JS打造王者荣耀主题网页：期末大作业实操指南

期末周一到，图书馆里抱着电脑赶 Java 的大有人在，赶 HTML 大作业的其实更多。每年都有学弟学妹问我：题目到底选什么，做到什么程度能拿高分？我的建议通常是——与其做一个四平八稳的“个人介绍页”，不如用 HTML+CSS+JavaScript 做一个带游戏气质的“王者荣耀英雄档案站”。原因很简单，它体面、出效果、素材好找，而且能把你要展示的导航、布局、动效和事件交互全部塞进去。这篇就按我实际带过几轮期末作业的经验，把一套完整做法的骨架和细节讲给你听，从选题、搭结构、写样式、调交互到提交前自查都会覆盖到。

我不会把代码逐行粘贴成一份“可以直接交”的工程，那样你答辩被问两句还是会露馅。真正有价值的是搞清楚每个模块为什么这么设计、哪些报错其实可以提前规避。下面的章节顺序就是我建议你实际开发时的顺序，别先抠样式，先把逻辑理顺。

1. 期末网页选题逻辑：王者荣耀为什么是“最稳”的方向

1.1 老师评你的作业时实际在评什么

先泼一盆冷水：大多数老师并不会因为你的页面用了多冷门的框架给高分，反而会因为基础模块不齐、样式混乱、交互报错而扣分。期末网页设计作业的评分点通常集中在几个方向上：HTML 结构是否完整且有语义化，CSS 是否体现出布局能力和统一视觉，JavaScript 是否实现了至少两三个有意义的事件交互，代码是否有命名规范，页面是否在常见屏幕尺寸下不崩。对照这些要求你会发现，王者荣耀主题并不是“花架子”，它天然能覆盖大部分考点。

游戏官网类页面的信息层级非常清晰：顶部导航、主视觉轮播、内容分区、英雄列表、页脚版权，整条链路做下来，语义化标签几乎都能用到。在做英雄列表时你会遇到网格布局，在做轮播时会用到数组和定时器，在做筛选时会写事件监听，这些交互点放在一个统一主题下不仅不突兀，还会让页面看起来像一个完整产品而不是练习页。

还有一层原因比较现实：视觉素材好找。王者荣耀的英雄原画、皮肤物料、背景纹理辨识度极高，即使你没有设计基础，找几张高清素材往页面里一放，再配上深色底、金色强调色，整体的“完成度”一下就上来了。这里要注意版权边界，课程作业用于展示可以，配一句“素材仅用于学习演示”会更稳妥，不要打包成资源去公开传播或商用。

1.2 游戏主题好出效果，但要把范围控制在三天内完成

很多同学看到这里会热血上头，想着把官网首页整个复刻一遍。千万别。期末作业最大的敌人是贪多，功能规划太多、又缺乏开发经验，最后往往是样式没调完、联调时全是 Bug，连提交都赶不上。以三天为开发周期，我的建议是做六个核心区：导航栏、轮播 Banner、英雄档案区、新手指南区、页脚信息区，再加一个返回顶部浮层。交互层控制在四个：轮播自动播放、英雄分类筛选、英雄详情弹窗、回到顶部。

这个工作量放到具体页面里会比较克制：每一块都不难，但合在一起已经能让老师看到完整的“HTML 结构 + CSS 布局 + JavaScript 事件”闭环。更聪明的方式是把英雄档案区设计成数据驱动，用一份数组保存十几个英雄的信息，然后通过 JavaScript 渲染到页面。这样既避免了在 HTML 里复制粘贴十几套卡片结构，又能在互动筛选时省掉大量重复逻辑，是典型的“学生作业里的专业设计思路”。

如果时间还剩，再考虑给站点加背景音乐、页面阅读进度条这些锦上添花的小功能。我会在后面单独开一节讲低成本加分项，但主线任务永远是：先交出一个看得顺眼的完整页面，再谈惊喜。

2. HTML结构先行：把你的页面当成一套游戏官网骨架来搭

2.1 页面分区与语义化标签的选择

很多新手写代码是看见什么写什么：左侧一个 sidebar，右侧一个 content，名字直接叫 left 和 right。这样写到后面会非常痛苦，因为一旦调整布局，类名和结构就对不上语义了。更推荐的做法是从页面内容出发，把结构当成一棵树来搭。拿这套王者荣耀作业举例，大方向很简单：头部导航、主体内容、页脚三大块。

html复制<body>
  <header class="site-header">
    <div class="logo">王者英雄档案</div>
    <nav class="main-nav">
      <a href="#banner">首页</a>
      <a href="#heroes">英雄</a>
      <a href="#guide">新手</a>
    </nav>
  </header>

  <main>
    <section id="banner" class="game-banner"></section>
    <section id="heroes" class="hero-section">
      <h2>英雄列表</h2>
      <div class="hero-list"></div>
    </section>
    <section id="guide" class="guide-section">
      <h2>新手指南</h2>
    </section>
  </main>

  <footer class="site-footer">
    <p>页面仅用于课程设计学习演示</p>
  </footer>

  <script src="js/main.js"></script>
</body>

这里有几个细节值得解释。header、nav、main、section、footer 都是 HTML5 语义化标签，它们的作用不只是“看起来规范”，还能让屏幕阅读器和搜索引擎更容易理解页面结构。section 里的 id 很重要，导航栏的 href="#heroes" 要依靠它实现锚点跳转。如果之后想在 JS 里定位某个区域，id 和 querySelector 都是高效方式。嵌套结构建议统一缩进，标签闭合前养成先写结束符的习惯，后期改样式会省很多事。

2.2 千万别忽略文档头和 meta 标签

先看一份标准的文档头模板。网上搜代码经常会看到类似 <!doctype html><html lang="zh-cn"><head><meta charset="utf-8"><meta name="viewport"... 这么一串被复制出来的乱码式写法，其实它原本是一个很规范的模板，只是复制过程中丢折行、丢引号，导致某些属性不完整。

html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="keywords" content="王者荣耀, 英雄, HTML期末作业, 网页设计" />
  <meta name="description" content="基于HTML+CSS+JavaScript制作的王者荣耀主题学习展示页面" />
  <title>王者荣耀主题网页 - 期末大作业</title>
  <link rel="stylesheet" href="css/style.css" />
</head>

meta charset="UTF-8" 管的是页面字符编码，少了它中文会出现乱码。meta name="viewport" 管的是移动端视口宽度，缺了它手机浏览器会把页面当成电脑页面等比缩小，这个在响应式那一节会体现。title 是浏览器标签页上的名字，也常被忽略写成默认的“无标题文档”，这会直接拉低作业印象分。关键词和描述标签属于 SEO 范畴，期末作业里写上既显得完整，也能让浏览器搜索到自己本地文件时多一个展示入口。

2.3 导航链接该怎么写，href="javascript:void(0)"为什么用

课程上教链接时通常会写 <a href="https://xxx">，但做单页面作业时经常没有真实的外链地址，点击导航如果默认刷新到页面顶部，很影响体验。于是很多人会看到类似 href="javascript:void(0)" 的写法，这个写法的意思是：点击链接执行一段返回 undefined 的 JavaScript 代码，从而禁止浏览器默认跳转。

javascript:void(0) 能用，但它更适合配合内联 onclick 来用。比如：

html复制<a href="javascript:void(0)" onclick="openDetail()">查看详情</a>

这段代码里真正触发弹窗的是 onclick，href 只负责阻止跳转。很多新手常犯的错是把 onclick 写成了 onclick="openDetail"，少了括号，函数名没有被执行，点上去毫无反应。另一些情况下，样式或 JS 绑定的元素用了 <a>，但没有写任何 href，点击后一部分浏览器也不会触发键盘聚焦，可访问性较差。更现代的做法是给不需要跳转的元素直接用 <button>，或者保留 href 后在事件里调用 event.preventDefault()。期末作业阶段，用 href="javascript:void(0)" 不算错，但要记得：阻止跳转和触发交互是两回事。

3. CSS视觉体系：用深蓝与金色撑起“王者感”

3.1 用 CSS 变量统一整套配色

王者荣耀网页端给我的视觉印象可以概括成三个词：暗色、金属、高对比。深蓝黑背景提供沉浸感，金色文字或边框负责强调，红蓝两色再点缀英雄阵营。手工调色时最怕的是每个区块各写一套颜色，最后蓝得不统一、金得刺眼。要解决这个问题，第一件事是在 CSS 里定义一组变量。

css复制:root {
  --bg-deep: #0b1020;
  --bg-panel: rgba(255, 255, 255, 0.06);
  --gold: #c8aa6e;
  --gold-light: #ecd9a8;
  --text-main: #e9e9e9;
  --text-dim: #9aa4b8;
  --border-glow: rgba(200, 170, 110, 0.35);
  --radius: 12px;
  --transition: all 0.25s ease;
}

之后写到背景、边框、文字颜色时都用 var(--gold)、var(--bg-panel) 这种形式，好处是显而易见的。如果你想微调整体色调，只需要改 :root 里的几个值，全站都会联动变化。期末答辩时老师问“你的颜色系统怎么设计的”，你也能从变量和主辅色分工的角度答出设计逻辑。这里选择金色作为强调色还有一个原因：深蓝底上的金色天然带有“高等级装备栏”的联想，和游戏主题高度匹配，比直接红配绿更容易营造高级感。

3.2 Flex 与 Grid 的分工，以及子元素宽度自适应的翻车点

CSS 布局是期末作业里最容易暴露水平的部分。我的建议是两条腿走路：一维排列用 Flex，二维卡片网格用 Grid，不要整个页面都用 position: absolute 硬怼坐标。导航栏和按钮组适合 Flex，英雄列表与图片画廊适合 Grid。举一个实际使用场景：

css复制.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-nav {
  display: flex;
  gap: 24px;
}

.hero-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

这段代码里最实用的部分是 gap。以前做间距要写 margin，加上 gap 之后，Flex 与 Grid 子元素之间的间距不需要再单独考虑相邻兄弟关系，省掉很多“最后一个元素多出外边距”的清理问题。如果你希望子元素在 Flex 容器里自适应剩余宽度，经常写 flex: 1。但有一个高频翻车点：当子元素内部有很长的连续文本或图片时，即使设了 flex: 1，元素也可能被内容撑破容器，无法真正按比例收缩。

css复制.flex-item {
  flex: 1;
  min-width: 0; /* 允许内容收缩，避免被内容撑破 */
}

min-width 的默认值是 auto，Flex 子项在主轴方向上默认不允许小于内容宽度。一旦你发现“明明设置了 flex: 1，可它还是把兄弟元素挤没了”，优先检查是不是缺少 min-width: 0。这个知识点在很多教程里不会专门提，但在真实开发里能卡住你半小时。

3.3 卡片质感、涟漪光圈与旋转动效的实现思路

视觉高级感的第二层来自质感。纯色块会显得单薄，用渐变、半透明背景和阴影堆叠起来之后，卡片立刻就有了“皮肤”。写英雄卡片时，我通常会控制三层视觉：底层是半透明深色面板，中层是高光渐变，顶层是文字和装饰线。

css复制.hero-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(0,0,0,0.25));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 16px;
  transition: var(--transition);
}

.hero-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-glow);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

这里有两个值得注意的点。transform 和 opacity 这类属性触发动画时性能较好，因为它们不一定会引起回流，而直接改 margin-top 会让浏览器反复计算布局。transition 实现的是“状态之间平滑过渡”，它需要前后两个状态有明确的属性变化，只有当元素悬停状态存在时才有意义。有些同学写了 transition 却发现没动画，大概率是 hover 状态没有触发任何样式变化，或者选错了属性，比如想让卡片上浮却去改 top，但元素没有 position 定位时 top 根本不会起作用。

那“涟漪光圈扩散”这类效果是怎么做的呢？常见实现是用 box-shadow 的扩散范围模拟波纹，配合 animation 循环播放。示例如下：

css复制@keyframes ripple {
  0%   { box-shadow: 0 0 0 0 rgba(200, 170, 110, 0.5); }
  100% { box-shadow: 0 0 0 24px rgba(200, 170, 110, 0); }
}

.btn-primary {
  animation: ripple 1.6s infinite;
}

从 0 透明度到全透明、半径从 0 扩到 24px，视觉上就像水波散开。注意动画结束后要回到不可见的透明状态，否则最后一个关键帧会一直保留一圈明显的阴影。如果你追求更流畅的波纹扩散，可以改用 ::after 伪元素配合 transform: scale()，核心原理是一样的，只是 transform 的性能通常优于 box-shadow。

CSS 里的旋转也是常用动效。加载图标、按钮图标、返回顶部箭头都可以通过 transform 的 rotate 实现，但不要忘记加 transition，否则旋转会变成瞬间跳变而不是平滑转动。常见写法是图标默认顺时针转 90 度，再配一个 scale(1.1) 体现放大反馈。

4. JavaScript交互落地：轮播、筛选和弹窗背后的入门级正确写法

4.1 轮播图：定时器、取模和清理时机

轮播图是期末作业最高频的 JavaScript 功能之一，但不少同学上网抄了一段就完事，根本讲不清原理。我们完全可以自己写一个极简版，核心逻辑只有三步：准备数据、根据当前序号展示对应内容、定时器每隔几秒把序号加一。为了防止序号越界，用取模运算把索引限制在数组长度范围内。

javascript复制const slides = [
  { title: '欢迎来到王者大陆', image: 'images/banner-1.jpg' },
  { title: '新英雄登场', image: 'images/banner-2.jpg' },
  { title: '排位上分必看', image: 'images/banner-3.jpg' }
];

let currentIndex = 0;
let timer = null;

function renderSlide(index) {
  currentIndex = (index + slides.length) % slides.length;
  const banner = document.getElementById('game-banner');
  banner.style.backgroundImage = `url(${slides[currentIndex].image})`;
  document.getElementById('slide-title').textContent = slides[currentIndex].title;
}

function nextSlide() {
  renderSlide(currentIndex + 1);
}

function startAutoPlay() {
  if (timer) clearInterval(timer);
  timer = setInterval(nextSlide, 3000);
}

startAutoPlay();

(index + slides.length) % slides.length 这一段是重点，很多新手直接写 currentIndex++，到数组末尾后访问不存在的元素，整个 Banner 就会变成空白。取模能让序号在 0、1、2、0、1、2 之间循环，加一个 slides.length 是为了防止 index 为负数时的取模结果还是负数。这个写法虽然简单，但面试问“循环列表”时你也能直接用。

clearInterval(timer) 很多同学会漏掉。如果用户手动点了左右箭头后仍然保留原有定时器，自动播放和手动操作会互相打架。所以在 startAutoPlay 里先清掉旧定时器再开新的，是一个非常重要的习惯。

4.2 数据驱动渲染：用数组代替重复 HTML

英雄列表如果直接在 HTML 里复制粘贴十几张卡片，后续筛选和修改会变得非常笨拙。更聪明的做法是用数组保存英雄数据，渲染逻辑由 JavaScript 统一处理。这样要增加英雄，只需往数组里添加一个对象。

javascript复制const heroes = [
  { name: '亚瑟', role: '战士', lane: '对抗路', image: 'images/hero-yase.jpg' },
  { name: '安琪拉', role: '法师', lane: '中路', image: 'images/hero-anqila.jpg' },
  { name: '鲁班七号', role: '射手', lane: '发育路', image: 'images/hero-luban.jpg' }
];

const heroList = document.querySelector('.hero-list');

function renderHeroes(list) {
  heroList.innerHTML = list.map(h => `
    <article class="hero-card">
      <img src="${h.image}" alt="${h.name}" loading="lazy" />
      <h3>${h.name}</h3>
      <p>${h.role} · ${h.lane}</p>
    </article>
  `).join('');
}

renderHeroes(heroes);

模板字符串里的 ${} 插值能让你用很自然的语法拼出 HTML，比老式的字符串加号拼接可读性好很多。用 .map 把数组里的每个英雄对象映射成一段 HTML 字符串，再用 .join('') 合并成一个大字符串塞进容器。需要注意，插值内容如果是外部用户输入的数据，可能存在脚本注入风险，但这里的数据是我们自己在代码里定义的，所以没有这个问题。

添加筛选功能时，只需要根据当前选中的职业类型过滤原数组，再把过滤结果传入 renderHeroes 即可。数据源不用动，页面却能频繁更新，这是“数据和渲染分离”带来的最大便利。

4.3 “函数没有反应”的典型原因：DOM加载顺序与事件绑定

做完交互后查报错是必经之路。最经典的一个报错长这样：Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')。问题通常不是代码写错，而是脚本执行时 DOM 元素还不存在。浏览器解析 HTML 是从上往下执行的，如果把 <script> 写在 <head> 里，解析到脚本时 body 里的 .hero-list 还不存在，querySelector 自然拿到 null。解决方案主要有两个。

一是把 <script> 标签放到 </body> 结束之前，这也是我推荐初学者采用的方式，简单直观。二是如果脚本必须放在 head 或外部加载但希望等 DOM 就绪后再执行，可以用 DOMContentLoaded 包一层：

javascript复制document.addEventListener('DOMContentLoaded', function () {
  // 在这里写初始化逻辑
});

事件绑定的方式也值得留意。内联写法 onclick="openDetail()" 在页面里很常见，但缺点是一旦函数改名，所有 HTML 标签都要同步修改，代码一多很难维护。更规范的做法是用 addEventListener 选择所有目标元素，统一绑定行为。

javascript复制document.querySelectorAll('.detail-btn').forEach(btn => {
  btn.addEventListener('click', () => openDetail(btn.dataset.id));
});

如果你发现点击按钮后没有反应，第一件事不是重写整个函数，而是打开控制台看有没有报红色错误。常见的 xxx is not defined 说明函数名不存在或者被同名变量覆盖；Cannot read properties of null 说明取 DOM 的时候取空了；如果页面完全无反应，还要检查脚本文件有没有被正确引入，比如路径 404。调试时在函数内部先写一句 console.log('hello') 验证绑定是否成功，会快很多。

4.4 弹窗与遮罩：事件冒泡的正确处理

英雄详情弹窗是一个很适合期末展示的交互，因为点击列表项后弹出信息，能明显体现 JavaScript 对页面内容的动态控制。弹窗结构一般分成两层：遮罩层和内容卡片。点击遮罩关闭，点击卡片内部不关闭，这里就涉及事件冒泡。

假设一个弹窗结构如下：

html复制<div id="modal-mask" class="modal-mask">
  <div class="modal-content">
    <button id="modal-close">关闭</button>
    <div id="modal-info"></div>
  </div>
</div>

关闭弹窗最简单的做法是点击遮罩只判断事件目标是不是遮罩本身：

javascript复制const mask = document.getElementById('modal-mask');

mask.addEventListener('click', function (event) {
  if (event.target === mask) {
    mask.classList.remove('active');
  }
});

当点击落在 .modal-content 上时，事件会从内容卡片冒泡到遮罩层，但因为 event.target 是卡片而不是遮罩，条件判断不会成立，所以不会误关。这个处理方式比在每层都写 stopPropagation() 更清晰。弹窗的显隐用 .active 类控制，CSS 里定义默认隐藏、.active 时 display flex 并让内容居中，后续就能通过简单地添加或移除类名控制弹窗开关。

5. 低成本高回报的加分项：进度条、背景音乐、响应式与细节体验

5.1 阅读进度条与返回顶部

做完主功能后，如果你还想让页面比同班同学更“立体”一点，我首推阅读进度条和返回顶部按钮。阅读进度条的实现原理是监听页面滚动的距离，计算它占整个可滚动高度的百分比，再同步到顶部一条固定横条的宽度。

javascript复制const progressBar = document.getElementById('progress-bar');

window.addEventListener('scroll', () => {
  const scrollable = document.documentElement.scrollHeight - window.innerHeight;
  const percent = (window.scrollY / scrollable) * 100;
  progressBar.style.width = percent + '%';
}, { passive: true });

passive: true 的目的是告诉浏览器这个监听器不会调用 preventDefault，现在的新浏览器默认也会对滚动事件做优化，但写出来是更专业的表现。scrollY 是已经滚过去的距离，scrollHeight 是整个文档高度，innerHeight 是窗口可视高度，两者之差就是“还能滚多少”，用当前距离去除得到进度。返回顶部按钮只需要在点击时调用 window.scrollTo({ top: 0, behavior: 'smooth' })，behavior: 'smooth' 是浏览器原生平滑滚动，不需要你自己写动画。

5.2 背景音乐按钮，以及自动播放被拦的问题

很多游戏主题页面会加上背景音乐，让老师打开页面的瞬间就能感受到氛围。实现本身不复杂，用 Web Audio 或直接操作 <audio> 都能做到。

html复制<audio id="bgm" loop>
  <source src="audio/bgm.mp3" type="audio/mpeg" />
</audio>
<button id="music-btn">播放音乐</button>

javascript复制const audio = document.getElementById('bgm');
const musicBtn = document.getElementById('music-btn');

musicBtn.addEventListener('click', function () {
  if (audio.paused) {
    audio.play();
    musicBtn.textContent = '暂停音乐';
  } else {
    audio.pause();
    musicBtn.textContent = '播放音乐';
  }
});

这里有一个浏览器策略问题：很多浏览器禁止页面加载后自动播放带声音的媒体，除非用户和页面产生了交互。如果你想在页面一打开就播放背景音乐，直接调 audio.play() 很可能会在控制台看到类似 NotAllowedError 的拦截提示。解决办法是在用户第一次点击按钮或点击页面任意处后再触发播放，这也是为什么大多数官网会做一个显眼的音乐开关。期末演示时可以先提示老师“点击允许后才有声音”，比页面加载后突然响起来更从容。

5.3 用媒体查询和现代 CSS 快速做出移动端适配

老师不一定只在电脑上打开你的作业，如果页面只有 1920 屏宽下的样式，一旦拖小窗口就乱掉，这是很容易被扣分的点。响应式不一定需要多高深的技术，靠媒体查询加栅格列数变化就能覆盖大部分场景。

css复制@media (max-width: 900px) {
  .hero-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .hero-list {
    grid-template-columns: 1fr;
  }
  .main-nav {
    flex-direction: column;
    align-items: center;
  }
}

从 4 列变成 2 列再变成 1 列，是我处理卡片列表最常用的断点策略。文字大小可以用单位 clamp()，比如 font-size: clamp(14px, 2vw, 18px);，它允许字号随视口宽度平滑变化，但限制在一个最小值和最大值之间。写完后记得用浏览器的开发者工具切换成移动设备模拟，检查横向滚动条是否出现。如果有元素溢出，优先排查宽度是否写死、图片有没有设置 max-width: 100%。

5.4 细节体验：懒加载、动态年份与文字排版

不要小看细节，细节最容易给老师“这个同学很专业”的感觉。第一，给列表里的图片加上 loading="lazy"，浏览器会在滚动到图片附近时才真正加载它，解决一次加载多张原画造成的卡顿。第二，页脚年份如果手写在 HTML 里，明年打开就过期了，用 JavaScript 自动更新更优雅。

javascript复制document.getElementById('year').textContent = new Date().getFullYear();

第三，全局文字排版需要一个基础设置。把 line-height 设为 1.6 到 1.8 之间，段落阅读体验会舒服很多；中文字体不需要特意引入网络字体，因为作业页面通常是本机演示，用系统字体栈就足够，如果为了视觉效果想用标题字体，尽量选择能离线的字体文件，否则演示时没有网络字体就会回退成默认样式，反而失控。

6. 提交前最容易翻车的场景与排查方法

6.1 图片、CSS、JS引用不到：路径问题和目录规范

期末作业最常见的崩溃现场是：页面上全是裂图，样式全部丢失，按钮点击毫无反应。原因往往不是代码逻辑，而是文件路径写错了。这里强烈建议从创建目录的第一天就固定结构，不要今天把 CSS 放 css 文件夹，明天又把新样式写进 style.css 之外。

推荐的项目目录：

text复制project-root/
│
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── images/
│   ├── banner-1.jpg
│   └── hero-yase.jpg
└── audio/
    └── bgm.mp3

引用文件时，从 index.html 出发到 css/style.css 要写 css/style.css，到图片要写 images/hero-yase.jpg。很多同学拷贝素材后保留原始中文名或带空格的文件名，浏览器解析时很容易出问题，建议统一改成英文小写和连字符命名。另外，图片资源比较大时，可以直接在文件管理器里压缩一下图片尺寸，或者转成 WebP/JPG 格式，既加快加载也避免演示时转圈。

6.2 CSS样式“不生效”与样式被覆盖

写了样式但页面没反应，先检查有没有引入外部 CSS 文件，再看选择器是否写对了类名，最后检查优先级。.hero-card .name 的优先级高于 .name，内联样式高于外部选择器，ID 选择器高于类选择器。如果你引用了某个 CSS 框架或别人的模板，自己的样式被覆盖是很常见的，因为后加载的样式通常是最后的胜利者。

不要一遇到覆盖问题就上 !important。用多了会让代码变得没法维护，后期想再调整只能继续堆 !important。正确的做法是提高自己选择器的优先级，或者调整 CSS 文件的引入顺序，把自己的主样式放在最后。对于期末作业来说，完全可以不引第三方 UI 框架，自己控制所有样式反而更容易回答老师的提问。

6.3 相邻元素之间莫名多出缝隙：外边距塌陷合体迷思

做完 Hero 区块后，往下写新手指南时经常发现两个区块之间没有按预期的间距走，或者给上方元素设了 margin-bottom 但视觉上两个标题仍然贴得很近。这很可能不是代码写漏了，而是 CSS 的“外边距塌陷”在捣乱。在普通文档流中，上下两个兄弟元素的垂直外边距不会简单相加，而是取两者中较大的一个。如果一个兄弟元素的 margin-bottom 是 30px，另一个的 margin-top 是 20px，最终间距是 30px 而不是 50px。

解决这个问题的方法有很多：给容器设置 display: flex 或 display: grid，这种格式化上下文内垂直外边距不会合并；或改用 gap 控制间距；也可以给父容器加内边距把两个兄弟子元素隔开。理解了这一点，再看到“上一个兄弟元素和下一个兄弟元素之间的间距不稳定”时就不会一脸懵了。

6.4 打开控制台，学会阅读报错信息再动手改

最后想强调一个习惯：出了问题先打开浏览器控制台。按 F12 进入开发者工具，切到 Console 面板，红色的报错会直接告诉你出错的脚本文件和行号。举个例子，如果报错写着 main.js:12 Uncaught TypeError: Cannot read properties of null，你应当先去 main.js 第 12 行看是不是在 DOM 还没加载完时取了一个不存在的元素，而不是把整个文件从头怀疑一遍。

文件无法预览时也一样。直接双击 index.html 用 file:// 协议打开虽然能看页面，但涉及音频、视频或部分模块加载时容易受浏览器本地安全策略影响。我习惯的做法是在 V