从零手写足球主题网站：HTML+CSS+JavaScript期末大作业全流程-代码聚汇网

又到期末了，很多同学都在为HTML+CSS+JavaScript的大作业发愁。今年我选了足球这个主题，做成一个带赛事信息、球星卡片和计分交互的网站，全程用前端三件套手写，没有依赖任何框架。这篇就把我从构思到交作业的完整过程拆开讲，包括怎么设计页面结构、怎么用Flex和Grid布局、怎么做CSS动画，以及JavaScript交互里最容易踩的坑。想对着做一份像样期末作业的同学，可以直接抄作业。

1. 先想清楚再动手：足球网站的整体设计思路

1.1 为什么选足球主题：期末作业的选题方法论

很多同学一到期末就纠结，到底做什么主题。我的建议是，选题一定要选自己稍微了解的东西。我平时看球，所以天然知道足球网站需要放什么内容：赛事信息、球队名单、球星资料、比分数据。这些内容本身就是结构化的，做起来思路清晰；更重要的是，足球相关的视觉元素（绿茵场、足球、球衣配色）给了CSS很大的发挥空间，能让你在样式上做出亮点，而亮点恰恰是期末评分里拉开差距的地方。

选题还有一个容易被忽略的点——主题要有足够的“素材密度”。做美食网站要放菜谱、图片和制作步骤，做读书网站要放书单和书评，做足球网站则天然有赛程、球队、球星、积分榜这些现成内容。内容越丰富，页面越充实，答辩时老师问“你这些内容是从哪来的”，你也好回答。如果选一个自己完全不了解的冷门主题，很可能做到一半发现内容凑不满，最后只能靠大段占位文字凑数，得不偿失。

1.2 HTML、CSS、JavaScript各自负责什么

这里必须先把三者的分工说清楚，这是期末答辩时几乎所有老师都会问的第一个问题。HTML决定页面有什么，比如标题、图片、表格、按钮，它负责内容和结构；CSS决定页面长什么样，比如颜色、大小、间距、动画，它负责表现和布局；JavaScript决定页面怎么动，比如点击按钮切换图片、提交表单弹提示、比分自动累加，它负责行为和交互。

对应到足球网站里，HTML是赛程表本身，CSS是球队的主场配色和球衣设计，JavaScript就是裁判的哨子——一吹哨，比赛结果就开始变化。这个类比我在答辩时直接用上了，老师听完点了点头。所以哪怕你代码写得一般，只要能把三者关系讲清楚，也能给老师留下“这学生是真理解了”的印象。

1.3 页面结构规划：一页式还是多页式

考虑过做成多个页面，但后来发现对期末作业来说，一个结构清楚的长页面反而更容易拿高分。原因有几点：第一，一页式网站天然适合用锚点导航，导航栏点“最新赛程”“球星阵容”“给我们留言”就能平滑滚动到对应区域，这个交互本身就是评分点；第二，一页式便于老师快速浏览，不需要在不同HTML文件里跳来跳去；第三，多页式网站需要处理多个页面间的链接和样式的统一，如果对CSS不熟很容易出现“这页样式和那页不一样”的尴尬。

所以我最终的目录结构只有三个文件：

text复制football-website/
├── index.html       # 页面结构
├── styles.css       # 所有样式
└── script.js        # 所有交互

这样文件少、依赖少，交作业时也不容易漏发文件。如果你想把项目做得更有“体系感”，可以再加一个images文件夹专门放图片素材，但核心建议是保持文件精简，不要整出一堆连自己都记不清用途的文件。

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

2. 用HTML搭出足球页面的骨架

2.1 文档头部的规范写法

很多同学交上来的HTML文件，头部直接写个就开始堆内容，其实这是会被扣印象分的。规范的文档头应该包含DOCTYPE声明、语言标识、字符编码、视口设置和标题。我用的就是最常见的那套：

html复制<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>足球世界 - HTML+CSS+JavaScript 期末大作业</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    ...
    <script src="script.js"></script>
</body>
</html>

DOCTYPE声明放在第一行，告诉浏览器这是HTML5文档；lang="zh-cn"表示页面内容以简体中文为主，对SEO和屏幕阅读器友好；charset="utf-8"保证中文不乱码，很多新手页面出现乱码，90%都是因为少了这行。viewport是给移动端适配用的，虽然期末作业不一定要求响应式，但加上这行能让老师在手机上预览时不出问题。样式文件放head里用link引入，脚本文件放body末尾用script引入，这样做的好处是HTML先加载渲染，页面内容不会因为等待脚本而白屏。

2.2 导航栏和Banner区域的HTML结构

导航栏我用了最经典的header加nav结构，里面放一个logo，一个无序列表做菜单。语义化标签的好处是答辩时可以直接说“这里用了语义化标签，浏览器和搜索引擎都能更准确地理解页面结构”。Banner区域放了一张足球场的图片，加上一个标题和一个简单的报名按钮。

这里有个容易忽略的小细节：a标签一定要加href属性，就算暂时只想让它显示成一个按钮，也要写href="#"，或者用后面要讲的JavaScript去处理点击事件，否则鼠标样式不会变成手指，老师点一下也没反应，交互感大打折扣。做导航时建议给当前页对应的菜单项加一个class，比如active，让它的颜色和别的菜单项不一样，这样页面当前处于哪个区域一眼就能看出来，也是一种细节上的加分。

2.3 用表格做赛程表、用表单做留言板

期末作业里表格和表单几乎是必考的考点，所以我在页面的中部放了一个“近期赛程”表格，用thead/tbody把表头和内容分开，用th表示表头单元格。下面再放一个“留言交流”表单，包含文本框、选择框、提交按钮，表单里的每个输入项都要加label标签，并且用for属性关联对应输入框的id，这样点击文字时输入框会自动聚焦，这也是答辩时会问到的细节。

html复制<table>
    <thead>
        <tr>
            <th>日期</th>
            <th>主队</th>
            <th>客队</th>
            <th>比赛地点</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2025-01-04</td>
            <td>红队</td>
            <td>蓝队</td>
            <td>1号场</td>
        </tr>
    </tbody>
</table>

<form id="msg-form">
    <label for="username">昵称：</label>
    <input type="text" id="username" name="username" placeholder="请输入昵称">
    <label for="comment">留言：</label>
    <textarea id="comment" name="comment" rows="4" placeholder="说说你的看法"></textarea>
    <button type="submit">提交留言</button>
</form>

表格写完别忘了加CSS，不然浏览器默认风格非常丑。常用的是border-collapse: collapse把边框合并，再加th、td的padding和文字对齐方式。表单同理，input、textarea、button的默认样式在不同浏览器里差异很大，必须统一重置一遍。比如我给自己页面里的input和textarea统一设置了宽度、内边距和边框圆角，视觉上立刻舒服很多。表单提交按钮我用了type="submit"，这样在JavaScript里监听submit事件时，回车键也能正常触发提交逻辑，这个细节很多同学不知道。

3. 用Flex和Grid把页面排整齐：CSS布局实战

3.1 Flex布局：导航栏与卡片水平排列

CSS布局这块是期末作业拉开分差的地方。一个只用默认块级布局的页面，和用Flex/Grid做的页面，视觉差距一眼就能看出来。Flex是我最先用的，因为它最适合处理“一排元素水平排列”的需求。导航栏就是个典型场景：

css复制.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 0;
}

justify-content: space-between让菜单项两端对齐，align-items: center让它们在垂直方向居中。还有一个高频问题——flex布局里子元素宽度自适应。我想让三个卡片在页面里等宽排列，于是给每个卡片设了flex: 1，意思是“按比例平分父容器的剩余空间”，这样就算窗口宽度变化，三张卡片也会自动撑满一行，不需要写死宽度。

提示：flex: 1是flex-grow、flex-shrink、flex-basis三个属性的简写，最常见的写法flex: 1等价于flex: 1 1 0%，表示可以放大、可以缩小、基准宽度为0。答辩时能说出这层含义，比只会写“flex: 1能让它均分”要专业得多。

这是强烈建议写在答辩稿里的知识点，因为老师一听到flex: 1就会明白你确实理解了这个属性。

3.2 CSS Grid：球星卡片的网格排列

如果Flex是“一行怎么排”，那Grid就是“多行多列怎么排”。球星卡片我用了CSS Grid来实现，三列、两行，卡片间距统一，效果非常整齐：

css复制.player-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

repeat(3, 1fr)的意思是页面宽度被分成三等份，每份占1fr；gap: 20px表示卡片之间的间距。这里顺便说一句，网上能搜到很多CSS动画效果网站，它们本质都是用Grid或者Flex把内容先排列好，再加上过渡和动画。所以布局的底子打好了，才有资格谈动画效果。

如果想让布局更稳定，可以用minmax替代固定宽度，比如grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))，这样当窗口变窄时，每张卡片最小260px，放不下就自动换行。这就能在答辩时说“我的页面做了基础响应式处理”，是相当大的加分项。做Grid布局的时候，我还建议给每个卡片加上border-radius和box-shadow，让卡片看起来有“浮起来”的感觉，视觉层次会丰富很多。

3.3 CSS动画：足球滚动、涟漪光圈与渐变字

期末作业里只要出现动效，观感会立刻不一样。我做了三个类型的动画，难度从易到难，你可以根据自己的水平选择。

第一个是鼠标hover足球图片时让足球滚动，用到transform: rotate和transition：

css复制.football:hover {
    transform: rotate(360deg);
    transition: transform 0.6s ease;
}

第二个是涟漪光圈扩散效果，也就是看到一个圆环从小变大、透明度从1到0，类似水波纹。做法是用关键帧动画叠加在球场上：

css复制@keyframes ripple {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
.ripple {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.6);
    animation: ripple 2s ease-out infinite;
}

第三个是字体渐变。普通文本颜色是纯色，但我想让页面的一级标题呈现从绿到金的渐变效果，做成CSS字体渐变：

css复制.banner-title {
    background: linear-gradient(90deg, #2ecc71, #f1c40f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

这里的核心是background-clip: text，意思是背景只在文字区域内显示，同时把字体颜色设为transparent让背景漏出来。注意-webkit-background-clip是老浏览器兼容前缀，建议保留。动画不要贪多，一个页面有三四处动效就足够了，动效太多反而会让老师觉得花哨、影响内容阅读。

4. JavaScript交互：轮播图、计分板与报错排查

4.1 轮播图最简单做法

JavaScript部分是期末大作业的重头戏，也是最容易出问题的环节。我的页面交互主要有三个：轮播图、计分板和倒计时。先看轮播图，我用的方法是“全部图片叠在一起，通过class切换显示哪张”：

html复制<div class="slider">
    <img src="img1.jpg" class="slide active" alt="比赛1">
    <img src="img2.jpg" class="slide" alt="比赛2">
    <img src="img3.jpg" class="slide" alt="比赛3">
</div>
<button id="prev">上一张</button>
<button id="next">下一张</button>

css复制.slide {
    display: none;
}
.slide.active {
    display: block;
}

javascript复制let currentIndex = 0;
const slides = document.querySelectorAll('.slide');

document.getElementById('next').addEventListener('click', function () {
    slides[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % slides.length;
    slides[currentIndex].classList.add('active');
});

这里的核心是currentIndex的变化方式。(currentIndex + 1) % slides.length的意思是“张数求余”，序列是0、1、2、0、1、2这样循环，永远不会越界。上一张按钮用(currentIndex - 1 + slides.length) % slides.length就能往回走。这种写法很常用，也比if判断简洁得多。如果你再想加自动播放，只要在外层setInterval调用切换函数即可，比如setInterval(nextSlide, 3000)，这样每3秒自动切一张。

4.2 计分板和倒计时功能

计分板模拟了一场正在进行的小型比赛，点击主队加号，主队得分加1，点击客队加号同理。这是一个典型的JavaScript函数与事件监听综合应用：

javascript复制let redScore = 0;
let blueScore = 0;
const redScoreEl = document.getElementById('red-score');
const blueScoreEl = document.getElementById('blue-score');

function addScore(team) {
    if (team === 'red') {
        redScore++;
        redScoreEl.textContent = redScore;
    } else if (team === 'blue') {
        blueScore++;
        blueScoreEl.textContent = blueScore;
    }
}

这里有个新手很容易踩的坑：如果用el.innerHTML = redScore，效果上没问题，但如果分数是用户输入或从接口拿到的，就可能被注入HTML代码。所以展示纯文本时优先用textContent而不是innerHTML。倒计时功能则是让“上半场比赛开始”的按钮倒计时5秒后显示“比赛进行中”，用setInterval每秒减1，到0就clearInterval。整个过程既用到了条件判断，也用到了定时器，覆盖了JavaScript基础语法里的多个考点，答辩时能聊的内容非常充实。

4.3 javascript:void(0)报错与运行时错误排查

这一节是我最想写的，因为我在这上面的踩坑比例远高于其他部分。“javascript:void(0)”这个写法在很多网页里都能见到，它出现在a标签的href里，作用是让点击链接时不发生页面跳转。比如，从功能上等价于href="#"，但不会让页面跳到顶部。

很多同学从模板网站复制了这种写法，然后又报了“javascript:void(0)报错”，其实问题往往不是void(0)本身，而是负责这个链接的JavaScript代码出错了。比如说，某个按钮原本应该触发轮播，结果函数名写错了，控制台报Uncaught ReferenceError，点击后页面没反应，看起来就像void(0)把功能“挡住”了。

排查这类问题时，第一件事就是打开浏览器开发者工具，切到Console面板看红色的报错信息。最常见的几类报错是：变量未定义、DOM元素没有获取到（通常getElementById返回null）、语法错误。第二件必做的事是确认script标签放在哪、有没有正确引入。如果你用了