主页面：音乐可以播放
歌单：
排行榜：
歌手：
留言板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>悦音乐</title>
<link rel="icon" href="image/logo.ico" type="image/x-icon" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/font_header.css" />
<link rel="stylesheet" href="./css/font_leftBox.css" />
<link rel="stylesheet" href="css/font_footer.css" />
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="header">
<div class="logo">
<img src="./image/logo.png" alt="" />
<span>悦音乐</span>
</div>
<div class="middle">
<i class="iconfont icon-jiantou-xiangzuo"></i>
<i class="iconfont icon-jiantou-xiangyou"></i>
<div class="search">
<i class="iconfont icon-sousuo"></i>
<input type="text" placeholder="搜索" />
</div>
<i class="iconfont icon-mic-on"></i>
</div>
<div class="other">
<div class="userInfo">
<img src="./image/header.png" alt="a" />
<span>_significant_</span>
</div>
<ul>
<li><i class="iconfont icon-zhuti"></i></li>
<li><i class="iconfont icon-shezhi"></i></li>
<li><i class="iconfont icon-xinfeng"></i></li>
<li class="vertical_bar"></li>
<li><i class="iconfont icon-MINIMIZE"></i></li>
<li><i class="iconfont icon-zuixiaohua"></i></li>
<li><i class="iconfont icon-zuidahua"></i></li>
<li><i class="iconfont icon-guanbi"></i></li>
</ul>
</div>
</div>
<!-- 渐变线条 -->
<div class="line"></div>
<!-- 中间 -->
<div class="main">
<div class="left-box">
<ul>
<li><span>发现音乐</span></li>
<li><span>播客</span></li>
<li><span>视频</span></li>
<li><span>关注</span></li>
<li><span>直播</span></li>
<li><span>私人FM</span></li>
</ul>
<div class="my_music">
<span>我的音乐</span>
</div>
<ul class="mine">
<li>
<i class="iconfont icon-bendixiazai"></i><span>本地与下载</span>
</li>
<li>
<i class="iconfont icon-zuijinbofang"></i><span>最近播放</span>
</li>
<li><i class="iconfont icon-yun"></i><span>我的音乐云盘</span></li>
<li><i class="iconfont icon-boke1"></i><span>我的播客</span></li>
<li>
<i class="iconfont icon-ego-favorite"></i><span>我的收藏</span>
</li>
</ul>
<div class="create_list">
<span>
创建的歌单
<i class="iconfont icon-ico_arrowright"></i>
<i class="iconfont icon-jia i_last"></i>
</span>
</div>
<div class="create_list">
<span>
收藏的歌单
<i class="iconfont icon-ico_arrowright"></i>
</span>
</div>
</div>
<div class="right-box">
<ul class="navigation">
<li class="active" desc="nominate"><span>个性推荐</span></li>
<!-- <li><span>专属定制</span></li> -->
<li desc="songs_list"><span>歌单</span></li>
<li desc="rank_list"><span>排行榜</span></li>
<li desc="songer"><span>歌手</span></li>
<!-- <li><span>最新音乐</span></li> -->
<li desc="message_board"><span>留言板</span></li>
</ul>
<!-- 使用iframe，镶嵌页面，点击可切换 -->
<div>
<iframe
src="./innner/nominate.html"
id="the_iframe"
class="the-iframe"
ref="Frame"
>
</iframe>
</div>
<!-- <div>
<div class="banner">
<div class="infomation">
<h4>黑夜问白天</h4>
<p> 《黑夜问白天》是事和中国流行歌手庄心妍演唱的一首歌曲,由庄心妍和韩寒共同创作,介绍于2019年发行。黑夜后故这首歌曲是问白庄心妍的代表作之一,也是天首中国流行音乐中的经典之作之一。
</p>
<div class="btn_listen btn_listen_1">
<span>点击试听</span>
</div>
<div class="btn_listen btn_listen_2">
<span>点击收藏</span>
</div>
</div>
<img src="./image/黑夜问白天.jpg" alt="">
</div>
<div class="dot">
<ul class="dots">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="recm_list">
<div class="recm_word">推荐歌曲<i class="iconfont icon-jiantou-xiangyou"></i></div>
<ul>
<li>
<img src="./image/main/交换余生.jpg" alt="">
<span>交换余生<br>林俊杰</span>
</li>
<li>
<img src="./image/main/孤独娱乐.jpg" alt="">
<span>孤独娱乐<br>林俊杰</span>
</li>
<li>
<img src="./image/main/黑夜问白天.jpg" alt="">
<span>黑夜问白天<br>林俊杰</span>
</li>
<li>
<img src="./image/main/好想爱这个世界啊.jpg" alt="">
<span>好想爱这个世界啊<br>华晨宇</span>
</li>
<li>
<img src="./image/main/谢幕.jpg" alt="">
<span>谢幕<br>林俊杰</span>
</li>
</ul>
</div>
</div> -->
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="ft_left">
<img class="_img" src="./image/main/愿与愁.jpg" alt="" />
<div class="songNameAndSinger">
<span class="songName"
>愿与愁<i class="iconfont icon-aixin"></i
></span>
<span class="singer">林俊杰</span>
</div>
</div>
<div class="ft_main">
<!-- 播放栏工具 -->
<ul class="tool_list">
<li><i class="iconfont icon-lajitong"></i></li>
<li onclick="switchSong(-1)">
<i class="iconfont icon-shangyishoushangyige"></i>
</li>
<li onclick="bofang()">
<i class="iconfont icon-bofang _audio"></i
><audio id="ado"></audio>
</li>
<li onclick="switchSong(1)">
<i class="iconfont icon-xiayigexiayishou"></i>
</li>
<li><i class="iconfont icon-geciweidianji"></i></li>
</ul>
<!-- 进度条 -->
<div class="progress">
<div class="slide"></div>
<div class="fill"></div>
<!--歌曲当前时间与总时间 -->
<span class="currentTime time">00:00</span>
<span class="duraTime time">00:00</span>
</div>
</div>
<ul class="ft_right">
<li class="jigao">极高</li>
<li class="iconfont icon-yinxiao"></li>
<li class="iconfont icon-yinliangkai _voice"></li>
<li class="iconfont icon-yiqipindan"></li>
<li class="iconfont icon-24gl-playlistMusic"></li>
</ul>
</div>
</div>
<script src="./js/listen.js"></script>
</body>
</html>
扫一扫
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
