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

最新推荐文章于 2024-03-03 21:09:21 发布

原创

最新推荐文章于 2024-03-03 21:09:21 发布 · 1.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

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 页面，具体效果如下：