使用HTML制作百度歌曲排行榜效果，从零开始构建音乐榜单页面

博主：sooopusooopu 2026-09-24 02:56:32 3

百度歌曲排行榜是音乐爱好者常用的榜单页面，其核心功能是通过清晰的布局展示歌曲排名、封面、歌名、歌手、播放次数等关键信息，同时提供流畅的浏览体验，本文将详细介绍如何使用HTML（结合CSS和少量JavaScript）从零开始制作一个类似百度歌曲排行榜的效果，重点涵盖结构搭建、样式设计和交互优化。

分析百度歌曲排行榜的核心模块

在开始制作前，我们先拆解百度歌曲排行榜的典型结构，通常包含以下模块：

  1. 头部区域：展示榜单名称（如“飙升榜”“热歌榜”）、切换榜单的标签页、搜索框等。
  2. 榜单列表区域，以列表形式展示歌曲信息，每首歌包含：
    • 排名（数字/图标，如TOP1用特殊样式）
    • 封面图片（歌曲封面，点击可播放）
    • 歌名（突出显示，可点击跳转）
    • 歌手（辅助信息，可点击查看歌手页）
    • 播放次数/播放时长（热度指标）
    • 操作按钮（播放、收藏、下载等）
  3. 底部区域：分页控件、加载更多按钮等。

我们将按照“结构→样式→交互”的步骤逐步实现。

搭建HTML基础结构

HTML是页面的骨架，需使用语义化标签清晰划分模块，以下是核心代码： 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">百度歌曲排行榜 - 热歌榜</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 头部区域 -->
    <header class="header">
        <div class="container">
            <h1 class="title">百度歌曲排行榜</h1>
            <div class="tab-switch">
                <button class="tab-btn active" data-tab="hot">热歌榜</button>
                <button class="tab-btn" data-tab="rising">飙升榜</button>
                <button class="tab-btn" data-tab="new">新歌榜</button>
            </div>
            <div class="search-box">
                <input type="text" placeholder="搜索歌曲、歌手">
                <button class="search-btn"><i class="fas fa-search"></i></button>
            </div>
        </div>
    </header>
    <!-- 主内容区域 -->
    <main class="main">
        <div class="container">
            <section class="rank-list">
                <!-- 榜单项示例 -->
                <article class="rank-item">
                    <div class="rank-num top1">1</div>
                    <div class="cover">
                        <img src="https://via.placeholder.com/80x80" alt="歌曲封面">
                        <button class="play-btn"><i class="fas fa-play"></i></button>
                    </div>
                    <div class="song-info">
                        <h3 class="song-name">孤勇者</h3>
                        <p class="artist">陈奕迅</p>
                    </div>
                    <div class="stats">
                        <span class="play-count"><i class="fas fa-play"></i> 12.3万</span>
                        <span class="duration">03:45</span>
                    </div>
                    <div class="actions">
                        <button class="action-btn favorite"><i class="far fa-heart"></i></button>
                        <button class="action-btn download"><i class="fas fa-download"></i></button>
                    </div>
                </article>
                <!-- 更多榜单项（省略，实际可循环生成） -->
                <article class="rank-item">
                    <div class="rank-num">2</div>
                    <div class="cover">
                        <img src="https://via.placeholder.com/80x80" alt="歌曲封面">
                        <button class="play-btn"><i class="fas fa-play"></i></button>
                    </div>
                    <div class="song-info">
                        <h3 class="song-name">漠河舞厅</h3>
                        <p class="artist">柳爽</p>
                    </div>
                    <div class="stats">
                        <span class="play-count"><i class="fas fa-play"></i> 10.5万</span>
                        <span class="duration">04:12</span>
                    </div>
                    <div class="actions">
                        <button class="action-btn favorite"><i class="far fa-heart"></i></button>
                        <button class="action-btn download"><i class="fas fa-download"></i></button>
                    </div>
                </article>
            </section>
            <!-- 分页控件 -->
            <div class="pagination">
                <button class="page-btn active">1</button>
                <button class="page-btn">2</button>
                <button class="page-btn">3</button>
                <button class="page-btn next"><i class="fas fa-chevron-right"></i></button>
            </div>
        </div>
    </main>
    <!-- 底部区域 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 百度歌曲排行榜 - 仅供学习使用</p>
        </div>
    </footer>
    <script src="script.js"></script>
The End

发布于：2026-09-24，除非注明，否则均为歌曲CLUB原创文章，转载请注明出处。