<!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>XIAOHEI</title>
<link rel="icon" href="image/logo.ico" type="image/x-icon">
<link rel="stylesheet" href="./style.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="img/logo.png" alt="">
<span>XIAOHEI音乐</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="img/LOGN.jpg" alt="a">
<span>小黑学长T</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"><span>个性推荐</span></li>
<li><span>专属定制</span></li>
<li><span>歌单</span></li>
<li><span>排行榜</span></li>
<li><span>歌手</span></li>
<li><span>最新音乐</span></li>
</ul>
<div class="banner">
<div class="infomation">
<h4>BM</h4>
<p>得此物者不欺弱 不媚强佩戴即同意 便是守村人的意义第十三张唱片实体《守村人》。</p>
<div class="btn_listen btn_listen_1">
<span>点击试听</span>
</div>
<div class="btn_listen btn_listen_2">
<span>点击收藏</span>
</div>
</div>
<img src="img/加藤惠.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="img/薛之谦.jpg" alt="">
<span>刚刚好<br>薛之谦</span>
</li>
<li>
<img src="img/李荣浩.jpg" alt="">
<span>默<br>李荣浩</span>
</li>
<li>
<img src="img/万疆.jpg" alt="">
<span>万疆<br>李玉刚</span>
</li>
<li>
<img src="img/那英.jpg" alt="">
<span>忘不了<br>那英</span>
</li>
<li>
<img src="img/群青.jpg" alt="">
<span>群青<br>YOASOBI</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="ft_left">
<img class="_img" src="img/薛之谦.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><i class="iconfont icon-shangyishoushangyige"></i></li>
<li onclick="bofang()"><i class="iconfont icon-bofang _audio"></i><audio id="ado"></audio></i></li>
<li><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="index.js"></script>
</body>
</html>
index.html
style.css
index.js
index.html