HTML + CSS 连载 | 55 - 网易云音乐 ITEM（下）

一、实现网易云音乐首页 item 左上角的图标

网易云音乐首页有的 item 中可能左上角还是包含一个图标，并且这个图标是在另外一张图片当中的，通过浏览器的检查工具查看具体的背景图和图标位置：

根据上篇文章中的抽取的 CSS 代码的例子，对于这个图标我们可以分成三个 CSS 选择器来共同实现，首先先把背景图以及图标的大小位置信息写出来，具体代码如下所示：

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

.hot {
  width: 40px;
  height: 40px;
  background-position: -135px -220px;
}

接着在封面图元素下面增加一个 i 元素，设置三个 class 值，除了上面两个还有一个 .icon2-hot 就是图标位置的选择器，具体代码如下：

<div class="top">
  <img src="https://p1.music.126.net/sixunTcvD_IXeVqxZnpHkA==/109951163452086313.jpg?param=140y140" alt="">
  <!-- 封面背景 -->
  <a class="cover"></a>
  <!--封面左上角图标-->
  <i class="icon2 hot icon2-hot"></i>
  <div class="info">
    <i class="icon icon-hearset hearset"></i>
    <span class="count">2829万</span>
    <i class="icon icon-play play"></i>       
 </div>
</div>

原样式中图标在左上角的位置，我们可以使用子绝父相，给 div.top 父元素设置相对定位，给图标元素 i.icon2-hot 设置相对定位，并且 left/top 偏移量均为 0，具体代码如下：

.item .top {
  /* background-color: #f00; */
  position: relative;
}

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

刷新浏览器，效果如下：

这样就可以将图标固定在左上角的位置了。

二、实现网易云首页 item 底部的描述

在完成了整个封面以及封面上的图标的设置之后，就剩余底部的描述内容了，我们可以先通过浏览器的检查工具查看描述信息的一些文字样式：

底部描述信息是一个超链接，我们需要将 div 改成 a：

<a class="bottom" href="">这些充满『强烈画面感』的音乐</a>

根据原样式将字体大小设置为 14px：

.item .bottom {
  font-size: 14px;
}

刷新浏览器，效果如下：

a 元素本身自带了一些样式，我们需要对 a 元素进行样式的重置：

a {
  text-decoration: none;
  color: #333;
}

再次刷新页面，效果如下：

原样式中封面与描述信息有一定的外间距，可以在 a.bottom 中通过设置 margin-top 来实现：

.item .bottom {
  display: block;
  font-size: 14px;
  margin-top: 8px;
}

刷新浏览器，效果如下：

当鼠标悬浮在文字上时文字会出现下划线，因此需要设置 hover 状态，具体代码如下：

.item .bottom:hover {
  text-decoration: underline;
}

刷新浏览器，效果如下：

当描述文字比较多的时候，比如 HTML 结构为下面这种情况：

<a class="bottom" href="">这些充满『强烈画面感』的音乐这些充满『强烈画面感』的音乐这些充满『强烈画面感』的音乐这些充满『强烈画面感』的音乐这些充满『强烈画面感』的音乐</a>

刷新浏览器，效果如下：

此时描述信息在多行显示，我们需要将他们控制在两行内显示，并且使用省略号来代替，具体 HTML 代码如下：

.item .bottom {
  display: block;
  font-size: 14px;
  margin-top: 8px;
  /*设置超出内容使用省略号代替*/
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  /*设置在两行中显示内容*/
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

刷新浏览器，效果如下：

具体的设置也可以参考 HTML + CSS 连载 | 23 - 盒子模型 B 站（下）中设置一行和多行省略的情况。