html音乐框架完整代码,音乐播放器（完整体验）.html

悦听播放器

body,

ul,

dl,

dd {

margin: 0px;

padding: 0px;

}

.wrap {

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: url('images/bg.jpg') no-repeat;

background-size: 100% 100%;

}

.play_wrap {

width: 800px;

height: 544px;

position: fixed;

left: 50%;

top: 50%;

margin-left: -400px;

margin-top: -272px;

/* background-color: #f9f9f9; */

}

.search_bar {

height: 60px;

background-color: #1eacda;

overflow: hidden;

border-top-left-radius: 4px;

border-top-right-radius: 4px;

display: flex;

align-items: center;

justify-content: space-between;

position: relative;

z-index: 11;

}

.search_bar img {

margin-left: 23px;

}

.search_bar input {

margin-right: 23px;

width: 296px;

height: 34px;

border-radius: 17px;

border: 0px;

background: url('') 265px center no-repeat rgba(255, 255, 255, 0.45);

text-indent: 15px;

outline: none;

}

.search-icon {

position: absolute;

right: 35px;

cursor: pointer;

}

.center_con {

height: 435px;

background-color: rgba(255, 255, 255, 0.5);

display: flex;

}

.song_wrapper {

width: 200px;

height: 435px;

box-sizing: border-box;

padding: