HTML + CSS 连载 | 22 - 盒子模型 B 站（上）

一、实现 B 站首页的视频 item

除了电商网站商品列表中的一个商品可以看做一个盒子外，许多视频网站首页上的一个个视频也可以看做是一个盒子，比如 B 站首页上的一个视频：

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

第一步：搭建整体 HTML 结构重置 CSS 样式

在上一节中实现小米官网上的商品时是一个一个的添加元素并且设置样式的，这一次我们换一种方式，先把所有的 HTML 元素写上，先把框架搭起来，然后在一个个的设置每个元素的样式。

首先查看原页面中视频的 HTML 结构，具体结构如下：

我们可以写出自己的 HTML 结构，具体代码如下：

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="card">
      <a class="album" href="">
        <img src="https://i0.hdslb.com/bfs/archive/82872f9a62795222214729e9a37a8c4e387013ed.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="">
      </a>
      <div class="info">
        <h3 class="title">「4K修复」苏57·超级苏霍伊  至此，已成艺术</h3>
        <div class="author">
          <a href="">
            <span class="nickname">送OwO</span>
            <span class="date">· 10-22</span>
          </a>
        </div>
      </div>
    </div>  
  </div>
  </div>
</body>
</html>

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

然后与上一节内容一致，我们需要对一些 HTML 元素比如 a 元素进行样式重置，具体的 reset.css 代码如下：

CSS 复制代码

body, p, h3 {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f5f5f5;
  font: 12px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}

a {
  text-decoration: none;
  color: #333;
  font-size: 12px;
}

h3 {
  font-weight: 400;
}

在 HTML 页面中的 head 元素中使用 link 元素引入该样式：

HTML 复制代码

  <link rel="stylesheet" href="./css/reset.css">

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

可以看到一些 HTML 元素自带的样式已经被重置了，接下来就对这些一个个的设置具体的样式了。

第二步：设置图片的样式

首先我们要设置图片的样式，由于原页面是一个响应式的页面，因此我们就以最小的宽高来进行设置，打开浏览器的检查工具并缩小页面，可以看到页面也随之变小，但是每个视频是有一个最小宽度的，最小的宽度为 240px，高度为 208px；

设置整体的宽度和高度，并设置 margin，使其在浏览器页面居中显示，具体 CSS 代码如下：

CSS 复制代码

.card {
  width: 240px;
  height: 208px;
  /*设置居中*/
  margin: 0 auto;
}

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

可以看到图片的宽高远大于父元素的宽和高，因此可以通过浏览器检查工具查看 img 图片的宽和高；

除了宽和高，图片还带有一定的圆角，具体的 CSS 代码如下：

CSS 复制代码

.card .album img {
  width: 240px;
  height: 135px;
  border-radius: 8px;
}

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

第三步：设置视频标题样式

由于视频标题是可以点击的，我们这里应该把 h 元素改为 a 元素，并且当鼠标悬浮在标题上时，字体的颜色会发生变化；

设置视频标题的字体大小、加粗以及颜色等样式，并通过伪类设置当鼠标悬浮在标题上时的样式，具体 HTML 代码如下：

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>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    .card {
      width: 240px;
      height: 208px;
      /*设置居中*/
      margin: 0 auto;
    }

    .card .album img {
      width: 240px;
      height: 135px;
      border-radius: 8px;
    }

    .card .info .title {
      font-size: 15px;
      font-weight: bold;
      color: black;
    }

    .card .info .title:hover {
      color: #00AEEC;
    }
  </style>
</head>
<body>
  <div class="item">
    <div class="card">
      <a class="album" href="">
        <img src="https://i0.hdslb.com/bfs/archive/82872f9a62795222214729e9a37a8c4e387013ed.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="">
      </a>
      <div class="info">
        <a class="title">「4K修复」苏57·超级苏霍伊  至此，已成艺术</a>
        <div class="author">
          <a href="">
            <span class="nickname">送OwO</span>
            <span class="date">· 10-22</span>
          </a>
        </div>
      </div>
    </div>  
  </div>
  </div>
</body>
</html>

在浏览器中打开页面，并且将鼠标悬浮在标题上时可以看到字体颜色发生变化，与原样式一致。

第四步：设置作者信息的样式

通过浏览器的检查工具我们可以看到作者信息的字体及大小：

增加新的 CSS 选择器，设置作者信息的文字文字大小以及颜色，并通过 display 属性修改 a 元素为 inline-block 类型。

CSS 复制代码

.card .info .author a {
  display: inline-block;
  font-size: 13px;
  color: #9499a0;
}

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

视频发布时间与作者名称是存在一些间距的，如下所示：

增加新的 CSS 选择器，设置发布时间与作者名字的外边距，通过 margin-left 来实现，具体 CSS 代码如下：

CSS 复制代码

.card .info .author .date {
  margin-left: 4px;
}

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

第五步：实现 up 主图标

我们注意到在作者名称左边还有一个 up 主的图标，通过浏览器检查工具可以看到这个图标是一个 svg 图片：

保存 svg 图片，然后我们就可以通过伪元素来实现，具体 CSS 代码如下：

CSS 复制代码

.card .info .author a .nickname::before {
  content: url(../images/widget-up.svg)
}

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

svg 图标也是有一些样式的，都可以通过浏览器的检查工具查看，这里直接来设置 svg 图片的大小以及右外边距，也就是距离作者名称的距离，具体 CSS 代码如下：

CSS 复制代码

.card .info .author a .nickname::before {
  content: url(../images/widget-up.svg);
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 2px;
}

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

图标有一点点偏上，可以通过绝对定位往下微调一下：

CSS 复制代码

.card .info .author a .nickname::before {
  content: url(../images/widget-up.svg);
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 2px;
  position: relative;
  top: 2px;
}

再次打开 HTML 页面，效果如下：