jQuery网页mp3音乐播放器

新建html文档。

书写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代码。  

代码整体结构。

查看效果。