HTML + CSS 连载 | 54 - 网易云音乐 ITEM（中）一、实现网易云首页 item 图片上的图标 上篇文章

一、实现网易云首页 item 图片上的图标

上篇文章中我们已经实现了封面的基本样式：

与官网中的样式相比还缺少播放量和播放按钮等信息：

第 1 步：设置播放量

在 div.top 中添加一个 div.info 来显示播放量信息，具体代码如下所示：

<div class="item">
  <div class="top">
    <img src="https://p1.music.126.net/sixunTcvD_IXeVqxZnpHkA==/109951163452086313.jpg?param=140y140" alt="">
    <!-- 封面背景 -->
    <a class="cover"></a>
    <div class="info">2928万</div>
  </div>
  <div class="bottom">这些充满『强烈画面感』的音乐</div>
</div>

刷新浏览器，效果如下：

播放量信息是覆盖在封面图上的，因为 div.top 已经是相对定位元素了，因此通过添加绝对定位并设置偏移量，将播放信息放在左下角，具体代码如下：

.item .top .info {
  position: absolute;
  bottom: 0;
  left: 0;
}

刷新浏览器，具体效果如下：

原样式中播放量信息还有一个半透明灰色的背景：

添加同样的背景以及背景图片位置，需要注意的是 background-position 一定要放在 background 属性后面，否则设置无效。

.item .top .info {
  position: absolute;
  bottom: 0;
  left: 0;

  /*高度*/
  height: 27px;
  width: 100%;
  background: url(../images/coverall.png) no-repeat;
  background-position: 0 -537px;
  /*字体颜色*/
  color: #ccc;
}

刷新浏览器，效果如下：

可以看到背景没有整行显示，这是因为设置了定位和偏移之后 div.info 的宽度由内容决定，导致没有占据整行，因此图片没有完全显示。

这是可以通过添加一个 right: 0; 来将 div.info 拉长，背景就可以完全显示出来了，具体代码如下：

.item .top .info {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 27px;
  width: 100%;
  background: url(../images/coverall.png) no-repeat;
  background-position: 0 -537px;
  color: #ccc;
}

刷新浏览器，效果如下：

这样背景就整行显示了，接着还需要设置字体大小、居中等样式，具体代码如下：

.item .top .info {
  position: absolute;
  bottom: 0;
  left: 0;

  height: 27px;
  width: 100%;
  background-position: 0 -537px;
  background: url(../images/coverall.png) no-repeat;
  color: #ccc;
  font-size: 12px;
  line-height: 27px;
}

刷新浏览器，效果如下：

第 2 步：设置耳机图标

接着在 div.info 中添加一个 icon 图标来表示播放量左边的耳机图标，具体 HTML 代码如下：

<div class="info">
  <i class="icon"></i>
  <span class="count">2829万</span>
</div>

刷新浏览器，效果如下：

这里没有显示出来耳机图标，因为还没有设置具体的精灵图，查看原样式中精灵图所在的图片即位置：

设置耳机图标的宽高及位置，具体 CSS 代码如下：

.item .top .info .icon {
  display: inline-block;
  width: 14px;
  height: 11px;

  background: url(../images/iconall.png) no-repeat;
  background-position: 0 -24px;
}

刷新浏览器，效果如下：

图标有一点太靠上，设置相对定位以及 top 偏移量来微调图标位置，具体代码如下：

.item .top .info .icon {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 14px;
  height: 11px;

  background: url(../images/iconall.png) no-repeat;
  background-position: 0 -24px;
}

刷新浏览器，效果如下：

原样式中耳机图标距离父元素 div.info 左边界有一定的间距：

可以通过 padding-left 来实现，具体 HTML 代码如下：

.item .top .info {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 27px;
  background: url(../images/coverall.png) no-repeat;
  background-position: 0 -537px;
  color: #ccc;
  font-size: 12px;
  line-height: 27px;

  padding-left: 10px;
}

刷新浏览器，效果如下：

耳机图标和同级的播放量之间也有一定的间距，可以通过给播放量设置左外间距实现：

.item .top .info .count {
  margin-left: 4px;
}

刷新浏览器，效果如下：

位置调整完成，至此已经实现了耳机图标。

第 3 步：实现播放图标

封面底部的右边还有一个播放量的图标，在 div.info 中添加 i 元素实现右边的播放图标：

<div class="info">
  <i class="icon"></i>
  <span class="count">2829万</span>
  <i class="play"></i>
</div>

查看原样式中播放图标的宽高以及位置信息：

设置播放图标的宽高及在图片中的位置，播放图标具体的摆放位置通过绝对定位来实现，位置参照对象是定位父元素 div.info，并设置 bottom 和 right 偏移量，具体 CSS 代码如下：

.item .top .info .play {
  width: 16px;
  height: 17px;
  position: absolute;
  right: 10px;
  bottom: 5px;

  background: url(../images/iconall.png) no-repeat;
  background-position: 0 0;
}

刷新浏览器，效果如下：

至此播放图标已经完全实现了

第 4 步：抽取公共 CSS 代码

在设置耳机图标和播放图时有很多重复的 CSS 代码，这两个图标是来自同一张精灵图，因此我们可以进行抽取代码。

首先重新设置耳机和播放图标的 class 属性值，都给一个 icon 属性，具体代码如下：

<div class="info">
  <i class="icon hearset"></i>
  <span class="count">2829万</span>
  <i class="icon play"></i>
</div>

对选择器名称也进行修改：

 /*修改选择器名*/
.item .top .info .hearset {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 14px;
  height: 11px;

  background: url(../images/iconall.png) no-repeat;
  background-position: 0 -24px;
}

/*修改选择器名*/
.item .top .info .play {
  width: 16px;
  height: 17px;
  position: absolute;
  /* top: 0px; */
  right: 10px;
  bottom: 5px;

  background: url(../images/iconall.png) no-repeat;
  background-position: 0 0;
}

将重复代码抽取到 icon 选择其中：

.icon {
  background: url(../images/iconall.png) no-repeat;
  display: inline-block;
}

再把位置信息抽取出到单独的选择器中：

.hearset {
  width: 14px;
  height: 11px;
  background-position: 0 -24px;
}

.play {
  width: 16px;
  height: 17px;
  background-position: 0 0;
}

添加定位信息：

.item .top .info .icon-play {
  position: absolute;
  /* top: 0px; */
  right: 10px;
  bottom: 5px;
}

.item .top .info .icon2-hot {
  position: absolute;
  top: 0;
  left: 0;
}

给耳机和播放图标添加上面定义的样式：

<div class="info">
 <i class="icon icon-hearset hearset"></i>
 <span class="count">2829万</span>
 <i class="icon icon-play play"></i>
</div>

刷新浏览器，效果如下：

在之后的代码中想要直接使用这两个图标，直接添加相关的 class 就可以了：

<!--在div.top 下面增加图标-->
<i class="icon hearset"></i>
<i class="icon play"></i>

刷新浏览器，效果如下：