<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="./pic/favourite.png">
<link rel="stylesheet" href="./style.css">
<title>MicoMusic</title>
</head>
<body onload="Load()" onclick="ifClick()">
<div id="player-body" style="position: relative">
<!--顶部-->
<div id="header">
<div id="logo"><img src="./pic/favourite.png" style="height:40px;width: 40px;vertical-align: middle;" draggable="false" />MicoMusic</div>
<div>
<input id="searchbox" type="text" value="搜索音乐,歌手,专辑" onfocus="getfocus()" onblur="lostfocus()" spellcheck="false"></input>
<img id="search" src="./pic/search.png" onmouseover="serMouseOver()" onmouseout="serMouseOut()" onclick="bdsearch()" draggable="false"
/>
<img id="user" src="./pic/user.png" onmouseover="userMouseOver()" onmouseout="userMouseOut()" onclick="showUserPage()" draggable="false"
/>
<img id="mail" src="./pic/mail.png" onmouseover="mailMouseOver()" onmouseout="mailMouseOut()" onclick="showMailPage()" draggable="false"
/>
<img id="skin" src="./pic/skin.png" onmouseover="skinMouseOver()" onmouseout="skinMouseOut()" onclick="chSkin()" draggable="false"
/>
</div>
</div>
<!--抹了脖子的变红分割线-->
<div id="redline"></div>
<!--中间-->
<!--隐藏播放页-->
<div id="hider">
<div id="playPart">
<img id="ct" src="./pic/ct.png" draggable="false" />
<img id="jp" src="./pic/jp.png" draggable="false" />
</div>
<div id="lrcPart">
<span id="lrcSpan"></span>
</div>
<div id="ssPart">
<img id="ssPic" src="./pic/ss.png" onclick="hideHider()" draggable="false" />
</div>
</div>
<!--user页-->
<div id="userPage" onclick="event.stopPropagation()">
<p>当前用户:Admin</p>
<p>用户等级:88</p>
<br />
<br />
<br />
<p><a>注销</a></p>
</div>
<!--email页-->
<div id="mailPage" onclick="event.stopPropagation()">
<p>您还没有未读邮件。</p>
</div>
<img id="pointPic" src="./pic/point.png" />
<!--推荐首页-->
<div id="middle">
<div id="list">
<!--菜单-->
<div id="top">
<ul>推荐
<li>发现音乐</li>
<li>私人FM</li>
<li>MV</li>
<li>朋友</li>
</ul>
<ul>我的音乐
<li>本地音乐</li>
<li>下载管理</li>
<li>音乐云盘</li>
<li>我的歌手</li>
</ul>
<ul>我的歌单
<li>我喜欢的音乐</li>
<li>小众华语</li>
<li>民谣听史</li>
<li>华语精选</li>
</ul>
<ul>收藏的歌单
<li>宣传片背景音乐</li>
<li>自然声效</li>
<li>极限运动BGM</li>
<li>2017第一季TOP50</li>
<li>最具人气动漫歌曲</li>
<li>你就不要想起我</li>
<li>优秀影视主题曲</li>
<li>灵魂插曲</li>
<li>4月新热电音</li>
<li>岁月催人老</li>
<li>深情华语男声</li>
<li>Fighting!跑步歌单</li>
</ul>
</div>
<!--我是一条分呀分割线-->
<hr />
<!--歌曲信息-->
<div id="bottom">
<!--专辑图片-->
<div id="bottom-left">
<img id="songpic" src="./pic/cd.png" onmouseover="onZk()" onmouseout="outZk()" draggable="false" />
<img id="sszk" src="./pic/zk.png" onmouseover="onZk()" onmouseout="outZk()" onclick="showHider()" draggable="false" />
</div>
<!--歌曲信息-->
<div id="bottom-middle">
<br />
<span id="songname">成都</span>
<br />
<span id="singername">赵雷</span>
<br />
</div>
<!--喜欢,分享-->
<div id="bottom-right">
<span id="like" onclick="ilike()">❤</span>
<br />
</div>
</div>
</div>
<!--歌单区-->
<div id="content">
<!--导航条-->
<div id="nav">
<ul>
<li>个性推荐</li>
<li>歌单</li>
<li>主播电台</li>
<li>排行榜</li>
<li>歌手</li>
<li>最新音乐</li>
</ul>
</div>
<!--我是一条分呀分割线-->
<hr />
<!--轮播广告-->
<div id="ads">
<img id="ads1" src="./pic/a/a (1).png" draggable="false" />
<img id="ads2" src="./pic/a/a (2).png" draggable="false" />
<img id="ads3" src="./pic/a/a (3).png" draggable="false" />
</div>
<!--推荐信息-->
<div id="detail">
<ul>
推荐歌单
<span class="more" style="float: right;font-size: 11px;">更多></span><br />
<hr />
<br />
<li class="tj"><span><img src="./pic/c/c (1).png"/><br />那些思想与灵魂纯粹的<br />音乐诗人</span></li>
<li class="tj"><span><img src="./pic/c/c (2).png"/><br />唯你最深得我意,也只<br />你最不识抬举</span></li>
<li class="tj"><span><img src="./pic/c/c (3).png"/><br />沉浸在音乐的深处无法<br />自拔</span></li>
<li class="tj"><span><img src="./pic/c/c (4).png"/><br />那些经验嗨翻天的华语<br />现场</span></li>
<li class="tj"><span><img src="./pic/c/c (5).png"/><br />听民谣的人究竟有多少<br />故事</span></li>
<li class="tj"><span><img src="./pic/c/c (6).png"/><br />四月清和,何不赏一曲<br />清凉电子</span></li>
<li class="tj"><span><img src="./pic/c/c (7).png"/><br />尚未解开的谜题,一直<br />深埋心底</span></li>
<li class="tj"><span><img src="./pic/c/c (8).png"/><br />总有一句词,唱出你最<br />深的内心</span></li>
<li class="tj"><span><img src="./pic/c/c (9).png"/><br />听这些歌,打开了多少<br />人的情绪阀门</span></li>
<li class="tj"><span><img src="./pic/c/c (10).png"/><br />就像在柔软彩虹里的一<br />场梦</span></li>
<br />
<br /> 独家放送
<sp
没有合适的资源?快使用搜索试试~ 我知道了~
HTML作业-仿网易云音乐项目
共65个文件
png:53个
jpg:3个
mp3:3个
3星 · 超过75%的资源 需积分: 50 203 下载量 87 浏览量
2018-04-29
00:24:36
上传
评论 46
收藏 15.71MB ZIP 举报
温馨提示
html作业,仿照网易云音乐客户端练练,可以播放音乐,可以看歌词、拖进度等等,可以换肤,我本人喜欢黑色的皮肤,白色皮肤是赶时间加上去的,有的地方不协调。
资源推荐
资源详情
资源评论
收起资源包目录
Music.zip (65个子文件)
Music
index.html 17KB
mp3
sds.mp3 4.76MB
cd.mp3 5.01MB
fqxdsws.mp3 4.84MB
font.otf 2KB
action.js 12KB
pic
user.png 721B
point.png 14KB
userh.png 720B
b
b (2).png 20KB
b (3).png 27KB
b (6).png 34KB
b (1).png 24KB
b (5).png 23KB
b (4).png 35KB
volumeh.png 675B
skin.png 565B
uph.png 809B
playh.png 717B
zk.png 1KB
sds.png 34KB
up.png 944B
fqxdsws_gs.jpg 18KB
pausen.png 886B
ct.png 5KB
volume.png 674B
fqxdsws.png 37KB
sds_gs.jpg 19KB
cd.png 35KB
downh.png 836B
downn.png 982B
mailh.png 536B
cd_gs.jpg 19KB
mail.png 538B
c
c (9).png 43KB
c (1).png 55KB
c (4).png 30KB
c (8).png 19KB
c (2).png 51KB
c (10).png 41KB
c (7).png 63KB
c (6).png 38KB
c (5).png 33KB
c (3).png 70KB
searchh.png 613B
play.png 843B
search.png 623B
favourite.png 977B
ss.png 1KB
pauseh.png 742B
a
a (6).png 20KB
a (4).png 58KB
a (2).png 56KB
a (1).png 63KB
a (5).png 119KB
a (3).png 55KB
down.png 978B
upn.png 953B
jp.png 47KB
pause.png 875B
playn.png 872B
skinh.png 568B
lrc.js 5KB
Welcome.html 3KB
style.css 9KB
共 65 条
- 1
资源评论
- cms论坛2021-12-23想法是好的,但是只能播放几首歌曲上一首下一首,播单等功能不能使用,期待继续努力做一个完成品、
- maomaota1232020-04-22界面做的很棒,上面那个评价估计是没弄好css
- isst2018-05-10这个差太远了。一点也不像183SHL2018-05-17恶意评分?你css加载完了吗,用chrome打开
183SHL
- 粉丝: 12
- 资源: 5
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功