自学前端有一阵子了,之前一直都是跟着教学视频来写一些小例子,实现页面效果和功能,这次下定决心开始自己设计并实现一个网页版的音乐播放器,来巩固之前所学的html,css ,js,JQuery等知识。
在网上参考了QQ音乐,网易云音乐的界面设计和功能实现,决定界面风格以灰色为主,显得逼格高一点点。主要的播放等功能则借鉴了网易云音乐。
主要页面布局
1.导航栏 2.轮播图 3.音乐播放列表 4.音乐播放控制栏
主要实现功能
1.音乐的播放/暂停
2.上一曲/下一曲
3.音乐列表中歌曲切换
4.进度条拖动播放
5.轮播图切换图片
音乐播放器的界面如下图所示:
首先是用html标签写界面了,设置四个div块,每个div块中的子元素基本都是ul无序列表或者是div块,要说的没有什么了。
接下来是写css样式,看着界面好像不复杂,但是写样式的时候中间还是碰到了一些问题,所以平时也不能小看css。
需要注意的是轮播图的div,postion属性需要设置为relative,每个图片放在li标签中,设置为float:left就可以了。而想准确定位两个向左翻页和向右翻页的箭头位置则需要绝对定位 postion:absolute。因为设置top,left属性只有在绝对定位的情况下才有效,所以这一点需要注意一下。同理,下面的控制播放的div块中也是遵从“父相子绝”的规则,通过绝对定位来准确定位。<