www.gusucode.com > 精巧漂亮HTML5音乐播放器支持ogg文件源码程序 > 精巧漂亮HTML5音乐播放器支持ogg文件/html5_music/html5_music/style.css
body { font-size:13px; font-family:微软雅黑; background:#5C83B6; -webkit-user-select: none; } ::-webkit-scrollbar{width: 0; height: 0;} /* clearfix */ .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block} * html .clearfix{height:1%} .clearfix{display:block} audio { display:none; } button { font-size: 11px; background: #D5DEE8; height: 20px; line-height:16px; border: 1px solid #2A3B4C; border-radius: 3px; color:#43617B; font-weight:600; padding: 1px 3px; cursor:pointer; } button:hover { background: #FEF2C4; } #player { width:280px; height:370px; background:#4F6E8D; margin:20px auto; border-radius:8px; /*box-shadow:1px 1px 7px rgba(0, 0, 0, 0.4);*/ } #controls { height:70px; } .controls div { float:left; width:49px; height:57px; margin: 7px 0 6px 0; } #play { background: url("images/ctrl.png"); margin-left:10px; cursor:pointer; } #play:hover { background: url("images/ctrl.png") no-repeat 0 -57px; } #play.playing { background: url("images/ctrl.png") no-repeat -49px 0; } #play.playing:hover { background: url("images/ctrl.png") no-repeat -49px -57px; } #next { background: url("images/ctrl.png") no-repeat -98px 0; cursor:pointer; } #next:hover { background: url("images/ctrl.png") no-repeat -98px -57px; } #progress { width:100px; height:20px; margin:25px 0; border-radius:3px; background:#1B2631; overflow:hidden; position:relative; cursor:pointer; } #progress div{ width:0; height:20px; background:#374D62; margin:0; border-radius:3px 0 0 3px; } #progress p{ width:100px; height:20px; line-height:20px; margin:0; position: absolute; left: 0; top: 0; font-size:10px; text-align:center; color:#FFF; font-weight:600; } #volume { width:50px; height:16px; margin:27px 10px; position:relative; background: url("images/vol.png") repeat-x; cursor:pointer; } #volume div{ width:14px; height:14px; border: 1px solid #2A3B4C; border-radius: 3px; margin:0; background: #D5DEE8 url("images/vol2.png") no-repeat; position: absolute; left: 34px; top: 0; cursor:pointer; } #volume div:hover { background-color: #FEF2C4; } .bar { height:30px; line-height:30px; background:#47637E; padding:0 10px; } .bar button { margin:5px 4px; } .bottom { border-radius:0 0 8px 8px; color:#D5DEE8; font-size:12px; font-weight:700; } #mode { color:#FFF; cursor:pointer; } #musiclist { height:240px; background:#FFF; margin:0; list-style:square; padding-left:0; overflow:scroll; } #musiclist li{ height:24px; line-height:24px; font-size:12px; color:#121834; padding-left:10px; list-style-position:inside; cursor:default; } #musiclist li.isplay { background:#FFD133; } #musiclist li:hover { background:#FEDB65; } #musiclist li.disable { color:#CCD0DB; } #musiclist li.disable:hover { background:#FFF; } footer { text-align:center; color:#555; } footer a { color:#555; }