吟游诗人基德每年临近期末，我都能收到好几条几乎一模一样的问题：“HTML+CSS 的期末大作业不知道做什么主题，像火影这种动漫主题做 6 页是不是工作量很大？”其实只要套路对了，这个题反而是静态网页里最好拿分的方向——火影的人设、招式、剧情、台词全是现成素材，颜色对比又强烈，页面做出来天然有视觉记忆点；题材上又能逼着你去用列表、表格、卡片、表单这些 HTML 基础标签。更关键的是，6 个页面正好能覆盖一门 Web 前端基础课想考察的大部分知识点。
这篇我会把整套完整思路写出来：页面怎么规划、HTML 骨架怎么搭、火影视觉风格从哪里入手、角色介绍页从零到一怎么做，以及交作业之前容易踩的那些坑。适合正在写 HTML+CSS 静态网页作业的在校学生，也适合想快速做一套完整动漫主题站、但又不想碰 JavaScript 的入门学习者。
1. 期末大作业的隐藏评分线：先弄明白老师想看什么
很多同学做期末网页失败，不是因为代码能力不行，而是根本没搞清楚评分逻辑。你花三天做出来的酷炫动画，在老师眼里可能不如一个结构干净、链接全通、知识点覆盖完整的普通页面。HTML+CSS 期末作业本质上不是“比谁技术先进”，而是考你对基础标签、基础样式和页面组织能力的掌握程度。
1.1 一张典型评分表背后的四个维度
不少学校的 Web 前端课程评分表虽然写法不同，但拆开来看基本都集中在四个方向：
- 技术点覆盖：页面里有没有合理使用文本、图片、列表、超链接、表格、表单、音频/视频等基础元素；CSS 有没有用到选择器、背景、边框、浮动或弹性布局、伪类、过渡动画。
- 完整度：6 个页面是不是都能打开，导航能不能从首页跳到任意页面再跳回来，有没有死链，图片是否正常显示，CSS 是否统一。
- 设计完成度：整站配色、字体、间距是否统一，不是每个页面换一套风格；主题是否鲜明，内容和主题是否贴合。
- 可复现与讲解：代码是否能在本地直接打开演示，老师随机问一个样式为什么生效时你能不能答得上来。
我辅助改过不少低年级同学的作业，最可惜的就是那种首页做得特别惊艳、结果点开“角色介绍”标签 404 的情况。那份首页投入了大量精力，但老师打开后第一反应是“整体无法演示”，评分直接降档。所以做 6 页站，先把所有页面的连通性放在第一位，再去琢磨局部的视觉细节。
1.2 为什么“火影主题站”适合 HTML+CSS 作业
动漫主题网页在企业站里不太常见，但这恰恰是它好做的地方：企业站要求“稳”，排版稍不留神就露怯；但主题站允许张扬，可以用大面积深色背景、高饱和橙色、大字标题和贴图营造氛围。即使 CSS 功底一般，只要色彩方向对了，页面效果也不会差。
另一个优势是内容组织极其顺手。火影有大量可分类的内容：人物角色可以做成卡片墙，忍术体系可以做成表格或图鉴，经典剧情可以做成时间线，名场面可以做成图文展示，再加上一个自我介绍/调查页面。每个页面都能对应一种 HTML 标签和 CSS 布局方法，知识点覆盖自然就完整了。
1.3 6 页不是越多越好，每页要有任务分工
有些同学一听“6 页”，就把同一个布局复制六次，只是换了文案和图片，这叫无效工作量。导师翻下来只会觉得你在充数。好的 6 页作业，应该每一页有不同的内容形态和不同的布局侧重点——这也是“站”和“页”的最大区别。站是有信息结构的，页只是其中一环，比如角色页要用网格或卡片，剧情页要用时间线或纵向列表，咒术/道具页用分类表格，这种多样性本身就是得分点。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 六页导航地图：写代码之前先把整站结构钉死
不少人拿到题目就开始写 index.html，写到第四页发现素材不够、导航乱了，又回头改第一页。正确顺序是反过来：先在纸上或表格里定好六页分别是哪些内容，再确定每一页要展示什么信息、用哪种主要布局，最后才开始敲 HTML。
2.1 一份可直接参考的页面职责分配表
以下是我自己给学生推荐过的一套 6 页结构，能够覆盖这门课需要的大部分标签：
| 文件名 | 页面定位 | 主要展示内容 | 主要技术点 |
|---|---|---|---|
| index.html | 首页 | 通栏 Banner、一句话主题口号、三个内容入口卡片、最新资讯 | 背景图、flex 布局、卡片 hover |
| characters.html | 角色介绍 | 木叶主要角色卡片墙，每人一张头像 + 简介 | grid 网格布局、图片裁切、卡片悬浮 |
| story.html | 剧情篇目 | 经典篇章的时间线/剧集列表，每段配简介 | 无序列表、伪元素时间节点、段落排版 |
| ninjutsu.html | 忍术与忍具图鉴 | 按类别展示忍术和忍具，类型分组 | 表格、分组标题、斑马纹 |
| gallery.html | 名场面图册 | 经典画面九宫格，附简短台词 | 图文混排、hover 放大、图文说明 |
| about.html | 留言与简介 | 自我介绍、火影安利理由、调查表单 | form 表单、输入框焦点状态 |
这套结构里，页面之间信息没有大量重复，每页的 HTML 标签重点也不同。index 主要负责撑起“第一印象”，characters 是视觉重心，story 练排版，ninjutsu 练表格，gallery 练图片处理，about 练表单。六个页面走完，老师想看的知识点基本都齐了。
2.2 导航栏是站点的生命线，务必全站一致
导航栏是 6 个页面的生命线。全站导航结构必须是同一份，标签顺序也一致，唯一变化的是当前页面所在链接的高亮状态。纯 HTML+CSS 阶段没有“公共组件”的概念，所以常规做法是复制同一份导航代码到每个页面，然后把当前页对应的 <li> 加上 class="active"。
比如在 index.html 里，“首页”菜单项高亮：
html复制<nav>
<ul>
<li><a href="index.html" class="active">首页</a></li>
<li><a href="characters.html">角色</a></li>
<li><a href="story.html">剧情</a></li