前端提高篇(六十四)：HTML5练习1：个性音乐播放器

最重要的是background-size和background-position的设置，由于我选取的背景图片最好看的部分在左上角，所以我的background-position写的是left top，如果重要的部分在中间下方，就写 center bottom

我的背景图片：

2.写出大概html结构，用div包裹整个内容，播放器上方的图片是一块，下方的控制面板是一块

3.让img在main里居中，由于img是行级块元素，所以可以在其父元素——main中设置text-align: center;，img就能居中了；再给图片设置border和border-radius，就有那个黑圆框的效果：

.wrapper {

width: 600px;

/* background: #ccc; */

margin: 200px 200px auto auto;

}

.main {

width: 100%;

/* margin: 0 auto; */

text-align: center;

}

.main img {

width: 200px;

border: 50px solid black;

border-radius: 50%;

}

效果：

4.接下来就是工具面板了

4.1先写一下结构，分为左中右三部分，分别是：播放/暂停，进度条，音量