用HTML+CSS+JavaScript打造足球主题网站：期末大作业完整指南-代码聚汇网

又到了期末大作业的季节。每年这个时候，都会有学弟学妹拿着网页设计课的作业要求来找我，问得最集中的是两个问题：一是"老师要求用HTML+CSS+JavaScript做一个完整网站，我该选什么题材"，二是"做完的东西总感觉很散，没有网页设计该有的样子，怎么调整"。

如果你也在为这件事发愁，我建议你认真考虑一下足球主题。这个题材我实际带过不少学生做，优点是相当明显的：球队、球员、赛程、排名、数据统计天生就是结构化内容，往页面里填充的时候几乎不用纠结"这里该放什么"；而且运动类网页允许你用高饱和配色和大胆动效，视觉冲击力强，答辩演示时讲故事的空间也大。

这篇文章我会从选题规划、HTML骨架搭建、CSS视觉设计、JavaScript交互逻辑四个核心环节，把一个足球主题网页从零到一的完整流程拆开给你看。里面的代码写法都是我在实际辅导项目中验证过、可以直接复制改用的，也会把新手最容易踩的坑单独拉出来讲清楚。无论你是想拿高分，还是想通过这个项目真正搞懂前端三件套的协作方式，都值得读完。

1. 为什么是足球：期末大作业的选题与整体规划

1.1 期末大作业选题的三个硬标准

先说一个结论：期末网页大作业选什么题材，往往比怎么写代码更重要。因为大多数课程的评分维度就三类——页面结构是否完整、视觉设计是否出效果、交互功能是否达标。题材决定了你能不能在有限时间内把这三点同时做好。

我判断一个题材合不合适，一般用三个标准：

信息密度适中。题材内容太少，比如就做一个个人介绍页，页面撑不起来，代码量也达不到"完整网站"的要求；题材内容太多，比如做一个电商全站，光商品列表和购物车逻辑就能把你熬秃。足球主题恰好卡在中间，一个球队主页可以拆出导航、轮播、球队介绍、赛程表、数据排行、留言区至少六块内容，每块的实现难度都不高。
素材容易获取。这里说的素材不是让你去侵权盗图，而是指在视觉上容易建立统一风格。足球主题有非常成熟的视觉语言——绿茵场的草绿色、足球的黑白五边形、球衣的队徽配色、记分牌的数字字体，这些元素你哪怕用纯CSS画，都能画出"像那么回事"的效果。相比之下，如果做一个"智慧校园"之类的题目，要出效果基本得靠找图，难多了。
交互功能好编。评委老师通常希望看到JavaScript带来的"动态效果"，而足球主题随时可以造数据：比分变化、赛程切换、积分榜排序、球员数据滚动。这些功能用数组、对象、循环、事件监听就能实现，不需要碰复杂的算法，非常适合期末阶段的时间安排。

所以，别再纠结做"美食网站"还是"旅游网站"了，如果你想要一个稳妥的、好讲的、又能拿高分的项目，足球主题几乎是最优解之一。

1.2 功能模块划分：先想清楚做哪些再动手

很多同学拿到作业要求直接打开编辑器就开始写代码，这是大忌。我习惯先花半小时把整个页面的功能模块画出来。一个足球主题的完整网站，我推荐至少包含这些模块：

模块	核心内容	涉及技术点
导航栏	站内锚点跳转、吸顶效果	CSS定位、JavaScript滚动监听
Banner区	大图轮播或口号标语	CSS动画、JavaScript定时器
球队展示区	球员卡片、球队简介	CSS Flex布局、Hover特效
赛程与结果	近期比赛信息	HTML表格语义化、CSS条纹样式
数据排行	积分/进球数排名	JavaScript数组遍历、DOM动态渲染
互动模块	留言、投票、评分	表单校验、事件监听
页脚	版权信息、外部链接	基础语义化标签

有了这个清单，再去规划文件结构就很简单了。建议用下面这种规范的结构：

code复制football-project/
├── index.html          # 主页面
├── css/
│   └── style.css       # 全站样式
├── js/
│   └── main.js         # 全部交互逻辑
└── images/
    └── banner.jpg      # 图片素材

不要上来就分多个HTML页面。期末大作业用单页面多区块的结构反而更好：写起来省事、答辩演示时不用来回切换、链接关系也不会出错。下面的内容我都基于这个单页面结构展开。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 页面骨架：HTML语义化帮你把结构立起来

2.1 文档头部的正确姿势

HTML是整个页面的骨架。骨架搭不对，后面CSS和JavaScript再怎么写都别扭。先看一个标准的文档头和导航结构：

html复制<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绿茵风暴 - 足球俱乐部官方网站</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

这里有几个容易忽略的点。第一，lang="zh-cn" 一定要写，它告诉浏览器页面使用的是简体中文，对后续的朗读、翻译、搜索引擎收录都有影响。第二，meta viewport 是移动端适配的基础，不写的话在手机上预览时页面会被强制缩小，视觉效果非常拉胯。第三，link 标签的路径是 css/style.css，这是相对路径，意味着CSS文件必须放在css文件夹里，很多同学第一次预览时样式全丢，十有八九就是路径写错了。

2.2 导航栏与Banner区

导航栏我建议用 header + nav 的组合，这是HTML5里专门为页面头部设计的语义化标签，比清一色的 div 要规范得多，答辩时老师问"这个区块为什么用header"，你能答出"语义化标签"五个字就是加分点。

html复制<header id="top">
    <nav class="navbar">
        <div class="logo">绿茵<span>风暴</span></div>
        <ul class="nav-menu">
            <li><a href="#home">首页</a></li>
            <li><a href="#team">球队阵容</a></li>
            <li><a href="#schedule">赛程</a></li>
            <li><a href="#rank">积分榜</a></li>
            <li><a href="#message">留言</a></li>
        </ul>
    </nav>
</header>

<section id="home" class="banner">
    <h2>为热爱而生</h2>
    <p>这里是绿茵风暴俱乐部，追逐胜利，永不停歇。</p>
    <a href="#team" class="btn-primary">了解更多</a>
</section>

Banner区我选择了 section 标签，因为它是有主题的独立内容块。注意这里的锚点链接 href="#team"，它和下面各个区块的 id 是一一对应的，点击导航栏就能跳到对应位置，这就是最基础的单页面滚动导航。

很多同学会在这里犯一个错误：写链接时用 href="javascript:void(0)" 来占位。这个写法虽然能阻止页面跳转，但它的副作用是你点击链接时JavaScript会在地址栏执行一个 void 操作，偶尔会引起运行时报错，而且在地址栏粘贴链接时会变成 javascript:void(0) 这种奇怪的东西。正确做法是：如果没有真实跳转目标，就别写 href，改用 span 或者加上真实的锚点地址，等JavaScript事件里用 preventDefault() 阻止默认行为即可。

2.3 球队阵容与赛程表格

接下来是球队阵容区。这一块我推荐用卡片式布局，每个球员是一张卡片，里面放一个队徽占位圆、球员名字和号码。

html复制<section id="team" class="team-section">
    <h2 class="section-title">球队阵容</h2>
    <div class="team-cards">
        <article class="player-card">
            <div class="jersey">10</div>
            <h3>林风</h3>
            <p>前锋 · 队长</p>
        </article>
        <article class="player-card">
            <div class="jersey">8</div>
            <h3>陈赫</h3>
            <p>中场 · 组织核心</p>
        </article>
        <article class="player-card">
            <div class="jersey">1</div>
            <h3>王浩</h3>
            <p>门将 · 后防铁闸</p>
        </article>
    </div>
</section>

注意一点：球员名字我这里全部用的虚构人名，你完全可以换成自己设计的角色名字。这里使用 article 标签很合适，因为它代表一个可以独立成篇的内容单元。每张卡片的class名是 player-card，后面CSS里要用这个类名来设置宽度和hover效果。

赛程表是另一个展示结构化内容的王牌模块。用表格的方式最清晰：

html复制<section id="schedule" class="schedule-section">
    <h2 class="section-title">近期赛程</h2>
    <table class="match-table">
        <thead>
            <tr>
                <th>日期</th>
                <th>主队</th>
                <th>比分</th>
                <th>客队</th>
            </tr>
        </thead>
        <tbody id="match-body">
            <!-- 数据由JavaScript动态渲染 -->
        </tbody>
    </table>
</section>

我把 tbody 的 id 设置成 match-body，意思很清楚：表格的行数据不写死在HTML里，而是交给JavaScript用数组和循环动态生成。这就是一个很好的"数据与展示分离"设计，答辩时可以说这是我特意做的一个架构选择。下面到JavaScript部分我会把对应的代码一起贴出来。

2.4 留出互动区和页脚

期末大作业如果想拿高分，最好有一个表单类交互模块。我建议做一个简单的留言区和一个"你最喜欢的球员"投票区。

html复制<section id="message" class="message-section">
    <h2 class="section-title">留言板</h2>
    <form id="msg-form">
        <input type="text" id="msg-name" placeholder="你的昵称" required>
        <textarea id="msg-content" placeholder="写下你想说的话..." required></textarea>
        <button type="submit">提交留言</button>
    </form>
    <ul id="msg-list" class="msg-list"></ul>
</section>

这个表单先不做任何样式，裸结构看着不美观没关系，CSS部分会把它变得像样。表单里的 required 属性很重要，它触发的浏览器原生必填校验不依赖JavaScript，如果漏写了，后面做JS校验时就会多一层麻烦。

最后是页脚：

html复制<footer class="footer">
    <p>© 2024 绿茵风暴足球俱乐部 · 本页面仅用于前端学习与期末作业展示</p>
</footer>

到这里，一个完整的HTML骨架已经立起来了。你可以先用浏览器打开这一步的index.html，页面虽然丑，但结构是完整的，所有区域都能滚动到。骨架没问题，接下来才轮到CSS把它的颜值提起来。

3. 视觉系统：用CSS让页面真正"像作品"

3.1 配色逻辑与基础重置

CSS是前端三件套里见效最快、也最容易失控的一个。很多大作业看起来"土"，根源不在技术，而在配色没有章法。我建议你死死记住一个原则：一个页面最多用三种主色，其余全部用黑白灰。

足球主题我推荐这套配色，几乎不用调就能出效果：

用途	色值	说明
主色（草坪绿）	`#1B5E20`	用于导航栏、页脚、按钮
辅助色（亮绿）	`#4CAF50`	用于hover高亮、数据标签
强调色（金黄）	`#FFC107`	用于重要数字、特殊标记
背景色	`#F5F7FA`	浅灰白，保证文字可读
文字色	`#212121`	深灰黑，不刺眼

有了配色方案，接下来必须先做一套"基础重置"CSS。浏览器对HTML元素默认有各种margin和padding，不重置的话不同浏览器打开你页面会出现不一样的间距，老师换台电脑演示效果就崩了。

css复制* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    background-color: #F5F7FA;
    color: #212121;
    line-height: 1.6;
}

* 选择器清零内外边距是新手最值得掌握的技巧。box-sizing: border-box 的作用是让元素的实际宽高包含padding和border，这样你在用百分比或Flex布局时，子元素的尺寸不会因为内边距而溢出。scroll-behavior: smooth 是CSS自带的平滑滚动效果，你甚至不用写JavaScript就能让锚点跳转带滑动动画，属于性价比极高的加分项。

3.2 Flex布局：让卡片自动排布

球队阵容区的三张卡片，我希望它们在宽屏时横着排，在窄屏时自动换行。最简单的实现方式就是Flex：

css复制.team-cards {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.player-card {
    flex: 0 1 240px;
    background: #ffffff;
    border-radius: 16px;
    text-align: center;
    padding: 24px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.player-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

这里最容易出问题的就是 flex: 0 1 240px。很多新手看到 flex 就只知道 display: flex，其实 flex 后面的三个值是 flex-grow flex-shrink flex-basis 的缩写：0 表示不放大，1 表示允许缩小，240px 是基准宽度。这样写的好处是卡片在窄屏上会等比例缩小而不是溢出，宽度小于240px时就换行，不会再出现那种左右错位的"纸片"现象。

hover时用 transform: translateY(-8px) 让卡片有"浮起来"的感觉，这是成本最低、效果提升最明显的一个动画。几乎所有大作业页面加了这一句之后，视觉档次都会上一个台阶。

3.3 轮播图与涟漪光圈动画

热搜词里反复出现"css动画效果网站"和"css涟漪光圈扩散"，这倒是提醒我了——期末大作业的视觉亮点其实可以完全靠CSS动画实现，连一张图都不用找。

Banner区我最推荐做一个纯CSS的渐变背景加上流光扫过的效果，再加一个涟漪光圈扩散动画，看起来会非常"专业"：

css复制.banner {
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 40%, #388E3C 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

linear-gradient 渐变可以制造出绿茵场的深浅过渡，比平铺一张纯色背景有层次感得多。为了让背景动起来，可以再叠加一个伪元素：

css复制.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    transform: skewX(-20deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0%   { left: -75%; }
    50%  { left: 125%; }
    100% { left: -75%; }
}

这是一段经典的"光束扫过"动画，它在Banner上横向移动一道半透明光带，模拟现场灯光扫过球场的感觉。skewX(-20deg) 让光带斜着切过去，更像真实的光束。

涟漪光圈扩散就更有意思了，适合放在进球数据或核心按钮上：

css复制.btn-primary {
    position: relative;
    overflow: hidden;
    background: #FFC107;
    color: #1B5E20;
    border: none;
    padding: 12px 32px;
    border-radius: 40px;
    cursor: pointer;
    z-index: 1;
}

.btn-primary::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: ripple 2s infinite;
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(12);
        opacity: 0;
    }
}

这个动画的原理很简单：一个白色半圆点从按钮中心不断放大、淡出，看起来就像水面的涟漪一圈圈荡开。用在主按钮上，答辩时很容易被老师注意到。

3.4 表格条纹与响应式兜底

赛程表格的CSS可以稍微讲究一点。加条纹背景能明显提升阅读体验，高亮某一行数据也方便突出重要信息：

css复制.match-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
}

.match-table th {
    background: #1B5E20;
    color: #ffffff;
    padding: 12px;
}

.match-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.match-table tbody tr:nth-child(odd) {
    background: #F0F4F0;
}

.match-table tbody tr:hover {
    background: #FFC107;
    cursor: pointer;
}

nth-child(odd) 是CSS里的"奇偶选择器"，专门用来做斑马条纹表格。最后一行的 tr:hover 让鼠标悬停时整行变成金色，这个小细节会让人觉得你的页面有交互反馈。

在桌面端一切正常之后，千万别忘了响应式。期末作业的演示机器屏幕大小不确定，至少要让页面在手机上不难看：

css复制@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
        gap: 10px;
    }

    .banner {
        height: 60vh;
        text-align: center;
        padding: 0 20px;
    }

    .player-card {
        flex-basis: calc(50% - 24px);
    }
    .match-table {
        font-size: 14px;
    }
}

@media 媒体查询是响应式的核心，它把移动端样式和桌面端样式区分开。这里用了整个页面最关键的三个调整：导航栏竖着排、Banner变矮、卡片降为两列。老实说，不少大作业在手机上预览时排版全乱，你只要做到这一步，就已经甩开很多人了。

4. 动态交互：JavaScript让页面"活"起来

4.1 导航吸顶的两种写法

导航吸顶是期末大作业里出现频率最高的交互需求之一——页面往下滚时，导航栏固定在最上面。实现它有两种思路。

第一种是CSS方案，核心属性 position: sticky：

css复制.navbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(27, 94, 32, 0.95);
    backdrop-filter: blur(8px);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

position: sticky 是我最推荐给新手的方案，因为它不需要任何JavaScript。导航栏在滚动时会自动粘在视口顶部，而它的父容器没有设置 overflow 的话，行为非常稳定。backdrop-filter: blur(8px) 是给导航栏加了一层毛玻璃效果，滚动时背景文字透过半透明导航栏会模糊掉，观感很现代。

第二种是JavaScript方案。如果你希望吸顶触发时有额外的动画（比如导航栏高度变化、加阴影），可以用滚动监听：

javascript复制window.addEventListener('scroll', function () {
    const navbar = document.querySelector('.navbar');
    if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

然后配合CSS里的 .navbar.scrolled 去加深背景、加阴影。这个写法的优点是触发时机完全可控，缺点是需要监听滚动事件，性能上不如CSS方案。我个人建议：能用CSS实现的效果，优先用CSS，JavaScript留给真正需要数据处理的事。

4.2 赛程数据动态渲染：数组+循环的威力

还记得前面HTML表格里留的那个 id="match-body" 吗？现在它该派上用场了。赛程数据的动态渲染是整个JavaScript部分最有含金量的一块，代码逻辑也不复杂：

javascript复制const matches = [
    { date: '2024-06-01', home: '绿茵风暴', score: '2 : 1', away: '猎鹰FC' },
    { date: '2024-06-08', home: '雷霆联', score: '0 : 0', away: '绿茵风暴' },
    { date: '2024-06-15', home: '星辉队', score: '1 : 3', away: '绿茵风暴' },
    { date: '2024-06-22', home: '绿茵风暴', score: '4 : 0', away: '飞马队' }
];

function renderMatches() {
    const tbody = document.getElementById('match-body');
    if (!tbody) return;

    let htmlStr = '';
    matches.forEach(function (match) {
        htmlStr += `
            <tr>
                <td>${match.date}</td>
                <td>${match.home}</td>
                <td><strong>${match.score}</strong></td>
                <td>${match.away}</td>
            </tr>
        `;
    });
    tbody.innerHTML = htmlStr;
}

document.addEventListener('DOMContentLoaded', renderMatches);

这段代码的核心是"数据驱动视图"：先把比赛数据放在数组里，然后用 forEach 遍历生成HTML字符串，最后一次性塞进 tbody。这样做的好处非常直接——以后想改比赛结果，只需要改数组里的数据，页面会自动更新，不用再挨个去HTML里改。答辩时老师问"为什么把数据放在JS里"，你有非常清晰的回答：这是为了数据与结构分离，也是JavaScript最核心的应用场景。

注意我用了 document.addEventListener('DOMContentLoaded', renderMatches)，这句的意思是等HTML文档完全加载后再执行渲染。如果不加这一句，而脚本又放在 head 里，执行时 match-body 这个节点还不存在，getElementById 会返回 null，整段代码直接报错。这就是热搜词里"javascript运行时报错"最常见的来源——操作了尚未加载的DOM节点。

4.3 球迷评分与本地存储

再来看一个稍微进阶一点的交互：球迷评分。用户点击星星给球队打分，然后用 localStorage 记住评分，下次刷新页面评分还在。这个小功能对答辩非常加分，因为它涉及事件监听、DOM操作、浏览器存储三块内容。

javascript复制const stars = document.querySelectorAll('.star');
const ratingTip = document.getElementById('rating-tip');
let currentRating = 0;

const savedRating = localStorage.getItem('team-rating');
if (savedRating) {
    currentRating = Number(savedRating);
    updateStars(currentRating);
}

stars.forEach(function (star, index) {
    star.addEventListener('click', function () {
        currentRating = index + 1;
        localStorage.setItem('team-rating', currentRating);
        updateStars(currentRating);
        ratingTip.textContent = '感谢你的评分：' + currentRating + ' 星';
    });
});

function updateStars(rating) {
    stars.forEach(function (star, index) {
        star.style.color = index < rating ? '#FFC107' : '#ccc';
    });
}

配套的HTML就是五个 span 元素，class都是 star，文字用 ★。这里有一个很关键的细节：localStorage.getItem('team-rating') 返回的是字符串，要转成数字才能和 index 比较大小，所以我用了 Number() 做强制转换。很多同学在这个地方比较失败，原因就是字符串 '3' 和数字 3 之间的隐式转换搞乱了判断条件。

localStorage 的用法就三个函数：getItem 读数据、setItem 存数据、removeItem 删数据。它能跨页面存储，刷新页面后数据依然存在，这是JavaScript语言层面自带的客户端存储能力，非常适合期末大作业这种"不能搭服务器"的场景。

4.4 留言板与空数据保护

留言板是表单交互的典型实现。这里要处理的核心问题是：用户提交后，把留言渲染到页面上，但不能让页面刷新。新手最容易犯的错是忘记 preventDefault()，导致表单提交时页面整个刷新，刚插入的留言瞬间消失。

javascript复制const msgForm = document.getElementById('msg-form');
const msgList = document.getElementById('msg-list');

const messages = JSON.parse(localStorage.getItem('messages') || '[]');

function renderMessages() {
    msgList.innerHTML = '';
    if (messages.length === 0) {
        msgList.innerHTML = '<li class="empty-tip">还没有留言，来抢沙发吧</li>';
        return;
    }
    messages.forEach(function (item) {
        const li = document.createElement('li');
        li.className = 'msg-item';
        li.innerHTML = `<strong>${item.name}</strong><p>${item.content}</p><small>${item.time}</small>`;
        msgList.appendChild(li);
    });
}

msgForm.addEventListener('submit', function (e) {
    e.preventDefault();
    const nameInput = document.getElementById('msg-name');
    const contentInput = document.getElementById('msg-content');
    const name = nameInput.value.trim();
    const content = contentInput.value.trim();

    if (!name || !content) {
        alert('昵称和留言内容不能为空');
        return;
    }

    messages.unshift({
        name: name,
        content: content,
        time: new Date().toLocaleString()
    });

    localStorage.setItem('messages', JSON.stringify(messages));
    nameInput.value = '';
    contentInput.value = '';
    renderMessages();
});

renderMessages();

这里我用了 Array.prototype.unshift 把新留言插到数组最前面，这样显示时最新的留言在最上面。JSON.parse(localStorage.getItem('messages') || '[]') 这一句很关键：首次访问时 localStorage 里没有 messages 这个键，getItem 返回 null，如果不加 || '[]'，JSON.parse(null) 会直接把程序搞崩。这是"空数据保护"的经典写法。

其实浏览器的原生 alert() 弹窗交互体验很一般，但期末大作业里用它是完全可以接受的，因为代码简单、逻辑透明、答辩时好解释。如果你想把体验做得好一点，可以换成页面内提示气泡，把 alert 替换成一个 div 的显隐控制，效果会更好，但这属于锦上添花，不着急。

4.5 轮播图自动播放与切换

轮播图几乎是网页设计课必考的功能。一个完整轮播需要三个能力：自动播放、左右切换、底部小圆点指示。下面是一个用 transform 实现的极简轮播，相比 display: none 切换，过渡动画更顺滑：

html复制<div class="slider">
    <div class="slider-track">
        <div class="slide">第1张</div>
        <div class="slide">第2张</div>
        <div class="slide">第3张</div>
    </div>
    <button class="prev">‹</button>
    <button class="next">›</button>
</div>

javascript复制const track = document.querySelector('.slider-track');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const slideCount = document.querySelectorAll('.slide').length;
let index = 0;

function goToSlide(n) {
    if (n >= slideCount) n = 0;
    if (n < 0) n = slideCount - 1;
    index = n;
    track.style.transform = `translateX(-${index * 100}%)`;
}

nextBtn.addEventListener('click', function () {
    goToSlide(index + 1);
});

prevBtn.addEventListener('click', function () {
    goToSlide(index - 1);
});

setInterval(function () {
    goToSlide(index + 1);
}, 3000);

原理很简单：.slider-track 是一个很宽的容器，里面对应3张幻灯片，每张宽度是容器的100%。通过改变 translateX 的负百分比，就能在水平方向平移容器，露出第N张。注意这里 % 是相对元素自身宽度来计算的，如果你没有给 .slide 设置 width: 100%，整个轮播就会乱套。

还需要给 .slider 和 .slide 补上对应CSS：

css复制.slider {
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    height: 300px;
    background: #2E7D32;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

overflow: hidden 是轮播的视觉关键，它把容器外面没轮到显示的部分全部裁掉。如果你漏掉了这句，三张幻灯片会一排横在页面上，非常壮观但完全错误。

5. 期末答辩高频问题与避坑经验

5.1 为什么页面显示不对：路径和加载顺序排查

做网页大作业时，90%的"页面显示不对"都出在下面三个原因上，我建议你遇到问题先按这个顺序排查：

CSS/JS文件路径错误。如果你的文件结构是 css/style.css，那么 link 和 script 标签里的 href 和 src 一定要从 css/ 写起。最稳妥的验证方法：在浏览器地址栏直接输入 http://127.0.0.1:5500/css/style.css，看能不能打开CSS文件，能打开说明路径没问题，打不开就是路径错了。
JavaScript代码执行时机太早。脚本放在 head 里且没有等待DOM就绪时，操作节点会得到 null。解决办法有几个：把 <script src="js/main.js"></script> 放到 body 结尾处；或者在JS里包一层 document.addEventListener('DOMContentLoaded', function() { ... })。
CSS优先级冲突。一旦你用了 * 重置选择器，又用了 #id 选择器，又用了大量的 .class 选择器，难免会出现"明明设置了颜色，但浏览器不生效"的情况。这时候用浏览器开发者工具的"检查"功能看右边面板的样式列表，哪个样式被划掉了，就知道是哪个类名优先级更高在覆盖它。记住一个简单的优先级口诀：!important > 内联style > #id > .class > 标签选择器。

5.2 答辩老师最喜欢问的五个问题

很多同学代码写得很顺，一进答辩教室就紧张，回来后跟我说"老师问的题我根本没准备过"。我整理了几道出现频率极高的问题，提前备好答案：

Q1：你页面里用了哪些HTML5语义化标签？
答：header、nav、section、article、footer 等。语义化标签让代码结构清晰，方便搜索引擎识别页面内容，也方便其他开发者快速理解代码结构。

Q2：CSS中 class 和 id 有什么区别？
答：id 在一个页面里只能出现一次，class 可以重复使用。id 的优先级高于 class。通常结构唯一的区块用 id，需要复用的样式用 class。

Q3：你写的JavaScript中，== 和 === 有什么区别？
答：== 会做类型转换，比如 '1' == 1 结果是 true；=== 是严格相等，要求类型和值都相等，'1' === 1 结果是 false。开发中推荐使用 ===，避免隐式类型转换造成的BUG。

Q4：你为什么要用 localStorage？它和普通变量有什么区别？
答：普通变量在页面刷新后会被重置，localStorage 是浏览器提供的本地存储，刷新页面甚至关闭浏览器后数据依然存在。我用它来保存用户留言和评分，这样用户下次打开页面时还能看到自己之前提交的内容。

Q5：你如何让页面适配不同大小的屏幕？
答：使用了 @media 媒体查询，同时依靠Flex布局的 flex-wrap 自动换行，还有 viewport 标签的设置。在小屏幕上导航栏会变成纵向排列，卡片宽度会自适应调整。

这些问题都不难，但如果你现场才组织语言，容易说得磕磕巴巴。提前把回答思路理清楚，面试状态会完全不一样。

5.3 演示时的加分细节与扣分雷区

演示是整个期末作业的最后一步，很多细节决定了老师对你的整体印象。我见过太多项目明明做得不错，却在演示环节因为小问题扣分。

加分细节：

字体统一。整站使用同一套中文字体栈，Windows上优先"微软雅黑"，Mac上优先"苹方"，不要混用系统默认字体。
图片优化。如果用了图片，尺寸压缩到300KB以内，避免加载时长时间白屏。
演示前先离线。准备一份完全离线可运行的副本，别在答辩现场依赖网盘或服务器，万一网络卡顿，整场演示就凉了。
准备一张"设计思路"总结页。不放在网站里，放在演示文档中，用一张图展示你的配色方案和模块划分，这会让老师觉得你有全局设计意识。

扣分雷区：

错别字。页面上的任何中文文案打错字都会非常显眼，发布前逐行检查一遍。
控制台报错。答辩时老师不一定看控制台，但万一看到红字报错，印象分会严重打折。打开浏览器F12，确认Console面板没有报错再提交。
点击失效的链接。导航栏里如果有链接指向空页面或者 # 占位符，点击之后页面跳到一个空白位置，体验极差。要么做成真实的锚点跳转，要么干脆删掉。

6. 本地预览与常见环境问题

6.1 为什么双击HTML文件打不开或显示异常

很多同学第一次写完代码，直接双击 index.html 文件，有时候能正常显示，有时候样式全丢，还有时候控制台报错，就开始怀疑自己代码写错了。其实这大概率不是代码的问题，而是"文件协议"和"本地服务器协议"之间的差异。

双击打开HTML时，地址栏是 file:///C:/Users/... 这样开头的路径。在这个协议下，浏览器对页面有很多限制，比如某些API不可用、部分外部资源加载不稳定。最典型的例子是使用ES6模块（type="module"）的时候，file:// 协议下直接报CORS跨域错误，页面就废了。期末作业用的都是传统脚本，虽然大概率不会触发这个问题，但用"本地服务器"的方式来预览项目，是更专业也更稳定的做法。

6.2 三分钟搭一个本地预览环境

推荐给零基础同学的方式是用VSCode安装Live Server插件。步骤很简单：

下载并安装VSCode编辑器。
打开VSCode，在扩展商店搜索"Live Server"，点击安装。
用VSCode打开你的 football-project 文件夹。
在 index.html 文件上右键，选择"Open with Live Server"。
浏览器会自动打开 http://127.0.0.1:5500/index.html。

它的好处是：你修改并保存代码后，浏览器页面自动刷新，不用手动按F5，调试效率直线上升。而且它是一个真实验证过的本地服务器地址，所有浏览器API都正常开放。

如果你手边只有Python环境，也可以用命令行启动：

bash复制cd football-project
python -m http.server 8080

然后在浏览器打开 http://localhost:8080。这种方式同样能把页面当成"真网站"来访问，适合没有VSCode或者不想装插件的场景。

6.3 浏览器调试工具：最实用的三个面板

不管出什么问题，浏览器调试工具都是你第一手的排查工具。我只讲最常用的三个面板：

Elements（元素）：左边显示页面结构，右边显示该元素的CSS样式。当你发现某个样式没生效，直接右键页面元素选"检查"，看右边有没有你的样式名、有没有被划掉。这是排查CSS优先级冲突最快的路径。
Console（控制台）：JavaScript报错、console.log 输出、alert 提示都会出现在这里。如果页面交互没反应，先看Console里有没有红色报错，有的话双击报错信息能定位到具体代码行。
Network（网络）：显示页面加载了哪些CSS、JS、图片资源，以及它们的加载状态。如果你发现样式没生效，到这里看CSS文件是不是404了，是的话就是路径写错了。

我见过太多同学卡在"页面没效果"上，对着代码翻来覆去改了一下午，其实看一眼Console就能定位到是变量名拼错。养成F12打开控制台的习惯，排查问题的成本会降低一半以上。

写在最后

期末大作业这东西，表面上是交一个网页，实际上考察的是你拆解问题、组织信息、快速实现的综合能力。HTML负责结构，CSS负责外观，JavaScript负责行为——这三者的配合逻辑和足球比赛里的站位一样清楚：有人负责稳住后防，有人负责串联中场，有人负责最后一脚射门。

我个人带项目时最深的体会是，不要追求一次写对，而是养成"小步快跑"的习惯。每写完一个模块就去浏览器刷新看一眼效果，确认没问题再继续下一个。这样即使后面出了问题，你也知道自己改到哪一步才出的Bug，排查范围会小很多。

如果这篇里的代码你都能自己敲一遍，并且把里面对应的"为什么"讲清楚，我几乎可以保证你的期末作业能拿到一个不错的分数。最后再分享一个小技巧：答辩前找一个不太懂前端的同学，让他操作一遍你的网页，看他会不会用、能不能找到导航入口。如果一个完全没接触过你项目的人都能顺畅浏览，说明你的信息架构已经合格了。

用HTML+CSS+JavaScript打造足球主题网站：期末大作业完整指南