企业官网建设流程全解析

从零仿写一个“QQ音乐风格”的页面，听上去像是新手练手的小项目，但真做起来，里面的布局组织、播放器交互、状态同步，每一块都够你喝一壶的。我这次选择完全不用框架、不用构建工具，就用纯 HTML + CSS + JavaScript 把这些功能一个个抠出来，最后整理成一份可以直接打开的源码。这篇文章不是泛泛讲“怎么做网页”，而是把我在开发过程中踩过的坑、试过的方案、最终选型的理由全部摊开讲，适合正在学前端基础、想用原生三件套做完整项目的朋友，也适合需要交作业或者做作品集但不想引入复杂工程化的同学——你不需要懂 Node、不需要装依赖，双击 index.html 就能看到效果。

先说清楚这份代码能做什么：一个完整的音乐首页，包含顶部导航、大图轮播、推荐歌单卡片、排行榜入口，以及一个真实的底部播放器，支持播放/暂停、上一首/下一首、进度条拖动、音量调节和播放模式切换。所有歌曲数据写在一个数组里，扩展歌曲只需要往数组里加一条记录。整个项目没有一行框架代码，逻辑清晰到你可以拿它当模板继续开发。

1. 开工前先想清楚：仿写一个音乐页面到底在仿什么

1.1 把目标页面拆成三个区域

很多初学者一上来就对着屏幕截图写代码，写了半天发现自己连布局都撑不起来，问题就出在没有“拆页”的意识。我拿到这个项目的第一件事，是把手里的目标页面分成三个横向大区：顶部导航区、主内容区、底部播放器区。

顶部导航区负责品牌标识、搜索入口和用户操作入口，看起来东西不多，但它决定了整页的视觉基调和安全区高度。主内容区是页面的灵魂，我把它继续拆成四块：焦点图轮播、推荐歌单网格、排行榜横向列表、可能的歌手/电台分区。底部播放器区则独立于页面滚动之外，固定在窗口最底部，这是音乐类产品区别于普通门户网站的核心特征，也是动效和交互最密集的地方。

拆完之后我发现，整个页面的难点其实不在“有多少块”，而在“块之间的层级关系怎么保证”，比如轮播图切换时不能把歌单卡片挤得上下乱跳，底部播放器出现时不能遮住主内容最后一行文字。这些在框架里很容易通过组件隔离解决的问题，在原生代码里全靠你对 DOM 结构和 CSS 定位的理解。

1.2 为什么坚持无框架，而不是直接上 Vue

有人可能会问：现在写页面谁还手写 DOM？Vue 三行代码就能渲染一个列表，为什么非要自虐？

我的回答是：这个项目的价值恰恰在于“不用框架”。当你用框架的时候，数据驱动视图、虚拟 DOM 更新、组件生命周期这些概念框架帮你处理好了，你只需要写业务逻辑。但如果你对原生 DOM 操作不够熟练，你就永远说不清楚“为什么数据变了页面会跟着变”。仿写这种交互密集的页面，正是训练原生能力的好场景，你亲自操作 createElement、appendChild、事件监听、属性更新，你会对浏览器渲染有一个具体可感的认识。

另外还有一个实际原因：完全无框架意味着零依赖、零构建，你把这个文件夹发给任何人，双击就能跑。这对于交作业、做分享、甚至接小外包都很方便，不需要帮对方装环境。我自己在做这个项目的时候，就把“打开即用”作为一个硬性验收标准。

1.3 功能清单和验收标准

为了不让自己写着写着就跑偏，我在开工前立了一个功能清单：

• 轮播图自动播放、手动切换圆点指示器
• 推荐歌单卡片网格展示，悬停有轻微上浮效果
• 底部播放器固定定位，展示封面、歌名、歌手
• 播放/暂停逻辑，切歌自动重置进度
• 进度条支持点击跳转和拖拽跳转
• 音量条支持调节，默认音量 0.8
• 播放模式支持顺序播放、单曲循环、随机播放
• 歌曲列表可点击切换，当前播放项高亮

验收标准很简单：不报错、无依赖、在 Chrome 和手机浏览器上都能正常操作。后面所有代码和方案，都是围绕这份清单展开的，凡是清单里没有的功能，我一概不做，避免陷入边写边加功能的泥潭。

2. 页面布局与视觉细节：把“像”字做到位

2.1 用 CSS 变量统一管理配色

仿写的关键不是“一模一样”，而是“气质对味”。音乐类页面的气质通常来自暗色背景、高饱和强调色、圆弧卡片和微光晕效果。我先用 CSS 变量把这些视觉元素定义好，后面无论写哪个区块，都用变量取值，不会出现颜色前后不一致的问题。

:root { --bg-main: #1a1a1f; --bg-card: #24242b; --bg-elevated: #2e2e38; --text-primary: #f2f2f5; --text-secondary: #9a9aa5; --accent: #3b82f6; --accent-hover: #2563eb; --spacing-base: 16px; --radius-card: 12px; }

这样设计的好处在你后续调主题的时候就能体会到。如果产品经理突然说“蓝色不好看，换绿色”，你只需要改 --accent 一个变量，全页面几十处引用自动跟着变，不用满文件搜 background-color。另外，我把间距和圆角也做成变量，是因为卡片、按钮、列表项这些组件统一使用同一个间距体系，视觉上才会有一致性，手写页面最大的问题就是这儿写 14px、那儿写 16px，最后整个页面看起来乱糟糟的。

2.2 头图轮播：原生 JS 实现自动切换和圆点指示器

轮播图是整个页面第一个显眼的大块，也是最容易做坏的地方。网上搜轮播图能搜出几十种写法，用 jQuery 的、用第三方插件的、用 CSS scroll-snap 的，但我最终选择了最经典的原生实现：一个容器装所有图片，用 transform 平移，配合 setInterval 自动播放。

<div class="banner-wrapper"> <div class="banner-track" id="bannerTrack"> <div class="banner-slide" style="background-image: url('img/banner1.jpg');"></div> <div class="banner-slide" style="background-image: url('img/banner2.jpg');"></div> <div class="banner-slide" style="background-image: url('img/banner3.jpg');"></div> </div> <div class="banner-dots" id="bannerDots"></div> </div>

.banner-wrapper { position: relative; overflow: hidden; border-radius: var(--radius-card); } .banner-track { display: flex; transition: transform 0.5s ease; } .banner-slide { flex: 0 0 100%; height: 220px; background-size: cover; background-position: center; } .banner-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .banner-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; } .banner-dots span.active { background: #fff; }

let current = 0; const track = document.getElementById('bannerTrack'); const slides = track.children.length; const dots = document.querySelectorAll('#bannerDots span'); function goTo(index) { current = (index + slides) % slides; track.style.transform = `translateX(-${current * 100}%)`; dots.forEach((dot, i) => dot.classList.toggle('active', i === current)); } setInterval(() => goTo(current + 1), 4000); dots.forEach((dot, i) => dot.addEventListener('click', () => goTo(i)));

这里我要重点说两个细节。第一个是 goTo 函数里用了模运算，保证了从头到尾、从尾到头的环形切换，如果不做这个处理，图片播到最后一页再下一张会跳回原点。第二个是 dots 的生成方式，我是在 HTML 里手动写了三个 span，你也可以在 JS 里动态渲染，但手动写的优势在于初始就可见、不会出现 JS 加载前一片空白的问题。实际项目中如果轮播图数量会变化，我建议改成动态生成，逻辑更干净。

2.3 推荐歌单与排行榜卡片：flex 网格和悬浮动效

内容区最核心的模块是歌单网格。我的做法是用 CSS Grid 做一个响应式布局，五个卡片一排，窗口变窄时自动降为三列、两列。

.playlist-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } @media (max-width: 1024px) { .playlist-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .playlist-grid { grid-template-columns: repeat(2, 1fr); } }

卡片本身很简单：封面图、歌单标题、播放量描述。我真正想提的是悬浮动效的实现思路。很多新手喜欢对元素用 hover 加缩放，但缩放放在整个卡片上会导致文本跟着变大变小，看起来很不专业。我这里的方案是只对封面图做 transform: scale 和 translateY，文字部分保持原位，这样既有一点“卡片上浮”的感觉，又不会干扰阅读。

.playlist-card { background: var(--bg-card); border-radius: var(--radius-card); overflow: hidden; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .playlist-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.5); } .playlist-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform 0.3s ease; } .playlist-card:hover img { transform: scale(1.06); }

关于排行榜部分，我放弃了复杂的横向滚动，直接用 flex 排列四列排行榜区块，每列放 5 条歌曲记录，这样视觉上更接近真实产品，也不需要在移动端额外处理横向滑动的交互，省了不少事。仿写项目的一个重要原则就是：看起来像、交互顺、代码简单，三个目标同时满足的位置，可以果断放弃像素级还原。

3. 核心播放器：无框架下的音频控制与进度条

3.1 播放器数据结构和 Audio 对象用法

播放器是这个页面里交互逻辑最重的部分。我先把歌曲数据设计成一个数组，每个元素包含歌名、歌手、封面路径、音频路径等字段。把这个数据结构确定好，后面所有逻辑包括列表渲染、切歌、高亮，都是基于这个数组在转。

const playlist = [ { title: '夜空中最亮的星（演示）', singer: '歌手A', cover: 'img/cover1.jpg', src: 'audio/song1.mp3' }, { title: '往事随风（演示）', singer: '歌手B', cover: 'img/cover2.jpg', src: 'audio/song2.mp3' }, { title: '南山南（演示）', singer: '歌手C', cover: 'img/cover3.jpg', src: 'audio/song3.mp3' } ];

在实际项目里，你肯定不会有音乐文件的版权，所以这个页面我用的是演示音频，路径指向本地 audio 目录。如果你手头没有音频，可以先用免费的音频链接代替，或者干脆用一段短的提示音反复测试播放逻辑，关键是把播放器的状态切换调通。

audio 对象的用法是这个模块的重点。你不是直接操作 DOM 元素来控制音频，而是创建一个独立的 Audio 实例，然后监听它的事件。常用的就四个事件：loadedmetadata 获取音频总时长、timeupdate 跟随播放进度更新 UI、ended 判断一首歌放完后的行为、play/pause 同步按钮的图标状态。

3.2 播放/暂停/切歌的处理

播放器的操作逻辑我封装在一个函数集合里，核心是 loadAndPlay 函数。每次切歌，先把 audio.src 换成新歌的地址，然后调用 load() 加载，再调用 play() 播放。这里有一个新手很容易踩的坑：如果你在 play() 之前还没设置 src 或者还没加载完，浏览器会静默失败，你的播放按钮按下去一点反应都没有。

const audio = new Audio(); let currentIndex = 0; let isPlaying = false; function loadAndPlay(index) { currentIndex = (index + playlist.length) % playlist.length; const song = playlist[currentIndex]; audio.src = song.src; audio.load(); updatePlayerUI(song); audio.play().then(() => { isPlaying = true; updatePlayButton(); }).catch(() => { // 浏览器阻止自动播放时会走到这里 isPlaying = false; updatePlayButton(); }); } function togglePlay() { if (!audio.src) { loadAndPlay(0); return; } if (audio.paused) { audio.play(); } else { audio.pause(); } } function nextSong() { if (playMode === 'random') { const randomIndex = Math.floor(Math.random() * playlist.length); loadAndPlay(randomIndex); } else { loadAndPlay(currentIndex + 1); } } function prevSong() { loadAndPlay(currentIndex - 1); }

切歌按钮“上一首/下一首”看起来简单，但有一个产品细节需要处理：如果当前歌曲已经播放超过 3 秒，点击“上一首”应该回到当前歌曲开头，而不是直接切到上一首。这是我做了几个版本之后才加上的逻辑，否则有时候想听一遍就点了个上一首，结果歌直接换了，体验很差。你可以在监听 prevSong 的时候先判断 audio.currentTime > 3，是就归零，不是才切歌。

3.3 进度条拖动：解决时间和样式同步问题

进度条是播放器里面交互复杂度最高的部分，因为它要同时处理三件事：播放时进度自己走、用户点击跳转、用户按住拖动。如果这三件事没有处理好，就会出现“进度条刚拖动完又被播放时间拉回去”的抖动问题。

我的方案是把进度条分成两层：底层是一个可以点击的 div，上层是铺满的进度颜色和一个圆形的滑块。点击进度条时，通过鼠标相对容器的位置除以容器宽度得到百分比，再乘以音频总时长得到目标时间点。

<div class="progress-wrapper" id="progressWrapper"> <div class="progress-filled" id="progressFilled"></div> <div class="progress-thumb" id="progressThumb"></div> </div>

.progress-wrapper { position: relative; height: 6px; background: #3a3a45; border-radius: 3px; cursor: pointer; } .progress-filled { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--accent); border-radius: 3px; } .progress-thumb { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }

监听三个事件：mousedown 开始拖动、mousemove 拖动中更新、mouseup 结束拖动。需要注意的是，mousemove 应该绑定在 document 上而不是进度条容器上，否则鼠标移出进度条一小段距离就断开了。我这里用一个 dragging 变量做开关，只有 true 时才允许 mousemove 更新进度，否则时间更新事件会把进度条拉回去。

progressWrapper.addEventListener('click', (e) => { const rect = progressWrapper.getBoundingClientRect(); const ratio = (e.clientX - rect.left) / rect.width; audio.currentTime = ratio * audio.duration; }); let dragging = false; progressWrapper.addEventListener('mousedown', (e) => { dragging = true; updateProgressFromEvent(e); document.addEventListener('mousemove', onDragMove); document.addEventListener('mouseup', onDragEnd); }); function onDragMove(e) { if (!dragging) return; updateProgressFromEvent(e); } function onDragEnd() { dragging = false; document.removeEventListener('mousemove', onDragMove); document.removeEventListener('mouseup', onDragEnd); }

还有一个容易忽略的点：当用户按下拖动但音频还在播放时，audio 本身会继续走，timeupdate 事件会不断触发并更新进度条。如果你在拖动的过程中还让 timeupdate 去改进度条 UI，进度条就会跟你“抢控制权”。所以 timeupdate 里一定要判断 if (!dragging) 再做同步，这是我调试时遇到最典型的竞态问题。

4. 完整代码实现：拆解一版可直接运行的源码

4.1 HTML 骨架：三层结构一个都不能少

整个页面骨架我用三段式：头部 header、主区域 main、底部播放器 player。main 内部再分轮播区、歌单区、排行榜区。这样做法的好处是结构语义清晰，样式定位也好做。

<!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="style.css"> </head> <body> <header class="top-header"> <div class="logo">音乐图标</div> <nav class="main-nav"> <a href="#" class="active">推荐</a> <a href="#">排行榜</a> <a href="#">歌单</a> <a href="#">歌手</a> </nav> <div class="header-search"> <input type="text" placeholder="搜索歌曲、歌手"> </div> </header> <main class="main-content"> <section class="banner-section" id="bannerSection"> <!-- 轮播图区域 --> </section> <section class="section-block"> <h2 class="section-title">推荐歌单</h2> <div class="playlist-grid" id="playlistGrid"></div> </section> <section class="section-block"> <h2 class="section-title">排行榜</h2> <div class="rank-grid" id="rankGrid"></div> </section> </main> <footer class="player-bar"> <div class="player-left"> <img src="img/cover1.jpg" alt="封面" id="playerCover"> <div class="player-info"> <div class="song-title" id="playerTitle">暂无播放</div> <div class="song-singer" id="playerSinger">--</div> </div> </div> <div class="player-center"> <div class="player-controls"> <button id="modeBtn">列表循环</button> <button id="prevBtn">上一首</button> <button id="playBtn">播放</button> <button id="nextBtn">下一首</button> </div> <div class="player-progress"> <span class="time-label" id="currentTime">00:00</span> <div class="progress-wrapper" id="progressWrapper"> <div class="progress-filled" id="progressFilled"></div> <div class="progress-thumb" id="progressThumb"></div> </div> <span class="time-label" id="durationTime">00:00</span> </div> </div> <div class="player-right"> <span>音量</span> <div class="volume-wrapper" id="volumeWrapper"> <div class="volume-filled" id="volumeFilled"></div> </div> </div> </footer> <script src="app.js"></script> </body> </html>

这首歌单区块我建议不要写死在 HTML 里，而是用 JS 根据数据数组生成。原因是歌单数量、封面地址以后改起来都在数据里改，比抠 HTML 要快得多。排行榜也可以先用一些演示数据在 JS 里渲染，等你有真实数据了再替换。

4.2 CSS 关键片段：从变量到响应式

除了前面已经展示过的 CSS 变量和播放器样式，这里还需要补充头部和主内容区的关键样式。头部我使用的是 flex 居中布局，左右固定宽度、中间自适应。播放器底部我用 position: fixed，宽度 100%，高度 80px，内部 z-index 保持在一个较高值，避免被内容区盖住。

.top-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 64px; background: rgba(26, 26, 31, 0.96); backdrop-filter: blur(12px); } .main-content { max-width: 1280px; margin: 0 auto; padding: 24px; padding-bottom: 104px; } .player-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 80px; background: #1f1f24; border-top: 1px solid #2c2c34; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 99; }

给 main 设置一个 padding-bottom 是非常关键的细节。底部播放器固定占掉 80px，如果你不给主内容底部留出足够空间，最后一行文字会被播放器挡住，滚动的时候才能看到。这个坑我在第一次写的时候没注意，后来发现排行榜最后几行永远顶在处理边界上，特别难看。

响应式方面，我已经在前面写了歌单网格的 media query。播放器的响应式稍微复杂一点，窗口特别窄的时候，右上音量条可以隐藏，播放进度条适当压缩，这个可以根据实际需求剪裁。我一般习惯在 768px 断点做一次整体的布局调整。

4.3 JS 逻辑核心：从数据渲染到状态同步

JS 部分分两块。第一块是渲染函数，负责根据 playlist 数组生成歌单网格和歌曲列表；第二块是播放器控制逻辑，负责把点击事件和音频状态绑定起来。

渲染歌单网格的代码我这样写：

const playlistGrid = document.getElementById('playlistGrid'); playlist.forEach((song, index) => { const card = document.createElement('div'); card.className = 'playlist-card'; card.innerHTML = ` <img src="${song.cover}" alt="${song.title}" loading="lazy"> <div class="card-title">${song.title}</div> <div class="card-meta">${song.singer}</div> `; card.addEventListener('click', () => loadAndPlay(index)); playlistGrid.appendChild(card); });

这里我故意把点击事件绑定给整个卡片而不是只绑给播放按钮，好处是用户点击封面、标题、任意空白处都能切歌，符合真实产品的交互习惯。你不需要额外给每个播放按钮单独加事件。

第二块是状态同步的细节。需要在几个关键位置调用 UI 更新函数：loadAndPlay 设置新歌后要更新封面图、标题、歌手；play 与 pause 事件要切换播放按钮的文案和样式；timeupdate 要更新当前时间和进度条宽度。这些函数分离出来，维护起来省心很多。

function updatePlayerUI(song) { document.getElementById('playerCover').src = song.cover; document.getElementById('playerTitle').textContent = song.title; document.getElementById('playerSinger').textContent = song.singer; } function updatePlayButton() { const btn = document.getElementById('playBtn'); if (audio.paused) { btn.textContent = '播放'; } else { btn.textContent = '暂停'; } } audio.addEventListener('timeupdate', () => { if (dragging) return; const ratio = audio.currentTime / audio.duration || 0; const percent = ratio * 100; document.getElementById('progressFilled').style.width = percent + '%'; document.getElementById('progressThumb').style.left = percent + '%'; document.getElementById('currentTime').textContent = formatTime(audio.currentTime); });

时长格式化是我顺手写的一个小函数，把秒数转成 mm:ss 的格式，小于 10 分钟的就直接显示 m:ss，其实逻辑很简单，但很多新手会卡在补零这件事上。建议用 String.prototype.padStart，比手写 if 判断干净。

5. 实操中的常见问题与排查技巧

5.1 图片路径和资源加载失败

仿写页面时最常见的意外，是图片“裂了”。原因大多是路径写错，但还有一类是绝对路径和相对路径混淆。如果你用 file:// 协议双击打开 index.html，建议所有资源都用相对路径，不要以 / 开头，否则会直接找到磁盘根目录去。另外，图片源尽量用本地文件而不是网络链接，一方面避免网络慢导致页面空荡荡，另一方面也能保持在纯离线环境可用。

我习惯把所有素材放在项目内 img 和 audio 两个文件夹里。如果你暂时没有图片，可以在 CSS 里给封面容器设置一个占位背景色，等替换正式素材时再移除。占位图可以参考 loading="lazy" 属性配合背景色方案，即使在网络加载慢时也不会大面积留白。

5.2 移动端点击播放无声音

很多用户从电脑上调试得好好的，一放到手机上打开，点播放按钮却没有声音。原因是 iOS 和部分移动端浏览器对自动播放有严格的限制，只有用户手势触发的 play() 调用才会被允许。解决方案是确保音频的 play() 是在点击事件的处理函数里直接调用的，不要在 setTimeout 或异步回调里再调用，否则会被浏览器判定为非用户手势。

还有一个细节是，第一次点击播放前需要设置 audio.src 并调用 audio.load()，如果 src 为空就调 play()，浏览器同样会直接拒绝。我在 loadAndPlay 函数里已经处理了这个问题，先判断 src 再赋值，确保每次都是完整流程。

5.3 进度条拖动不流畅

进度条拖动有两个常见坑。第一个是点击位置计算不准，原因是忽略容器本身的偏移，只用了 e.clientX 直接减去一个小常数。正确做法是通过 getBoundingClientRect 获取容器左边界，再计算相对位置，这个我前面已经展示了。第二个坑是秒数跳变，在拖拽过程中你虽然更新了 UI，但 audio.currentTime 还没更新，所以松手前听到的还是旧进度。解决方法是拖动过程中只更新 UI，mouseup 时才真正修改 audio.currentTime。

如果你还要处理触摸屏拖拽，需要额外监听 touchstart、touchmove、touchend。电脑端三件套和移动端触摸事件是两套体系，我一般会写一个统一的 updateProgressFromEvent 函数，同时支持 MouseEvent 和 TouchEvent，避免在多个地方重复计算位置。

5.4 播放模式切换的逻辑实现

播放模式属于“看着简单、写起来容易乱”的功能。三种模式分别是顺序播放、单曲循环、随机播放，我建议用一个变量 playMode 保存字符串，然后集中在两个地方判断：一处是切歌按钮调用 nextSong 时，另一处是播放结束的 ended 事件里。

audio.addEventListener('ended', () => { if (playMode === 'single') { audio.currentTime = 0; audio.play(); } else if (playMode === 'random') { loadAndPlay(Math.floor(Math.random() * playlist.length)); } else { nextSong(); } });

按钮文案我直接用中文显示“列表循环”“单曲循环”“随机播放”，点击时循环切换。如果你想要更好看的视觉反馈，可以用三个不同的小图标替换，但核心逻辑是完全一样的，先改 playMode 再按当前模式响应。要注意的是，随机播放模式下，连续两次随机可能抽到同一首，你可以加一个简单的排除逻辑，如果随机结果等于当前索引就再随机一次，避免“按下一首但歌没变”的困惑。

写在最后的几句大实话

这个项目做下来，最值钱的其实不是那段轮播图代码，也不是播放器逻辑，而是我逼自己把每一个交互都拆成了“数据变化 + 视图更新 + 用户手势”三件事来理解。在没有框架的情况下，你必须手动保证页面状态和音频状态的一致性，这种对状态同步的敏感度，用框架写项目时很难练出来。

如果你也想动手做一个，我建议你先把页面结构手绘出来，哪怕画在草稿纸上都行，标出每个区块的容器关系，再开始写代码。不要直接对着别人源码抄，那样你永远不会记得轮播图为什么用 transform 而不用 display:none 切换，也不会理解为什么 progress 的 thumb 要 translate(-50%, -50%) 才能居中。先画图、再写数据、然后写结构、最后补样式和交互，按这个顺序做下来，一两天时间就能完成，而且你对“一个完整页面是怎么组装起来的”会有一个扎实的体感。做完之后，不妨把歌曲数据换成你自己的 JSON 文件，或者试着加一个搜索过滤功能，这个项目能扩展的方向还有很多。