使用css、jquery实现一个云音乐播放器

最新推荐文章于 2024-04-02 06:31:30 发布

Mr_LuoL

最新推荐文章于 2024-04-02 06:31:30 发布

阅读量236

点赞数

分类专栏： html css jQuery

本文链接：https://blog.csdn.net/weixin_52132674/article/details/112139205

版权

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>
		<!-- 引入font-awesome字体图标库 -->
		<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">
		<!-- 引入jQuery脚本文件 -->
		<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>

最低0.47元/天解锁文章

Mr_LuoL

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用css、jquery实现一个云音乐播放器

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" /> <t
复制链接

扫一扫