admin 管理员组

文章数量: 1184232

目标：

使用vue.js导包的形式做一个简单的音乐播放器，新手也很容易看懂。

内容：

1、 使用了flex实现响应式布局；
2、 使用min-width防止字体被压缩；
3、 使用computed计算属性对歌曲的路径缓存；
4、 掌握基础的vue指令的使用；

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易音乐播放器</title>
		<script src="vue.js"></script><!-- 导包 -->
		<style>
			*{
    
    
				margin: 0;
				padding: 0;
			}
			body{
    
    
				min-width: 800px;
			}
			.box{
    
    
				margin: 0 auto;
				width: 800px;
				border: 1px solid black;	
			}
			.head{
    
    
				height: 150px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid black;
			}
			.a1{
    
    
				height: calc(100vh - 153px);

本文标签： 播放器 简易 音乐 HTML

版权声明：本文标题：html实现简易音乐播放器 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1754992703a3058873.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。