admin管理员组文章数量:1130349
目标：
使用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);
目标：
使用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实现简易音乐播放器 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1754992699a2751376.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论