likes
comments
collection
share

HTML + CSS 连载 | 23 - 盒子模型 B 站（下）一、实现 B 站首页的视频 item 补充01：当标题内

作者站长头像
站长
· 阅读数 19

HTML + CSS 连载 | 23 - 盒子模型 B 站（下）一、实现 B 站首页的视频 item 补充01：当标题内

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

补充01：当标题内容较多的时候隐藏超出的内容

当描述内容很多时，我们需要设置多余的内容在一行或者两行显示，并且多处的内容使用省略号来代替，我们可以先给视频的描述信息多添加点内容，具体的 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;
    }

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

    .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;
    }

    .card .info .author a .date {
      margin-left: 4px;
    }
  </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·超级苏霍伊  至此，已成艺术「4K修复」苏57·超级苏霍伊  至此，已成艺术「4K修复」苏57·超级苏霍伊  至此，已成艺术「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>

在浏览器中打开 HTML 页面，可以看到视频的描述信息分多行来展示：

HTML + CSS 连载 | 23 - 盒子模型 B 站（下）一、实现 B 站首页的视频 item 补充01：当标题内

在实现小米官网首页商品的时候，我们已经可以设置描述信息在一行显示，并且设置多出的内容使用省略号来代替，我们在这里的选择器中添加上这些样式，具体 CSS 代码如下所示：

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

  /*设置超出内容使用省略号代替*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

HTML + CSS 连载 | 23 - 盒子模型 B 站（下）一、实现 B 站首页的视频 item 补充01：当标题内

可以看到描述信息并没有，解决这个问题有两种方式，第一种是将 a 元素的类型改为 inline-block 类型，第二种方式是修改 HTML 代码结构，将描述信息使用 p 元素包裹起来，我们使用第二种方式，修改 HTML 结构并给这个新增的 p 元素增加样式，具体代码如下：

<!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 p {
      font-size: 15px;
      font-weight: bold;
      color: black;

      /*设置超出内容使用省略号代替*/
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card .info .title:hover {
      color: #00AEEC;
    }

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

    .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;
    }

    .card .info .author a .date {
      margin-left: 4px;
    }
  </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">
          <p>「4K修复」苏57·超级苏霍伊  至此，已成艺术「4K修复」苏57·超级苏霍伊  至此，已成艺术「4K修复」苏57·超级苏霍伊  至此，已成艺术「4K修复」苏57·超级苏霍伊  至此，已成艺术
          </p> 
        </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>

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

HTML + CSS 连载 | 23 - 盒子模型 B 站（下）一、实现 B 站首页的视频 item 补充01：当标题内

可以看到所有的描述信息都集中在第一行显示，并且多处的内容使用省略号代替。

但实际上我们想要设置描述信息在两行的内容中显示，多处两行部分的内容使用省略号代替，设置 CSS 样式如下：

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

  /*设置超出内容使用省略号代替*/
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  /*设置在两行中显示内容*/
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

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

HTML + CSS 连载 | 23 - 盒子模型 B 站（下）一、实现 B 站首页的视频 item 补充01：当标题内

补充02：实现 “3万点赞” 样式

有的视频作者名称左边不是up主的图标而是点赞数，比如下面这个视频的左边就显示了点赞数，接下来我们实现这个点赞数内容。

HTML + CSS 连载 | 23 - 盒子模型 B 站（下）一、实现 B 站首页的视频 item 补充01：当标题内

在作者名字的 a 元素前面增加一个 div 来表示点赞数，具体完整的代码如下所示：

<!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 {
      width: 100%;
    }
    
    /*新增样式*/
    .card .info .title p {
      font-size: 15px;
      font-weight: bold;
      color: black;

      /*设置超出内容使用省略号代替*/
      /* white-space: nowrap; */
      overflow: hidden;
      text-overflow: ellipsis;
      /*设置在两行中显示内容*/
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .card .info .title:hover {
      color: #00AEEC;
    }

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

    .card .info .author a .date {
      margin-left: 4px;
    }
  </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">
          <p>「4K修复」苏57·超级苏霍伊  至此，已成艺术「4K修复」苏57·超级苏霍伊  至此，已成艺术「4K修复」苏57·超级苏霍伊  至此，已成艺术「4K修复」苏57·超级苏霍伊  至此，已成艺术
          </p> 
        </a>
        <div class="author">
          <div class="state">
            3万点赞
          </div>
          <a href="">
            <span class="nickname">送OwO</span>
            <span class="date">· 10-22</span>
          </a>
        </div>
      </div>
    </div>  
  </div>
  </div>
</body>
</html>

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

HTML + CSS 连载 | 23 - 盒子模型 B 站（下）一、实现 B 站首页的视频 item 补充01：当标题内

点赞数是一个块级元素，会独占一行，因此我们需要重置他的属性，并且通过浏览器的检查功能可以查看到具体的样式，如下所示：

HTML + CSS 连载 | 23 - 盒子模型 B 站（下）一、实现 B 站首页的视频 item 补充01：当标题内

新增一个 CSS 选择器，设置点赞数的样式，具体 CSS 代码如下：

.card .info .author .state {
  display: inline-block;
  color: #ff7f24;
  background-color: #FFF0E3;
  border-radius: 4px;
  margin-right: 4px;
  padding: 0 4px;
}

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

HTML + CSS 连载 | 23 - 盒子模型 B 站（下）一、实现 B 站首页的视频 item 补充01：当标题内

转载自:https://juejin.cn/post/7295058681124667407
评论
请登录