企业官网建设流程全解析

用 HTML 复原新浪娱乐 2006 年视频播放界面，听起来像是一个老派的前端练手项目，但在 Vibe Coding 流行起来的当下，它反而成了检验 AI 辅助编码能力的好题目。这个项目不用 Vue、不用 React，也不需要构建工具，核心就是写一份能直接双击打开的 HTML 文件，把那个年代的页面布局、配色、列表式资讯和播放器控件尽量还原出来。标题里的“渣技术”是自嘲，意思是实现上没有高深框架，拼的是细节观察和耐心调整。读完这篇文章，你能拿到一个可运行的复古播放页面模板，也能掌握用自然语言驱动 AI 生成代码、再逐步修正成自己想要效果的工作流。

文章会先解释 Vibe Coding 到底是什么，然后带你准备环境、搭建页面骨架、还原播放器视觉、用 JavaScript 模拟播放交互，最后整理本地运行、常见报错、AI 生成代码的坑和一套复古页面交付检查清单。整个过程中，重点不是“复制一个一模一样的 2006 年新浪页面”，而是理解那个时代网页为什么长这样，以及怎么用现代浏览器快速实现复古效果。

1. Vibe Coding 和 2006 年网页，两条主线怎么交汇

1.1 Vibe Coding 不是“不写代码”，而是“用意图驱动代码生成”

Vibe Coding 这个词在最近的 AI 编程讨论里频繁出现。它描述的工作方式很简单：不是你在编辑器里一行行敲出每个函数，而是你用自然语言描述想要的效果，让 AI 生成代码，然后你运行、查看、反馈，再让 AI 修改。

一个典型的 Vibe Coding 循环是：

1. 把你想要的结果用一句话说清楚，例如“生成一个 2006 年门户网站娱乐频道的视频播放页面”。
2. AI 输出 HTML、CSS、JavaScript 代码。
3. 你把代码保存成 HTML 文件，用浏览器打开看效果。
4. 发现问题后直接描述，例如“播放器控制条改成银色”“按钮加立体边框”。
5. 重复步骤 2 到 4，直到结果接近目标。

这里要澄清一个误解：Vibe Coding 不等于完全不懂代码、闭着眼睛让 AI 生成。相反，它要求你具备基本的代码阅读能力和调试能力，因为 AI 经常生成有语法错误、逻辑错误、样式冲突的代码，你需要能看懂控制台报错，能定位是哪个元素出了问题。

用到这个复古页面项目上，Vibe Coding 的价值很明显：2006 年门户页面的结构相对简单，没有复杂权限、没有后端接口、没有数据交互，非常适合让 AI 生成初版，再由你手工打磨细节。

1.2 为什么拿“2006 年新浪娱乐视频界面”当练习

先说明一点：本文不是一比一像素复刻新浪官方页面。一方面是因为老页面在多年改版后已经很难访问，另一方面是复刻品牌页面涉及版权问题。这里的做法是还原那个时代门户网站娱乐频道的“通感”：

• 顶部是深色导航条，频道名称加一排链接。
• 页面主体是浅灰色背景，大量使用蓝色链接文字。
• 内容以列表为主，时间段加标题再加播放标记。
• 播放器部分是深色界面，银色控制条，按钮带有立体凸起感。
• 底部是版权和帮助链接，色彩整体偏保守。

从技术上看，2006 年前后正是网页从 table 布局向 Div+CSS 布局过渡的时期。Flash 播放器是主流，JavaScript 还在处理菜单、滚动、弹窗之类的小交互。选择这个题材做练习，能同时训练三件事：布局结构设计、视觉年代感还原、简单交互逻辑实现。

2. 动手前先准备环境，避免后面反复返工

2.1 需要准备的工具并不复杂

这个项目对工具要求很低，建议按下面的表格准备：

如果你只是临时体验，一个浏览器加一个记事本也能完成。但实际写代码时，VS Code 的提示和自动补全能明显减少拼写错误，建议还是装一个。

2.2 文件结构：先决定单文件还是三文件

做这种小型复古页面，有两种常见结构：

单文件方案：

recreation-2006/ └── index.html

HTML、CSS、JavaScript 全部写在 index.html 内部。优点是双击就能看，复制给别人也方便；缺点是代码一长，维护起来比较混乱。

三文件方案：

recreation-2006/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── player.js └── assets/ └── images/

三文件方案更接近真实项目，适合后续扩展。如果你打算再加入真实视频、图片素材、多页面，建议一开始就按这个结构拆分。

本文示例为了保持可读性，会按三文件思路展示代码，但你在本地练习时也可以先合成一个文件。

2.3 打开开发者工具，记住三个检查点

无论用哪种文件结构，运行页面时都要习惯打开 F12。对于这个项目，重点看三个面板：

• Console：是否有 JavaScript 报错，比如找不到元素、变量未定义。
• Elements：页面结构是否完整，目标元素是否存在，class 是否生效。
• Network：是否有资源加载失败，尤其是图片、CSS、JS 文件。

本地双击 HTML 时，Network 面板看到的大部分请求都是 file:// 协议，只要没有红字报错，基本可以认为页面正常。

3. 搭建 2006 年风格的页面骨架

3.1 页面整体布局：上中下三层

2006 年门户页面的典型结构是“上中下三层”，上面是导航和频道入口，中间是主体内容区，下面是版权信息。中间区域又常分成左右两栏：左边是播放器或主要内容，右边是推荐列表、排行榜、公告。

先给出最外层容器和头部导航的 HTML 示例：

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>娱乐频道视频播报 - 复古界面复原练习</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="page"> <div class="topbar"> <div class="topbar-inner"> <span class="site-name">娱乐视频</span> <span class="topbar-links"> <a href="#">新闻</a> <a href="#">音乐</a> <a href="#">影视</a> <a href="#">明星</a> <a href="#">综艺</a> </span> </div> </div> </div> </body> </html>

这里先不写完整页面，后面逐步补充。需要解释的是，这个结构虽然不是当年真正的 table 布局，但保留了“顶栏-内容-版权”的分层逻辑。如果你想让年代感更强，也可以在教学练习中故意用 table 单元格来摆放左右两栏，但我不建议在新项目里继续用 table 做布局，原因会在下一节说明。

3.2 头部导航和背景色：颜色先保守，细节再调整

2006 年门户页面配色通常偏保守，主色调多为蓝、深蓝、灰、白。蓝色用于导航条和链接，灰色用于页面背景或内容区分区。

示例 CSS：

* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #e8e8e8; font-family: "SimSun", "宋体", Arial, sans-serif; font-size: 14px; color: #333; } .page { width: 960px; margin: 0 auto; background: #f7f7f7; border: 1px solid #ccc; } .topbar { background: #1f4e9c; color: #fff; height: 36px; line-height: 36px; } .topbar-inner { padding: 0 12px; } .topbar .site-name { font-weight: bold; font-size: 16px; margin-right: 20px; } .topbar-links a { color: #fff; text-decoration: none; margin-right: 14px; } .topbar-links a:hover { text-decoration: underline; color: #ffffcc; }

这里要注意box-sizing: border-box。很多新手发现明明设置了 960px 宽度，再加上 padding 和 border 之后页面就溢出了，就是因为默认的 content-box 会让元素实际宽度超出设定值。加上这个全局声明，宽高计算会更符合直觉。

3.3 中间内容区：左播放器，右节目列表

主体区域按左右两栏设计。左边是模拟播放器，右边是节目列表。为了体现年代感，右边列表可以是一排一排的“时间 + 标题 + 播放”结构。

HTML 示例：

<div class="main"> <div class="player-area"> <div class="player-box"> <!-- 播放器画面区 --> <div class="player-screen" id="playerScreen"> <div class="screen-watermark">娱乐播报</div> <div class="screen-status" id="screenStatus">点击播放</div> </div> <!-- 播放器控制条 --> <div class="player-controls"> <button id="playBtn" class="ctrl-btn">播放</button> <button id="stopBtn" class="ctrl-btn">停止</button> <span class="progress-wrap"> <span class="progress-bar" id="progressBar"></span> </span> <span class="time-text" id="timeText">00:00 / 05:00</span> <span class="volume-wrap"> <span class="volume-bar" id="volumeBar"></span> </span> </div> </div> <div class="player-title" id="playerTitle">第一集：娱乐资讯精选</div> </div> <div class="side-list"> <div class="side-title">节目列表</div> <ul class="episode-list" id="episodeList"> <li><span class="time">20:00</span><a href="#">娱乐资讯精选</a><span class="play-badge">播放</span></li> <li><span class="time">21:00</span><a href="#">明星访谈实录</a><span class="play-badge">播放</span></li> <li><span class="time">22:00</span><a href="#">影视快报</a><span class="play-badge">播放</span></li> </ul> </div> </div>

这个结构里，播放器区域是一个独立的盒子，节目列表使用无序列表。后面加 JavaScript 时，就是围绕这些 ID 和 class 操作。

这里的“播放”标记并不是真实跳转，只是界面占位。演示项目里最好不要挂真实视频地址，避免版权风险。可以后续换成自己本地的视频文件。

4. 写出“老播放器”的视觉细节

4.1 播放器外框和画面区：深色、银色、立体感

老式播放器给人的印象是“黑色边框、银色控制条、按钮有凸起”。这些效果用 CSS 可以完全实现，不需要引用任何图片。

播放器外框示例：

.player-area { width: 620px; float: left; } .player-box { border: 2px solid #333; background: #000; padding: 6px; } .player-screen { height: 320px; background: #1a1a1a; border: 1px solid #666; position: relative; overflow: hidden; } .screen-watermark { position: absolute; left: 12px; top: 12px; color: #fff; font-size: 18px; text-shadow: 1px 1px 2px #000; background: rgba(255, 255, 255, 0.2); padding: 2px 8px; } .screen-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ccc; font-size: 14px; letter-spacing: 2px; }

注意.screen-watermark里的 rgba 是半透明白色，用来模拟台标或频道水印。如果你希望更贴近 2006 年，可以使用纯白色加透明度，而不是现代风中常见的毛玻璃效果。

4.2 控制条：按钮立体感怎么实现

按钮立体感在 2006 年前后常见做法是border: outset，它能在不同浏览器里模拟出凸起按钮。现代浏览器里outset依然可用，但效果相对简单，也可以使用 box-shadow 补充。

示例：

.player-controls { background: #d6d6d6; padding: 8px; border-top: 2px solid #fff; border-bottom: 1px solid #888; display: flex; align-items: center; } .ctrl-btn { background: #eee; border: 2px outset #ccc; padding: 4px 10px; margin-right: 6px; cursor: pointer; font-size: 12px; } .ctrl-btn:active { border-style: inset; }

:active时按钮边框从outset变成inset，点击手感就有了。当年很多网页按钮就是这样做的，只是没有 action 状态，需要你自己写伪类。

4.3 进度条和音量条：不要用现代组件

进度条用 div 嵌套实现。外层是灰色轨道，内层是填充颜色。音量条同理。

.progress-wrap { flex: 1; height: 14px; background: #aaa; border: 1px solid #666; margin: 0 10px; cursor: pointer; } .progress-bar { display: block; height: 100%; width: 0%; background: #1f4e9c; } .volume-wrap { width: 80px; height: 14px; background: #aaa; border: 1px solid #666; cursor: pointer; } .volume-bar { display: block; height: 100%; width: 60%; background: #666; } .time-text { font-size: 12px; color: #333; margin-left: 8px; }

这个阶段你可以先不写 JavaScript，直接用浏览器打开，看看视觉是否接近年代感。如果觉得颜色太现代，可以降低饱和度，减少圆角和阴影。

4.4 页面底部的“更多内容”和版权信息

页面底部一般是双栏版权和链接。可以加一个简单的底栏：

<div class="footer"> <p>本页面为复古界面复原练习，所有节目名称均为占位内容。</p> <p>内容链接均为模拟链接，不指向真实视频资源。</p> <p>建议使用 1024 及以上分辨率查看</p> </div>

这里的说明文字很重要。当你把页面分享给朋友或发布到博客时，别人能立刻知道这是一个练习项目，而不是真的新浪页面。既避免误导，也是内容合规的一部分。

5. 用 JavaScript 让播放器“动起来”

5.1 播放和暂停切换

先写最基本的播放暂停逻辑。这里的“播放”不是真的播放视频，而是模拟播放状态：按钮文字变化、画面区状态变化、进度条开始推进。

const playBtn = document.getElementById('playBtn'); const stopBtn = document.getElementById('stopBtn'); const screenStatus = document.getElementById('screenStatus'); const progressBar = document.getElementById('progressBar'); const timeText = document.getElementById('timeText'); const playerTitle = document.getElementById('playerTitle'); let isPlaying = false; let currentTime = 0; const duration = 300; // 模拟总时长 300 秒 let timer = null; function togglePlay() { if (isPlaying) { pause(); } else { play(); } } function play() { isPlaying = true; playBtn.textContent = '暂停'; screenStatus.textContent = '播放中'; timer = setInterval(tick, 1000); } function pause() { isPlaying = false; playBtn.textContent = '播放'; screenStatus.textContent = '已暂停'; clearInterval(timer); } function stop() { pause(); currentTime = 0; progressBar.style.width = '0%'; timeText.textContent = '00:00 / 05:00'; screenStatus.textContent = '点击播放'; } function tick() { if (currentTime >= duration) { playNextEpisode(); return; } currentTime += 1; const percent = (currentTime / duration) * 100; progressBar.style.width = percent + '%'; timeText.textContent = formatTime(currentTime) + ' / 05:00'; } function formatTime(seconds) { const m = Math.floor(seconds / 60); const s = seconds % 60; return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0'); } playBtn.addEventListener('click', togglePlay); stopBtn.addEventListener('click', stop);

这段代码里有一个模拟结束后的回调playNextEpisode()，它用来切换节目列表。这里先不写实现，保留一个接口，后面补上。

5.2 点击或拖动进度条

进度条本身是一个容器。点击进度条时，计算点击位置占整个容器宽度的比例，再换算成当前播放时间。

const progressWrap = document.querySelector('.progress-wrap'); function handleProgressClick(event) { const rect = progressWrap.getBoundingClientRect(); const ratio = (event.clientX - rect.left) / rect.width; const time = duration * Math.min(Math.max(ratio, 0), 1); currentTime = Math.floor(time); progressBar.style.width = (currentTime / duration * 100) + '%'; timeText.textContent = formatTime(currentTime) + ' / 05:00'; } progressWrap.addEventListener('click', handleProgressClick);

这里必须用getBoundingClientRect()计算容器在视口内的左边距，而不是用offsetLeft。原因很简单：页面一旦滚动，或容器外层有 padding 和 border，直接用offsetLeft容易出现偏差。

5.3 自动切换节目列表

节目数据可以用数组保存。每播放完一个模拟节目，自动把标题和列表选中状态切到下一条。

const episodeList = document.getElementById('episodeList'); const episodes = [ { title: '娱乐资讯精选', time: '05:00' }, { title: '明星访谈实录', time: '05:00' }, { title: '影视快报', time: '05:00' }, { title: '音乐现场', time: '05:00' } ]; let currentEpisode = 0; function renderEpisode(index) { currentEpisode = index; playerTitle.textContent = episodes[index].title + '（第' + (index + 1) + '集）'; currentTime = 0; progressBar.style.width = '0%'; timeText.textContent = '00:00 / ' + episodes[index].time; screenStatus.textContent = '播放中'; highlightEpisode(index); } function playNextEpisode() { const nextIndex = (currentEpisode + 1) % episodes.length; renderEpisode(nextIndex); } function highlightEpisode(index) { const items = episodeList.querySelectorAll('li'); items.forEach((item, i) => { item.className = i === index ? 'active' : ''; }); }

这里用mod取余实现循环播放到最后一条时回到第一条。实际练习中，你还可以在播放结束后停止而不是自动循环，取决于你想模拟的当年播放器行为。

5.4 为什么用 JavaScript 模拟，而不是加载真实视频

教学项目里用 JS 模拟播放有两个原因：一是避免版权问题，新浪娱乐当年的视频内容大多已无法确认授权，直接外链或下载播放都不合适；二是聚焦在界面还原上，不必处理视频编码、格式、跨域、加载失败这些问题。等界面效果满意后，再把player-screen内部替换成<video>标签，接上自己本地录制的测试视频即可。

6. Vibe Coding 工作流：怎么用自然语言驱动 AI 快速生成初版

6.1 给 AI 的第一轮需求要包含足够约束

如果你想用 AI 生成这个复古页面，提示词里必须写清楚布局、风格、交互和限制，否则 AI 容易自由发挥成现代风格。

一个可用的提示词模板：

请生成一个单文件 HTML 页面，模拟 2006 年门户网站娱乐频道的视频播放页面。 要求： 1. 页面宽度 960px，居中，浅灰色背景。 2. 顶部是深蓝色导航条，包含新闻、音乐、影视、明星、综艺五个链接。 3. 主体分左右两栏：左侧是播放器区域，右侧是节目列表。 4. 播放器区域包含黑色播放器画面、银色控制条、播放/暂停/停止按钮、进度条、时间显示。 5. 整体风格怀旧，使用 SimSun 字体，蓝色链接，按钮使用 2px outset 边框。 6. 使用 JavaScript 模拟播放进度，点击进度条可以跳转时间，播放结束后自动切换节目。 7. 不要使用任何外部图片，不要使用 Vue/React，不要使用现代 UI 组件库。 8. 页面底部注明“本页面为复古界面复原练习”。

把这段提示词发给 AI 后，得到的结果大概率已经包含可运行结构。首次生成不一定完美，没关系，重点是先跑起来。

6.2 迭代反馈：把“不好看”翻译成可执行的修改请求

很多人用 AI 写代码时，反馈太模糊。比如“播放器不太像 2006 年”，AI 无法知道具体哪里不像。你要把它拆成可修改的点。

下面的表格给出“模糊反馈”和“可执行反馈”的对比：

这类反馈本质上是“先描述问题，再给出期望值”。AI 看到明确的颜色、尺寸、属性名称后，修改准确率会高很多。

6.3 AI 生成代码时最常见的三个坑

第一，AI 生成的内容经常包含现代 CSS 特性。比如渐变、圆角、阴影、flex 布局。这些本身不是问题，但如果目标是还原 2006 年风格，就需要手动删掉一些元素，不能全盘接受。

第二，AI 可能生成重复代码。比如同一个.player-screen的样式出现两次，或者进度条逻辑实现两遍。运行不报错，但后续维护很麻烦。每一步迭代后，都应该清理无用代码。

第三，AI 不理解你的“项目上下文”。它不知道你准备做成单文件还是三文件，不知道你是不是要保留版权声明，不知道你是否允许使用真实品牌图标。所以提示词和人工检查都要跟上。

7. 本地运行验证与调试

7.1 最小运行验证：打开页面后应该看到什么

完成以上代码后，用浏览器打开 index.html，应该能看到：

• 顶部深蓝色导航条，五个频道链接。
• 左侧播放器黑色画面区，中间显示“点击播放”。
• 银色控制条，播放、停止按钮可用。
• 右侧节目列表显示四条占位节目。
• 页面底部有“复古界面复原练习”说明文字。

点击“播放”后，按钮文字变成“暂停”，进度条每秒前进，时间开始跳动，画面区状态文字变成“播放中”。

7.2 使用本地服务器预览时的注意事项

双击 HTML 已经能满足这个项目。但如果后面你加入了图片、字体、JSON 文件，建议使用本地服务器。方式很简单，在项目目录下运行：

python3 -m http.server 8080

然后浏览器打开：

http://localhost:8080

使用file://打开页面和http://localhost打开页面的区别在于：部分浏览器对 file 协议有更严格的安全限制，比如某些 AJAX 请求会失败，或者字体文件无法加载。静态页面基础功能通常不受影响，但一旦涉及资源加载，就要切换成本地服务器。

7.3 控制台常见报错速查

排查顺序建议是：先看 Console 是否报错，再看 Network 是否有 404，最后用 Elements 面板检查 DOM 结构和 class 是否生效。不要一上来就改代码，定位问题要按链路走。

8. 常见问题排查

8.1 HTML 文件无法预览

新手最容易遇到的情况是：双击 index.html 后，系统没有用浏览器打开，而是弹出下载框，或者直接显示源码文本。

这种现象通常有三个原因：

• 文件扩展名不是.html或.htm，比如实际保存成了index.html.txt。
• 文件默认打开方式被设置成了文本编辑器。
• 浏览器设置或系统策略拦截了本地文件打开方式。

检查方式：在文件管理器里右键点击文件，选择“打开方式”，确认使用的是浏览器。如果文件名末尾多了.txt，需要去掉并确认扩展名显示已开启。命令行检查也可以：

ls -la

看到文件名是index.html.txt就说明扩展名错了。

8.2 中文乱码

页面打开后中文全是“锟斤拷”或问号，常见原因是 HTML 声明和文件保存编码不一致。最稳妥的做法是：html 的 head 中写<meta charset="utf-8">，文件保存时选择 UTF-8 编码。VS Code 右下角会显示当前编码，点击可以修改，一般选 UTF-8。

如果你使用的是 Windows 记事本，另存为时要选择 UTF-8 格式。如果文件已经乱码，用编辑器重新以 UTF-8 打开并另存，通常能恢复。

8.3 左右两栏布局挤在一起

如果左侧播放器和右侧列表错位，或者换行到上下排列，先检查容器总宽度是否超过设定值。全局加上box-sizing: border-box可以解决大部分宽度溢出。其次检查是否同时使用了float和width，float 元素宽度加起来超过父容器就会换行。

建议这阶段直接用 flex 布局代替 float，因为视觉效果接近，处理起来更简单。不过如果你追求非常旧的浏览器兼容性，float 也依然能用。

8.4 点击进度条跳转位置不对

现象是点击进度条右侧，播放时间却跳到中间；点击左侧却跳到接近开头。

原因通常是计算点击位置时没有扣除进度条容器左侧的偏移。一定要用getBoundingClientRect()获取容器实际位置，并且把点击坐标和边界都处理一遍，防止 ratio 小于 0 或大于 1。

8.5 JavaScript 事件没生效

按钮点击没反应，最可能的原因是脚本放在了 head 里，而脚本执行时 DOM 还没渲染。浏览器找不到playBtn这个元素，于是addEventListener报错，后续代码全部中断。

解决方案有两种：把<script>放在 body 结束标签之前；或者把逻辑包在 DOMContentLoaded 事件里：

document.addEventListener('DOMContentLoaded', function () { const playBtn = document.getElementById('playBtn'); playBtn.addEventListener('click', togglePlay); });

如果你把代码直接粘贴到一个 AI 生成的长文件里，还要检查有没有重复定义变量。多个 script 块共用全局变量时，后一个脚本可能覆盖前一个。

8.6 浏览器自动播放限制

如果你把模拟播放器换成了真实<video>标签，试图在页面加载后自动播放视频，现代浏览器会阻止带声音的自动播放。此时需要用户先点击页面或播放按钮，才能启动播放。

保留 JS 模拟方案时没有这个问题，因为 setInterval 不涉及浏览器媒体策略。但如果你以后接真实视频，要记住自动播放限制是浏览器安全策略，不是代码 bug。

8.7 不要用 data:text/html 长期保存页面

有些 AI 工具会在浏览器里生成data:text/html形式的页面，看起来能直接预览，但这类临时页面有几个问题：刷新后代码可能恢复初始状态，无法保存成文件，而且本地浏览器对 data URL 有大小限制。建议始终把代码保存为.html文件后再预览。

9. 复古项目的最佳实践与扩展方向

9.1 历史页面复刻要注意版权和素材

复刻一个历史页面时，最安全的方式是“参考风格但不复制版权内容”。具体来说：

• 不使用新浪 Logo、品牌图标和照片。
• 不使用真实节目、真实艺人姓名、真实新闻标题。
• 使用“娱乐资讯”“明星访谈”等通用占位词。
• 页面明显位置保留“复古界面复原练习”的说明。

这些限制并不会降低练习价值，反而会逼着你在布局和视觉上多思考，而不是靠图片撑场面。

9.2 学习环境与发布环境的差别

如果你的目标是发布到博客或部署到静态托管平台，建议拆文件、加注释、补充页面标题和描述，并且把清单验证一遍。

9.3 可复用的复古页面交付前检查清单

在分享页面之前，按下面的清单逐项确认：

• 文件名是index.html，扩展名正确。
• <!DOCTYPE html>和<meta charset="utf-8">完整。
• 浏览器打开后页面不是乱码，控制台无报错。
• 播放、暂停、停止按钮都能正常切换状态。
• 进度条点击后跳转到对应时间位置。
• 节目列表高亮项随播放切换。
• 页面宽度在 1024 和 1920 下显示正常。
• 所有图片、字体、脚本资源都来自本地或占位内容。
• 页面里没有任何品牌 Logo、真实人身信息或版权风险内容。
• 页面底部或页面附近有“练习项目”说明。
• 整个目录压缩备份至少一份。

这份清单同样可以用于其他复古页面项目，比如复刻论坛首页、旧新闻频道、老式个人主页。

9.4 下一步可以往哪些方向扩展

这个项目扩展空间很大：

• 把模拟播放器替换成 HTML5 的<video>，接本地视频测试真实播放、暂停、进度控制逻辑。
• 把节目列表数据抽成 JSON，用 fetch 拉取，练习异步数据渲染。
• 增加一个“2006 vs 现在”的对比页面，用同一个页面结构展示不同年代的视觉风格。
• 把代码推送到 Git 仓库，用静态托管平台部署成在线演示。
• 用同样的方法批量复刻其他老门户页面，形成一套“网页考古”系列练习。

学习建议是：先用 AI 生成第一版，然后手工把每个布局、颜色、交互都看懂改一遍。这样你既体验了 Vibe Coding 的效率，也真正掌握了 HTML、CSS、JavaScript 的基础能力。复古页面不是终点，它只是一个能让你同时练习“界面还原”和“AI 协作”的低成本题材。

最后记住一个实践判断：Vibe Coding 的价值在于快速生成原型和减少重复编码，但最终交付质量取决于你能不能看懂代码、能不能发现视觉问题、能不能把模糊需求翻译成具体修改。用这个 2006 年播放器页面练手，正好能同时检验这三件事。