HTML + CSS 连载 | 53 - 网易云音乐 ITEM（上）

最新推荐文章于 2024-08-13 21:02:23 发布

Riemann Hypothesis

最新推荐文章于 2024-08-13 21:02:23 发布

阅读量1.6k

点赞数 37

分类专栏： HTML2CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/JingnanJia/article/details/136438267

版权

HTML2CSS 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

html+css.jpeg

一、实现网易云音乐首页的 item 封面

接下来我们通过相对定位和绝对定位来实现网易云音乐首页的 item，如下图所示：

该例中耳机图标、播放量以及播放图标都是盖在图片上的，这里需要通过相对定位和绝对定位来处理；相对定位是相对于自身位置进行偏移，适合元素位置微调，并且不会脱离标准流；绝对定位是相对于父级定位元素进行偏移，是脱离标准流的。

下面我们就来实现这个 item。

第 1 步：搭建 HTML 结构

网易云音乐首页的 item 基本结构是由上下两部分组成的，上半部分为封面、背景以及播放量等信息，下半部分为描述信息，可以通过一个 div 嵌套两个 div 来实现上下结构，具体 HTML 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="item">
    <!--上半部分：图片-->
    <div class="top">
      <img src="https://p1.music.126.net/uXbDB1aWsp36_I_lQs-DeA==/1411772930113118.jpg?param=140y140" alt="">
    </div>
    <!--下半部分：描述-->
    <div class="bottom">这些充满『强烈画面感』的音乐</div>
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，具体效果如下：

接着通过浏览器的检查工具来查看 item 的宽高信息，具体如下：

.item {
  /*设置宽度，高度为 auto*/
  width: 140px;
  /*让块级元素居中显示*/
  margin: 0 auto;
}

刷新 HTML 页面，添加宽度和居中的基本样式后效果如下：

宽度和居中设置均已生效。

第 2 步：给封面图片设置背景

官网上每个 item 上其实都有一个背景，如下图所示：

我们也可以通过浏览器的检查工具看到，如下图所示：

原样式中的背景是通过给一个超链接设置背景来实现的。

dic.top 盒子没有设置高度，宽度会自动占满父元素的整行，高度是由里面的 img 元素给撑起来的，我们可以宪哥 div.top 设置一个背景颜色，具体代码如下：

.item .top {
  background-color: #f00;
}

可以看到 div.top 的高度虽然是由 img 撑起来的，但是 img 的高度并不等于 div.top 的高度，底部还有一点点大约 5px 的高度。

这种现象是由于 vertical-align 产生的，该属性的默认值是 baseline，可以设置为 top 来将图片下面多处的区域去除，具体 CSS 代码如下：

.item .top img {
  vertical-align: top;
}

刷新浏览器，效果如下：

底部多出的区域消失了，设置之后 img 和 div.top 的高度都变成了 140px，图片就占据了整个盒子的高度。

也可以通过将 img 元素设置为 display: block; 来去除底部多余的高度：

.item .top img {
  /* vertical-align: top; */
  display: block;
}

刷新浏览器，效果如下：

原样式中是通过给一个 a 元素设置 background 来实现给图片上再盖上一层背景图片的：

我们可以现在 img 元素的后面增加一个 div.cover，并给它设置宽高和背景颜色，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      width: 140px;
      margin: 0 auto;
    }

    .item .top {
      background-color: #f00;
    }

    .item .top img {
      vertical-align: top;
    }

    /* 封面背景样式 */
    .item .top .cover {
      width: 140px;
      height: 140px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="top">
      <img src="https://p1.music.126.net/uXbDB1aWsp36_I_lQs-DeA==/1411772930113118.jpg?param=140y140" alt="">
      <!-- 封面背景 -->
      <div class="cover"></div>
    </div>
    <div class="bottom">这些充满『强烈画面感』的音乐</div>
  </div>
</body>
</html>

我们可以通过定位将 div.cover 盖在 img 上面，先给 div.cover 设置绝对定位，具体代码如下：

/* 封面背景样式 */
.item .top .cover {
  width: 140px;
  height: 140px;
  background-color: rgba(0, 0, 0, .5);

  position: absolute;
}

刷新浏览器，效果如下：

再给 div.top 设置相对定位，形成子绝父相，具体 CSS 代码如下：

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

上一节内容中提到如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置如下属性：

left: 0; right: 0; top: 0; bottom: 0; margin: 0;

如果我们想要 div.cover 能完全盖在 img 上，此时就要设置定位元素 div.cover 的宽高与定位参照对象 div.top 一样；增加如下设置：

/* 封面背景样式 */
.item .top .cover {
  width: 140px;
  height: 140px;
  background-color: rgba(0, 0, 0, .5);

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

刷新浏览器，效果如下：

可以看到 div.cover 已经完全盖在 img 上了，原样式中这个 cover 是一个超链接，因此
就可以将 div.cover 改为 a.cover，在给 a.cover 设置了绝对定位也就拥有了 inline-block 元素的特性了，将封面背景的 HTML 代码修为如下形式：

<!-- 封面背景 -->
<a class="cover" href=""></a>

并且原样式中使用的是一个精灵图中的背景，如下所示：

保存这个图片并命名为 coverall，将 a.cover 样式中的背景颜色替换为背景，具体代码如下所示：

/* 封面背景样式 */
.item .top .cover {
  width: 140px;
  height: 140px;
  /* background-color: rgba(0, 0, 0, 0.5); */
  background: url(../images/coverall.png) no-repeat;
  background-position: 0, 0;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

刷新浏览器，效果如下：