仿网易云音乐首页（HTML+CSS+JS）
效果图如下
主要代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Music</title> 8 <link rel="stylesheet" href="./styles/base.css"> 9 </link> 10 <link rel="stylesheet" href="./styles/index.css" type="text/css"> 11 </link> 12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> 13 </link> 14 <script type="module" src="./js/main.js"></script> 15 </head> 16 17 <script> 18 // 等待DOM加载完成 19 document.addEventListener('DOMContentLoaded', function() { 20 // 获取 Tab 容器和所有 Tab 项 21 const tabArea = document.querySelector('.red-tab-area'); 22 const tabs = tabArea.querySelectorAll('.tab-item'); 23 24 // 绑定点击事件 25 tabs.forEach(tab => { 26 tab.addEventListener('click', () => { 27 // 移除所有 Tab 的 active 类 28 tabs.forEach(t => t.classList.remove('active')); 29 // 为当前点击的 Tab 添加 active 类 30 tab.classList.add('active'); 31 32 // 根据点击的 Tab 执行不同逻辑（示例） 33 const tabText = tab.textContent.trim(); 34 switch (tabText) { 35 case '推荐': 36 console.log('切换到推荐页'); 37 break; 38 case '歌单': 39 console.log('切换到歌单页'); 40 41 window.location = 'gedan.html'; // 如果在同一个目录下 42 break; 43 case '歌手': 44 console.log('切换到歌手页'); 45 break; 46 } 47 }); 48 }); 49 50 const discoverBtn = document.querySelector('.find-music'); 51 discoverBtn.addEventListener('click', function() { 52 if (tabArea.style.display === 'none') { 53 tabArea.style.display = 'flex'; 54 } else { 55 tabArea.style.display = 'none'; 56 } 57 }); 58 59 }); 60 </script> 61 62 <body> 63 <div class="header"> 64 <div class="container"> 65 <h1> 66 <!-- logo --> 67 <a href="#" class="logo"> 68 </h1> 69 <h1 class="logo"><a href="www.baidu.com">网易云音乐</a></h1> 70 </a> 71 <!-- 导航 --> 72 <ul class="nav"> 73 <li class="nav-item find-music"><a href="#" class="歌单">发现音乐</a></li> 74 <li class="nav-item"><a href="###">我的音乐</a></li> 75 <li class="nav-item"><a href="###">关注</a></li> 76 <li class="nav-item"><a href="###">商城</a></li> 77 <li class="nav-item"><a href="###">音乐人</a></li> 78 <li class="nav-item"><a href="###">云推歌</a></li> 79 <li class="nav-item"><a href="###">下载客户端</a></li> 80 </ul> 81 <!-- 搜索与右侧功能区 --> 82 <div class="search-and-actions"> 83 <!-- 搜索框 --> 84 <div class="search"> 85 <input type="text" placeholder="音乐/视频/电台/用户" class="keywords"/> 86 <button class="search-btn">搜索</button> 87 </div> 88 <!-- 右侧功能区 --> 89 <div class="header-actions"> 90 <a href="#" class="creator-center">创作者中心</a> 91 <a href="#" class="login">登录</a> 92 </div> 93 </div> 94 </div> 95 </div> 96 <!--红色tab区域--> 97 <div style="display: none;" class="red-tab-area" id="redTabArea"> 98 <div class="tab-item active">推荐</div> 99 <div class="tab-item">歌单</div> 100 <div class="tab-item">歌手</div> 101 </div> 102 103 <div class="wonderful module"> 104 <div class="container"> 105 <div class="title-wraper wonderful-title"> 106 <div class="wonderful-content"> 107 <div class="item ad"> 108 <ul class="ad-list"> 109 <li><a href="###"><img src="./images/jike.jpg" /></a></li> 110 <li><a href="###"><img src="./images/zhangyunlei.jpg" /></a></li> 111 <li><a href="###"><img src="./images/TNT.jpg" /></a></li> 112 </ul> 113 <div class="ad-btn"> 114 <span>1</span> 115 <span>2</span> 116 <span>3</span> 117 </div> 118 <a href="javascript:;" class="btn-left btn"><</a> 119 <a href="javascript:;" class="btn-right btn">></a> 120 </div> 121 122 </li> 123 </ul> 124 </div> 125 </div> 126 </div> 127 </div> 128 129 <div class="recommend module"> 130 <div class="container"> 131 <div class="title-wraper wonderful-title"> 132 <h3 class="title"><a href="###">歌手专区</a></h3> 133 </div> 134 135 <ul class="recommend-list"> 136 <li class="recommend-list-item"> 137 <a href="###"> 138 <div class="front"> 139 <div class="contents"> 140 <img class="thumbnail" src="./images/wangjunkai.jpg" /> 141 <h4 class="title">王俊凯（Karry），1999年9月21日出生于重庆市， 142 中国内地影视男演员、流行乐歌手 143 </h4> 144 </div> 145 </div> 146 <div class="back back-1"> 147 <div class="contents"> 148 </div> 149 </div> 150 151 </a> 152 153 </li> 154 <li class="recommend-list-item"> 155 <a href="###"> 156 <div class="front"> 157 <div class="contents"> 158 <img class="thumbnail" src="./images/zhoujielun.jpg" /> 159 <h4 class="title">周杰伦（Jay Chou），1979年1月18日出生于中国台湾新北市， 160 华语流行乐男歌手、音乐人</h4> 161 </div> 162 </div> 163 <div class="back back-2"> 164 <div class="contents"> 165 </div> 166 </div> 167 </a> 168 </li> 169 <li class="recommend-list-item"> 170 <a href="###"> 171 <div class="front"> 172 <div class="contents"> 173 <img class="thumbnail" src="./images/zhangbichen.jpg" /> 174 <h4 class="title">张碧晨（Diamond），1989年9月10日出生于天津市， 175 中国内地流行乐女歌手 </h4> 176 </div> 177 </div> 178 <div class="back back-3"> 179 <div class="contents"> 180 </div> 181 </div> 182 </a> 183 </li> 184 <li class="recommend-list-item"> 185 <a href="###"> 186 <div class="front"> 187 <div class="contents"> 188 <img class="thumbnail" src="./images/linjunjie.jpg" /> 189 <h4 class="title">林俊杰（JJ Lin），1981年3月27日出生于新加坡， 190 华语流行乐男歌手、音乐人、影视演员</h4> 191 </div> 192 </div> 193 <div class="back back-4"> 194 <div class="contents"> 195 </div> 196 </div> 197 </a> 198 </li> 199 <li class="recommend-list-item"> 200 <a href="###"> 201 <div class="front"> 202 <div class="contents"> 203 <img class="thumbnail" src="./images/majiaqi.jpg" /> 204 <h4 class="title">马嘉祺，2002年12月12日出生于河南省郑州市， 205 中国内地流行乐男歌手、演员。 206 </h4> 207 </div> 208 </div> 209 <div class="back back-5"> 210 <div class="contents"> 211 </div> 212 </div> 213 </a> 214 </li> 215 </ul> 216 </div> 217 </div> 218 </div> 219 <div class="community module"> 220 <div class="container"> 221 <div class="community-content"> 222 <div class="community-item"> 223 <div class="v-hd2"> 224 <a href="/discover/playlist/" class="tit f-ff2 f-tdn" id="recommend-list">热门推荐</a> 225 <div class="tab"> 226 <a href="###" class="s-fc3">华语</a> 227 <span class="line">|</span> 228 <a href="###" class="s-fc3">流行</a> 229 <span class="line">|</span> 230 <a href="###" class="s-fc3">摇滚</a> 231 <span class="line">|</span> 232 <a href="###" class="s-fc3">民谣</a> 233 <span class="line">|</span> 234 <a href="###" class="s-fc3">电子</a> 235 <span class="line">|</span> 236 <span class="more"> 237 <a href="###" class="s-fc3">更多</a> 238 239 </span> 240 </div> 241 </div> 242 <div class="card-list"> 243 <div class="card"> 244 <div class="card-img"> 245 <img src="/images/xia.jpg" alt="封面1"> 246 <span class="play-count">4790万</span> 247 <button class="play-btn"></button> 248 </div> 249 <p class="card-title">"温柔点吧，这个世界已经够浮躁的了"</p> 250 </div> 251 <div class="card"> 252 <div class="card-img"> 253 <img src="/images/lia.jpg" alt="封面2"> 254 <span class="play-count">32907万</span> 255 <button class="play-btn"></button> 256 </div> 257 <p class="card-title">国产说唱 | 你的中文说唱旋律精选</p> 258 </div> 259 <div class="card"> 260 <div class="card-img"> 261 <img src="/images/shou.jpg" alt="封面3"> 262 <span class="play-count">5884万</span> 263 <button class="play-btn"></button> 264 </div> 265 <p class="card-title">节奏控 | 那些超带感的英文歌</p> 266 </div> 267 <div class="card"> 268 <div class="card-img"> 269 <img src="/images/fan.jpg" alt="封面4"> 270 <span class="play-count">5311</span> 271 <button class="play-btn"></button> 272 </div> 273 <p class="card-title">「电台剧」2025知识进化论・樊登世界读书日演进</p> 274 </div> 275 <div class="card"> 276 <div class="card-img"> 277 <img src="/images/ou.jpg" alt="封面5"> 278 <span class="play-count">3683万</span> 279 <button class="play-btn"></button> 280 </div> 281 <p class="card-title">赶走阴霾 来一首欢快的欧美小调</p> 282 </div> 283 <div class="card"> 284 <div class="card-img"> 285 <img src="/images/hua.jpg" alt="封面6"> 286 <span class="play-count">14723</span> 287 <button class="play-btn"></button> 288 </div> 289 <p class="card-title">「故事FM」爱哲聊《去有花的地方》：烟火诗意在三千公…</p> 290 </div> 291 <div class="card"> 292 <div class="card-img"> 293 <img src="/images/mian.jpg" alt="封面7"> 294 <span class="play-count">3022万</span> 295 <button class="play-btn"></button> 296 </div> 297 <p class="card-title">助眠辑 | 自然音，伴灵动乐符萦绕耳畔</p> 298 </div> 299 <div class="card"> 300 <div class="card-img"> 301 <img src="/images/ne.jpg" alt="封面8"> 302 <span class="play-count">1427万</span> 303 <button class="play-btn"></button> 304 </div> 305 <p class="card-title">「电台剧」天雷滚滚我好怕怕</p> 306 </div> 307 <div class="card"> 308 <div class="card-img"> 309 <img src="/images/xia.jpg" alt="封面1"> 310 <span class="play-count">4790万</span> 311 <button class="play-btn"></button> 312 </div> 313 <p class="card-title">"温柔点吧，这个世界已经够浮躁的了"</p> 314 </div> 315 <div class="card"> 316 <div class="card-img"> 317 <img src="/images/lia.jpg" alt="封面2"> 318 <span class="play-count">32907万</span> 319 <button class="play-btn"></button> 320 </div> 321 <p class="card-title">国产说唱 | 你的中文说唱旋律精选</p> 322 </div> 323 <div class="card"> 324 <div class="card-img"> 325 <img src="/images/shou.jpg" alt="封面3"> 326 <span class="play-count">5884万</span> 327 <button class="play-btn"></button> 328 </div> 329 <p class="card-title">节奏控 | 那些超带感的英文歌</p> 330 </div> 331 <div class="card"> 332 <div class="card-img"> 333 <img src="/images/fan.jpg" alt="封面4"> 334 <span class="play-count">5311</span> 335 <button class="play-btn"></button> 336 </div> 337 <p class="card-title">「电台剧」2025知识进化论・樊登世界读书日演进</p> 338 </div> 339 <div class="card"> 340 <div class="card-img"> 341 <img src="/images/ou.jpg" alt="封面5"> 342 <span class="play-count">3683万</span> 343 <button class="play-btn"></button> 344 </div> 345 <p class="card-title">赶走阴霾 来一首欢快的欧美小调</p> 346 </div> 347 <div class="card"> 348 <div class="card-img"> 349 <img src="/images/hua.jpg" alt="封面6"> 350 <span class="play-count">14723</span> 351 <button class="play-btn"></button> 352 </div> 353 <p class="card-title">「故事FM」爱哲聊《去有花的地方》：烟火诗意在三千公…</p> 354 </div> 355 <div class="card"> 356 <div class="card-img"> 357 <img src="/images/mian.jpg" alt="封面7"> 358 <span class="play-count">3022万</span> 359 <button class="play-btn"></button> 360 </div> 361 <p class="card-title">助眠辑 | 自然音，伴灵动乐符萦绕耳畔</p> 362 </div> 363 <div class="card"> 364 <div class="card-img"> 365 <img src="/images/ne.jpg" alt="封面8"> 366 <span class="play-count">1427万</span> 367 <button class="play-btn"></button> 368 </div> 369 <p class="card-title">「电台剧」天雷滚滚我好怕怕</p> 370 </div> 371 <div class="card"> 372 <div class="card-img"> 373 <img src="/images/xia.jpg" alt="封面1"> 374 <span class="play-count">4790万</span> 375 <button class="play-btn"></button> 376 </div> 377 <p class="card-title">"温柔点吧，这个世界已经够浮躁的了"</p> 378 </div> 379 <div class="card"> 380 <div class="card-img"> 381 <img src="/images/lia.jpg" alt="封面2"> 382 <span class="play-count">32907万</span> 383 <button class="play-btn"></button> 384 </div> 385 <p class="card-title">国产说唱 | 你的中文说唱旋律精选</p> 386 </div> 387 <div class="card"> 388 <div class="card-img"> 389 <img src="/images/shou.jpg" alt="封面3"> 390 <span class="play-count">5884万</span> 391 <button class="play-btn"></button> 392 </div> 393 <p class="card-title">节奏控 | 那些超带感的英文歌</p> 394 </div> 395 <div class="card"> 396 <div class="card-img"> 397 <img src="/images/fan.jpg" alt="封面4"> 398 <span class="play-count">5311</span> 399 <button class="play-btn"></button> 400 </div> 401 <p class="card-title">「电台剧」2025知识进化论・樊登世界读书日演进</p> 402 </div> 403 <div class="card"> 404 <div class="card-img"> 405 <img src="/images/ou.jpg" alt="封面5"> 406 <span class="play-count">3683万</span> 407 <button class="play-btn"></button> 408 </div> 409 <p class="card-title">赶走阴霾 来一首欢快的欧美小调</p> 410 </div> 411 <div class="card"> 412 <div class="card-img"> 413 <img src="/images/hua.jpg" alt="封面6"> 414 <span class="play-count">14723</span> 415 <button class="play-btn"></button> 416 </div> 417 <p class="card-title">「故事FM」爱哲聊《去有花的地方》：烟火诗意在三千公…</p> 418 </div> 419 <div class="card"> 420 <div class="card-img"> 421 <img src="/images/mian.jpg" alt="封面7"> 422 <span class="play-count">3022万</span> 423 <button class="play-btn"></button> 424 </div> 425 <p class="card-title">助眠辑 | 自然音，伴灵动乐符萦绕耳畔</p> 426 </div> 427 <div class="card"> 428 <div class="card-img"> 429 <img src="/images/ne.jpg" alt="封面8"> 430 <span class="play-count">1427万</span> 431 <button class="play-btn"></button> 432 </div> 433 <p class="card-title">「电台剧」天雷滚滚我好怕怕</p> 434 </div> 435 <div class="card"> 436 <div class="card-img"> 437 <img src="/images/fan.jpg" alt="封面4"> 438 <span class="play-count">5311</span> 439 <button class="play-btn"></button> 440 </div> 441 <p class="card-title">「电台剧」2025知识进化论・樊登世界读书日演进</p> 442 </div> 443 </ol> 444 </div> 445 </div> 446 </div> 447 448 </div> 449 <div class="footer"> 450 <div class="container"> 451 <div class="footer-nav"> 452 <!-- 底部功能导航区域 --> 453 <footer class="footer-nav"> 454 <ul class="nav-list"> 455 <li> 456 <a href="javascript:;" class="nav-item"> 457 <span class="icon icon-music-platform"></span> 458 <span class="text">音乐开放平台</span> 459 </a> 460 </li> 461 <li> 462 <a href="javascript:;" class="nav-item"> 463 <span class="icon icon-cloud-exchange"></span> 464 <span class="text">云村交易所</span> 465 </a> 466 </li> 467 <li> 468 <a href="javascript:;" class="nav-item"> 469 <span class="icon icon-x-studio"></span> 470 <span class="text">X StudioAI歌手</span> 471 </a> 472 </li> 473 <li> 474 <a href="javascript:;" class="nav-item"> 475 <span class="icon icon-user-certify"></span> 476 <span class="text">用户认证</span> 477 </a> 478 </li> 479 <li> 480 <a href="javascript:;" class="nav-item"> 481 <span class="icon icon-ai-write"></span> 482 <span class="text">AI 免费写歌</span> 483 </a> 484 </li> 485 <li> 486 <a href="javascript:;" class="nav-item"> 487 <span class="icon icon-cloud-push"></span> 488 <span class="text">云推歌</span> 489 </a> 490 </li> 491 <li> 492 <a href="javascript:;" class="nav-item"> 493 <span class="icon icon-reward"></span> 494 <span class="text">赞赏</span> 495 </a> 496 </li> 497 </ul> 498 </footer> 499 500 <!-- 底部版权信息区域 --> 501 <section class="footer-info"> 502 <div class="info-links"> 503 <a href="#">服务条款</a> | 504 <a href="#">隐私政策</a> | 505 <a href="#">儿童隐私政策</a> | 506 <a href="#">版权投诉</a> | 507 <a href="#">投资者关系</a> | 508 <a href="#">广告合作</a> | 509 <a href="#">联系我们</a> 510 </div> 511 <div class="report-info"> 512 廉正举报 不良信息举报邮箱: 51jubao@service.netease.com 513 </div> 514 <div class="license-info"> 515 互联网宗教信息服务许可证: 浙 (2022) 0000120 增值电信业务经营许可证: 浙B2-20150198 粤B2-20090191-18 浙ICP备15006616号-4 工业和信息化部备案管理系统网站 516 </div> 517 <div class="copyright"> 518 网易公司版权所有©1997-2025 算法服务公示信息 519 </div> 520 </section> 521 </div> 522 <!-- 回到顶部按钮 --> 523 <a href="#" id="backToTop" class="back-to-top-btn" title="回到顶部"> 524 <i class="fa fa-angle-up"></i> 525 <span>顶部</span> 526 </a> 527 </body> 528 529 </html>
备注： 剩余代码请留言获取。
浙公网安备 33010602011771号