经管之家App
让优质教育人人可得
立即打开
音乐馆首页界面展示
数字专辑页面展示
个人音乐中心页面
项目部分代码实现截图
全部版块
我的主页
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的音乐</title>
<link rel="stylesheet" href="css/myMusic.css">
</head>
<body>
<div class="header">
<div class="top">
<div class="content_1">
<!-- QQ音乐图标 -->
<img src="images/logo.png"/>
<!-- 列表 -->
<div class="list">
<ul>
<li><a href="index.html">音乐馆</a></li>
<li><a href="" style="color: white;">我的音乐</a></li>
<li>
<a href="">客户端</a>
<img src="images/mark_1.png"/>
</li>
<li><a href="">开放平台</a></li>
<li><a href="">VIP</a></li>
</ul>
</div>
<!-- 搜索框 -->
<div class="reseach">
<div class="ss">
<input type="text" placeholder="搜索音乐、MV、歌单、用户" value/>
<img src="images/ss.png"/>
</div>
</div>
<!-- 用户操作 -->
<div class="doing">
<ul class="doing_ul">
<li>
<img src="images/tx.jpg"/>
<img src="images/login_qq.png"/>
<div class="tx_hover">
<div>
<!-- 左边放头像 -->
<div>
<img src="images/tx.jpg"/>
<img src="images/login_qq.png"/>
</div>
<!-- 右边放用户名，图标 -->
<div>
<ul>
<li><a href="">双一.</a></li>
<li>
<img src="images/d-ktvip1.png"/>
<img src="images/d-vip1.png"/>
</li>
</ul>
</div>
</div>
<div>
<ul style="margin-top: 15px;">
<li style="position: relative;">
<a href="" >
超级会员<br/>
<a style=";color: gray;">开通享高品质音乐</a>
</a>
<a href="" class="but but_1" style=";color: rgb(234, 149, 21);">开通</a>
</li>
<li style="position: relative;">
<a href="">
绿钻豪华版<br/>
<a style=";color: gray;">开通享海量正版VIP音乐</a>
</a>
<a href="" class="but but_2" style="color: white;;">开通</a>
</li>
<li style="height: 35px;"><a>评论通知</a></li>
<li style="height: 35px;"><a href="">退出登录</a></li>
</ul>
</div>
</div>
</li>
<li>
开通VIP
<div class="xla">
<ul class="xla_ul">
<li>开通超级会员</li>
<li>开通绿钻豪华版</li>
</ul>
</div>
</li>
<li>
充值
<div class="xla">
<ul class="xia_ul_2">
<li>购买乐币</li>
<li>充值饭票</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 用户信息 -->
<div class="information">
<div class="inform_1">
<div>
<div class="in_list">
<div>
<img src="images/tx.jpg"/>
</div>
<div>
<a>双一.</a>
<img src="images/d-ktvip1.png"/>
<img src="images/d-vip1.png"/>
</div>
<div>
<ul>
<li>
<a>1</a><br/>
<a>关注</a>
</li>
<li>
<a>1</a><br/>
<a>粉丝</a>
</li>
</ul>
</div>
</div>
</div>
<div class="in_nav">
<ul>
<li style=";"><a href="" style="color: #2cb573;">我喜欢</a></li>
<li><a href="">我创建的歌单</a></li>
<li style=";"><a href="">关注</a></li>
<li style=";"><a href="">粉丝</a></li>
<li><a href="">我上传的视频</a></li>
</ul>
</div>
</div>
</div>
<!-- 735 -->
<div class="music">
<!-- 57 -->
<div class="music_list">
<ul>
<li><a href="" style="color: #2cb573;">歌曲 26</a></li>
<li><a href="">歌单 0</a></li>
<li><a href="">专辑 0</a></li>
<li><a href="">视频 0</a></li>
</ul>
</div>
<!-- 678 -->
<div class="my_music">
<!-- 88 -->
<div class="my_action">
<ul>
<!-- 1 -->
<li>
<a href="">
<div class="img_1"></div>
<div class="a_1" style="color: white;">播放全部</div>
</a>
</li>
<!-- 2 -->
<li>
<a href="">
<div class="img_2"></div>
<div class="a_1">添加到</div>
</a>
</li>
<!-- 3 -->
<li>
<a href="">
<div class="img_3"></div>
<div class="a_1">下载</div>
</a>
</li>
<!-- 4 -->
<li>
<a href="">
<div class="img_4"></div>
<div class="a_1">批量操作</div>
</a>
</li>
</ul>
</div>
<!-- 590 -->
<div class="music_content">
<!-- 50 -->
<div class="item">
<div></div>
<div>歌曲</div>
<div>歌手</div>
<div>专辑</div>
<div>时长</div>
</div>
<!-- 500 -->
<div class="which_song">
<ul class="song_name">
<li class="item_copy">
<div style="color: #999999;">1</div>
<div>
盗墓笔记·十年人间(小乔版)
<div></div>
</div>
<div>旺仔小乔</div>
<div>盗墓笔记·十年人间(小乔版)</div>
<div style="color: #999999;">03:31</div>
</li>
<li class="item_copy">
<div style="color:#999999;">2</div>
<div>Boyfriend<div></div><div></div> </div>
<div>Justin Bieber</div>
<div>Boyfriend</div>
<div style="color: #999999;">02:51</div>
</li>
<li class="item_copy">
<div style="color:#999999;">3</div>
<div>情话微甜<div></div><div></div> </div>
<div>李朝 /王圣锋</div>
<div>情话微甜</div>
<div style="color: #999999;">03:28</div>
</li>
<li class="item_copy">
<div style="color: #999999;">4</div>
<div>恶魔的爱<div></div> </div>
<div>李哂稳蕥毅/李明霖</div>
<div>恶魔的爱</div>
<div style="color: #999999;">04:12</div>
</li>
<li class="item_copy">
<div style="color:#999999;">5</div>
<div>霜雪千年</div>
<div>双笙(陈元汐)/封茗囧菌</div>
<div>翻唱歌曲合集</div>
<div style="color: #999999;">04:06</div>
</li>
<li class="item_copy">
<div style="color:#999999;">6</div>
<div>浪漫空气</div>
<div>李明霖 /小越女</div>
<div>浪漫空气</div>
<div style="color: #999999;">04:26</div>
</li>
<li class="item_copy">
<div style="color:#999999;">7</div>
<div>消愁(DJ版)</div>
<div>新旭</div>
<div>快手火曲</div>
<div style="color: #999999;">02:36</div>
</li>
<li class="item_copy">
<div style="color:#999999;">8</div>
<div>秋花凉<div></div> </div>
<div>艾辰</div>
<div>秋花凉</div>
<div style="color: #999999;">03:49</div>
</li>
<li class="item_copy">
<div style="color:#999999;">9</div>
<div>罗曼蒂克的爱情<div></div><div></div> </div>
<div>贺敬轩</div>
<div>罗曼蒂克的爱情</div>
<div style="color: #999999;">03:29</div>
</li>
<li class="item_copy">
<div style="color:#999999;">10</div>
<div>一笑倾城<div></div><div></div> </div>
<div>汪苏泷</div>
<div>微微一笑很倾城 电视剧原声带</div>
<div style="color: #999999;">03:51</div>
</li>
</ul>
</div>
<!-- 40 -->
<div class="look">
查看更多内容,请下载客户端
</div>
</div>
</div>
</div>
<div class="click">
<a href="">立即下载</a>
</div>
<!-- 底部 -->
<div class="bottom">
<img src="images/bottom.png"/>
</div>
</body>
</html>
扫码加好友，拉您进群
