文章目录
- 作者：[xcLeigh](https://blog.csdn.net/weixin_43151418)
- 1.设计来源
- 1.1 界面效果
- 1.2 轮播图界面
- 1.3 音乐播放界面
- 1.4 视频播放界面
- 2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 源码下载
- 万套模板，程序开发，在线开发，在线沟通
作者：xcLeigh
HTML5实现我的音乐网站源码，音乐网站源码，实现音乐播放，视频播放，轮播图，歌词显示，列表排列，表格表单等功能，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
1.设计来源
1.1 界面效果
1.2 轮播图界面
1.3 音乐播放界面
1.4 视频播放界面
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的音乐网站。
HTML5实现我的音乐网站源码
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的音乐网站</title>
<link rel="icon" href="img/NetEasy.png" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="layui-v2.5.7/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="css/APlayer.min.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><img src="img/NetEasy.png" /></li>
<li class="layui-nav-item layui-this"><a href="#">发现音乐</a></li>
<li class="layui-nav-item"><a href="#">我的音乐</a></li>
<li class="layui-nav-item"><a href="#">朋友</a></li>
<li class="layui-nav-item"><a href="#">商城</a></li>
<li class="layui-nav-item"><a href="#">音乐人</a></li>
<li class="layui-nav-item"><a target="_blank" href="https://music.163.com/stat/?web=pc&from=download&t=1610548843346&redirect=https://music.163.com/api/pc/package/download/latest">下载客户端<span
class="layui-badge">HOT</span></a></li>
</ul>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md9">
<div class="layui-carousel" id="banner">
<div carousel-item>
<div><img src="img/banner/1.jpg" /></div>
<div><img src="img/banner/2.jpg" /></div>
<div><img src="img/banner/3.jpg" /></div>
<div><img src="img/banner/4.jpg" /></div>
<div><img src="img/banner/5.jpg" /></div>
<div><img src="img/banner/6.jpg" /></div>
<div><img src="img/banner/7.jpg" /></div>
<div><img src="img/banner/8.jpg" /></div>
<div><img src="img/banner/9.jpg" /></div>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-card-body">
<div class="layui-col-md9">
<div class="layui-input-inline">
<input type="text" id="searchTxt" placeholder="搜索音乐" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-col-md3">
<button type="button" id="searchBtn" class="layui-btn"> <i class="layui-icon"></i></button>
</div>
<div style="height:90px;width:60px;float:left;text-align: center;margin-top: 10px;">
<img src="img/head.jpg" style="height:60px;width:60px;">
<span class="layui-badge">Lv10</span>
</div>
<div style="float:left;margin-left: 5px;margin-top: 10px;">
<a id="author2_A" href="#">
<h2>xcLeigh</h2>
</a>
<p class="gray"><i class="layui-icon layui-icon-location"></i> 北京 朝阳</p>
<button id="qiandao" class="layui-btn layui-btn-normal layui-btn-sm" style="float:left;margin-left: 5px;border-radius: 5px;">签 到</button>
</div>
<hr>
<div class="right_td">
<span style="font-size: 18px;font-weight: 700;">50</span>
<p class="gray">动态</p>
</div>
<div class="right_td">
<span style="font-size: 18px;font-weight: 700;">25</span>
<p class="gray">评论</p>
</div>
<div class="right_td">
<span style="font-size: 18px;font-weight: 700;">18</span>
<p class="gray">关注</p>
</div>
<div class="right_td">
<span style="font-size: 18px;font-weight: 700;">12</span>
<p class="gray">粉丝</p>
</div>
<!--个人简介 -->
<div style="margin-top:3px;">
<p class="gray">你看到的光，自以为是希望。以为能摆脱厄运。可到了最后发现，那竟是没有山谷的回声。</p>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div id="recommend" class="layui-col-xs6 layui-col-sm6 layui-col-md9">
<fieldset class="layui-elem-field layui-field-title">
<legend>热门推荐<span class="layui-breadcrumb" lay-separator="|" style="margin-left: 25px;">
<a href="">华语</a>
<a href="">流行</a>
<a href="">摇滚</a>
<a href="">民谣</a>
<a href="">电子</a>
</span></legend>
<div class="layui-field-box">
<div class="layui-row" style="margin-top: 5px;">
<div class="layui-col-md3">
<img src="img/recommend/1.jpg" />
<p><a href="#">流行风暴 | 2020年的时候我们都在听什么</a></p>
</div>
<div class="layui-col-md3">
<img src="img/recommend/2.jpg" />
<p><a href="#">[一周原创发现] 谭松韵&谢春花跨界合作共同送上2021最美好的祝福</a></p>
</div>
<div class="layui-col-md3">
<img src="img/recommend/3.jpg" />
<p><a href="#">私人雷达 | 根据听歌记录为你打造</a></p>
</div>
<div class="layui-col-md3">
<img src="img/recommend/4.jpg" />
<p><a href="#"><span class="layui-badge">电台节目</span> Vol.480 #我的流金岁月#置之死地而后生</a></p>
</div>
</div>
<div class="layui-row" style="margin-top: 15px;">
<div class="layui-col-md3">
<img src="img/recommend/5.jpg" />
<p><a href="#">薛之谦-谦友专属</a></p>
</div>
<div class="layui-col-md3">
<img src="img/recommend/6.jpg" />
<p><a href="#">天津都市怪谈之灵异大搜罗-壹</a></p>
</div>
<div class="layui-col-md3">
<img src="img/recommend/7.jpg" />
<p><a href="#">值得单曲循环的华语良曲（一人一首）</a></p>
</div>
<div class="layui-col-md3">
<img src="img/recommend/8.jpg" />
<p><a href="#"> 云泥</a></p>
</div>
</div>
</div>
</fieldset>
</div>
<div class="layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">入驻歌手</div>
<div class="layui-card-body">
<div class="layui-row">
<div class="layui-col-md4">
<img src="img/musican/zhanghuimei.jpg" />
</div>
<div class="layui-col-md8">
<p>张惠妹aMEI</p>
<p style="font-size: smaller;" class="gray">台湾歌手张惠妹</p>
</div>
</div>
<hr />
<div class="layui-row">
<div class="layui-col-md4">
<img src="img/musican/fine.jpg" />
</div>
<div class="layui-col-md8">
<p>Fine乐团</p>
<p style="font-size: smaller;" class="gray">独立音乐人</p>
</div>
</div>
<hr />
<div class="layui-row">
<div class="layui-col-md4">
<img src="img/musican/wanxiaoli.jpg" />
</div>
<div class="layui-col-md8">
<p>萬曉利</p>
<p style="font-size: smaller;" class="gray">民谣歌手</p>
</div>
</div>
<hr />
<div class="layui-row">
<div class="layui-col-md4">
<img src="img/musican/zhaolei.jpg" />
</div>
<div class="layui-col-md8">
<p>音乐人赵雷</p>
<p style="font-size: smaller;" class="gray">民谣歌手</p>
</div>
</div>
<hr />
<div class="layui-row">
<div class="layui-col-md4">
<img src="img/musican/wangsanbo.jpg" />
</div>
<div class="layui-col-md8">
<p>王三溥</p>
<p style="font-size: smaller;" class="gray">音乐人</p>
</div>
</div>
<hr>
<button type="button" id="apply" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-fluid">申请成为网易音乐人</button>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12 layui-col-md12 layui-col-bg12">
<footer class="footer gcs-footer">
<div class="footer-top">
<a href="#" class="gray">服务条款</a> |
<a href="#" class="gray">隐私政策</a> |
<a href="#" class="gray">儿童隐私政策</a> |
<a href="#" class="gray">版权投诉指引</a> |
<a href="#" class="gray">意见反馈</a> |
</div>
<p>
2024.07.15 @ CopyRight 版权所有
</p>
</footer>
</div>
</div>
</div>
<script src="layui-v2.5.7/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/APlayer.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Meting.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
源码下载
HTML5实现我的音乐网站源码（源码） 点击下载
万套模板，程序开发，在线开发，在线沟通
- 专业后端大佬在线沟通需求开发
- 专业前端大佬在线沟通需求开发
- 专业网站整套大佬在线沟通需求开发
- 专业毕业设计大佬在线沟通需求开发
- 专业大作业大佬在线沟通需求开发
- 【优惠活动】专属定制，程序在线开发
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/140258284（防止抄袭，原文地址不可删除）
