diff --git a/index.html b/index.html
new file mode 100644
index 0000000..68d0a2d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>黑胶音乐售卖网站</title>
+  <!-- 引入 Bootstrap 5 CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+  <style>
+    body {
+      background: linear-gradient(to bottom, #333, #000);
+      color: white;
+    }
+
+    /* 导航栏样式 */
+    .navbar {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    /* 轮播图样式 */
+    .carousel-item img {
+      width: 100%;
+      height: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <!-- 导航栏 -->
+  <nav class="navbar navbar-expand-lg navbar-dark">
+    <div class="container">
+      <!-- 左侧 logo 图标 -->
+      <a class="navbar-brand" href="#">
+        <img src="logo.png" alt="Logo" width="30" height="30">
+      </a>
+      <!-- 折叠菜单按钮 -->
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <!-- 导航栏内容 -->
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <!-- 中间搜索框和搜索按钮 -->
+        <form class="d-flex ms-auto me-3">
+          <input class="form-control me-2" type="search" placeholder="搜索黑胶音乐" aria-label="Search">
+          <button class="btn btn-outline-light" type="submit">搜索</button>
+        </form>
+        <!-- 右侧登录按钮或用户昵称 -->
+        <div id="login-status" class="d-flex align-items-center">
+          <button id="login-btn" class="btn btn-outline-light">登录</button>
+          <span id="user-nickname" class="ms-3 d-none"></span>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <!-- 广告显示部分（轮播图） -->
+  <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
+    <div class="carousel-indicators">
+      <!-- 轮播图指示器 -->
+      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
+        aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
+        aria-label="Slide 2"></button>
+      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
+        aria-label="Slide 3"></button>
+    </div>
+    <div class="carousel-inner">
+      <!-- 轮播图项目 -->
+      <div class="carousel-item active">
+        <img src="ad1.jpg" class="d-block w-100" alt="广告1">
+      </div>
+      <div class="carousel-item">
+        <img src="ad2.jpg" class="d-block w-100" alt="广告2">
+      </div>
+      <div class="carousel-item">
+        <img src="ad3.jpg" class="d-block w-100" alt="广告3">
+      </div>
+    </div>
+    <!-- 轮播图左右控制按钮 -->
+    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Next</span>
+    </button>
+  </div>
+
+  <!-- 黑胶音乐售卖列表 -->
+  <div class="container my-5">
+    <div class="row" id="vinyl-list">
+      <!-- 黑胶音乐信息将通过 JavaScript 动态添加 -->
+    </div>
+  </div>
+
+  <!-- 引入 jQuery -->
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <!-- 引入 Bootstrap 5 JavaScript -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+  <script>
+    // 模拟登录状态
+    let isLoggedIn = false;
+    let userNickname = "测试用户";
+
+    // 处理登录按钮点击事件
+    $('#login-btn').on('click', function () {
+      if (!isLoggedIn) {
+        isLoggedIn = true;
+        $('#login-btn').addClass('d-none');
+        $('#user-nickname').removeClass('d-none').text(userNickname);
+      }
+    });
+
+    // 生成 100 条测试数据
+    const vinylData = [];
+    for (let i = 1; i <= 100; i++) {
+      vinylData.push({
+        id: i,
+        name: `黑胶音乐 ${i}`,
+        price: Math.floor(Math.random() * 100) + 50,
+        cover: 'https://img2.baidu.com/it/u=3520876916,800927408&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=760'
+      });
+    }
+
+    // 渲染黑胶音乐列表
+    const vinylList = $('#vinyl-list');
+    vinylData.forEach((vinyl, index) => {
+      if (index % 5 === 0) {
+        vinylList.append('<div class="row mb-4"></div>');
+      }
+      const currentRow = vinylList.find('.row').last();
+      currentRow.append(`
+        <div class="col-md-2">
+          <div class="card bg-dark text-white">
+            <img src="${vinyl.cover}" class="card-img-top" alt="${vinyl.name}">
+            <div class="card-body">
+              <h5 class="card-title">${vinyl.name}</h5>
+              <p class="card-text">售价: ¥${vinyl.price}</p>
+            </div>
+          </div>
+        </div>
+      `);
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
