jQuery网页mp3音乐播放器

jQuery网页mp3音乐播放器

新建html文档。

书写hmtl代码。

书写css代码。

.m-content .m-player { width: 1182px; height: 296px; margin-top: 30px; margin-left: 18px; border-bottom: 1px solid #ddd; }

.m-content .m-player .m-player-details { width: 962px; height: 266px; position: relative; float: left; }

.m-content .m-player .m-player-details .m-title { width: 662px; font-size: 40px; color: #333; margin-top: 0px; }

.m-song-details { margin-top: 10px; width: 662px; font-size: 14px; color: #666; line-height: 25px; }

.m-song-details .m-singer span, .m-language span { display: inline-block; text-indent: 3em; }

.m-song-details .m-album span, .m-time span { display: inline-block; text-indent: 1em; }

.download { width: 280px; height: 36px; position: absolute; left: 662px; bottom: 0px; }

.download ul { width: 280px; height: 36px; position: relative; }

.download ul li { width: 106px; height: 36px; float: left; margin-right: 20px; border: 1px solid #188EEE; cursor: pointer; border-radius: 2px; letter-spacing: 2px; text-align: center; line-height: 36px; }

.download .collection { background: #188EEE; color: #fff; }

.download .collection a { color: #fff; font-size: 14px; }

.download .collection:hover { background: #1581d9; }

.download .shared a { color: #188EEE; font-size: 14px; }

.download li.shared:hover { background: #f7f7f7; }

书写并添加js代码。

代码整体结构。

查看效果。