如何创建一个简单的音乐推荐页面：从零开始的指南（内含完整代码）

标签：内含 color 音乐 list li 从零开始歌曲页面

如何创建一个简单的音乐推荐页面：从零开始的指南

引言

在这篇博客中，我们将学习如何创建一个简单的音乐推荐页面。这个项目将帮助你熟悉HTML、CSS和JavaScript的基本使用。我们会创建一个现代化的页面，包括一个顶部导航栏、一个轮播图展示最新音乐、一个推荐歌曲列表以及一个基础的页脚。

项目结构

我们将创建以下文件来完成这个项目：

index.html - HTML结构文件
styles.css - 样式文件
script.js - JavaScript脚本文件

第一步：创建HTML结构

首先，我们需要定义页面的结构。打开你的代码编辑器，新建一个文件 index.html，并写入以下内容：

<!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐仿制版</title>
    <link rel="stylesheet" href="styles.css"></head><body>
    <header>
        <div class="logo">网易云音乐</div>
        <nav>
            <ul>
                <li><a href="#">发现音乐</a></li>
                <li><a href="#">我的音乐</a></li>
                <li><a href="#">下载客户端</a></li>
                <li><a href="#">登录</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="banner">
            <h2>最新音乐</h2>
            <div class="banner-images">
                <img src="banner1.jpg" alt="Banner 1">
                <img src="banner2.jpg" alt="Banner 2">
                <img src="banner3.jpg" alt="Banner 3">
            </div>
        </section>

        <section class="music-list">
            <h2>推荐歌曲</h2>
            <ul id="song-list">
                <!-- JavaScript will populate this list -->
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 网易云音乐 | 版权所有</p>
    </footer>

    <script src="script.js"></script></body></html>

解析HTML结构

头部 (<header>)：
- 包含网站的 logo 和导航栏。
- 导航栏使用了无序列表来列出不同的链接。
主要内容 (<main>)：
- 包含一个轮播图展示最新音乐和一个推荐歌曲列表。
- 轮播图部分用来显示图片，推荐歌曲部分用来展示歌曲列表。
页脚 (<footer>)：
- 显示版权信息。

第二步：添加样式

接下来，我们将添加样式来美化页面。创建一个新的文件 styles.css 并加入以下内容：

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #ff6a00;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header .logo {
    font-size: 1.5em;
    font-weight: bold;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1em;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #ffb74d;
}

.banner {
    position: relative;
    text-align: center;
    margin: 20px 0;
    overflow: hidden;
}

.banner h2 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

.banner-images {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.banner-images img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    transition: transform 0.5s;
}

.banner-images img:hover {
    transform: scale(1.05);
}

.music-list {
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 20px;
}

.music-list h2 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 15px;
}

.music-list ul {
    list-style: none;
}

.music-list li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    transition: background 0.3s;
}

.music-list li:hover {
    background: #f1f1f1;
}

.music-list li:last-child {
    border-bottom: none;
}

footer {
    text-align: center;
    padding: 15px;
    background-color: #242424;
    color: white;
    position: relative;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

解析CSS样式

全局样式：
- 使用通用选择器 * 清除默认的边距和内边距。
头部：
- 设置背景颜色、文本颜色、内边距和阴影效果。
- 修改导航链接的样式并添加悬停效果。
轮播图：
- 设置图片的显示效果和悬停放大效果。
音乐列表：
- 设置背景颜色、阴影效果和悬停背景色变化。
页脚：
- 设置背景颜色、文本颜色和位置。

第三步：添加交互功能

最后，我们将添加一些简单的交互功能。创建一个新的文件 script.js 并加入以下内容：

document.addEventListener("DOMContentLoaded", function() {
    const songList = document.getElementById("song-list");
    
    const songs = [
        "歌曲五 - 歌手五",
        "歌曲六 - 歌手六",
        "歌曲七 - 歌手七",
        "歌曲八 - 歌手八",
        "歌曲九 - 歌手九"
    ];

    songs.forEach(song => {
        const li = document.createElement("li");
        li.textContent = song;
        songList.appendChild(li);
    });
});

解析JavaScript脚本

DOM内容加载完成后执行：
- 使用 DOMContentLoaded 事件确保DOM结构加载完成后执行脚本。
动态添加歌曲：
- 定义一个包含歌曲信息的数组。
- 遍历数组，将每首歌动态添加到页面的歌曲列表中。

总结

通过这个项目，我们学习了如何用HTML构建页面结构，如何用CSS美化页面，如何用JavaScript动态地操作DOM。这些知识是创建现代网页的基础。你可以在此基础上继续扩展功能，比如添加实际的音乐播放器、引入更多的动态内容等。希望这篇博客对你有所帮助！

如果你有任何问题或需要进一步的帮助，欢迎在评论区留言！

标签：内含,color,音乐,list,li,从零开始,歌曲,页面
From： https://blog.csdn.net/Mr_Zhangyuge/article/details/141002132