index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>云音乐</title>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/index.css">
<script src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="app" class="column">
<img class="music-img" src="img/06.jpg" alt="专辑封面">
<div class="head center">不谓侠</div>
<div class="list">
<div class="item row">
<div class="item-icon center">
<span class="fa fa-music"></span>
</div>
<div class="item-name">不谓侠</div>
<div class="item-size">4.5MB</div>
</div>
</div>
<div class="foot column">
<div class="progress-box center">
<div class="progress-bg">
<div class="progress">
<div class="dot"></div>
</div>
</div>
</div>
<div class="time-box row">
<div class="time-now">01:12</div>
<div class="time-total">04:05</div>
</div>
<div class="btn-box row">
<button class="btn-play-type"><span class="fa fa-list"></span></button>
<button class="btn-play-prov"><span class="fa fa-fast-backward fa-2x"></span></button>
<button class="btn-play-pause"><span class="fa fa-play-circle-o fa-4x"></span>