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

第二步，将图标的类名按规范写在想要的位置

类名要写成：class=“iconfont icon-xxx”

教程示范：

我们写的是这样：

效果：

这样就引入了iconfont图标了，样式等会再调整

4.3把面板的背景设置一下

.tool {

width: 80%;

height: 60px;

background: rgba(0, 0, 0, 0.5);

border-radius: 10px;

margin: 40px auto auto;

}

效果：

4.4设置左中右三块

4.4.1设置左边

可以看到，这个iconfont图标其实是文字，添加在图标类的before上，所以我们可以像使用文字一样地对它设置颜色，字号大小

给btn（里面包裹着播放图标）的父级tool设置相对定位，给btn设置绝对定位让btn相对tool往左30px，

.btn {

position: absolute;

width: 30px;

height: 30px;

left: 30px;

}

.btn span {

color: #fff;

font-size: 30px;

}

.tool > div {

top: 50%;

margin-top: -15px;

}

设置播放图标垂直居中：top: 50%; margin-top: -15px;(