bilibiliHome

10 主体区 - 推荐列表区 ​

  • 头部区域 .large-header 分为导航区 .bili-nav，banner 区 .bili-banner，频道区 .bili-channel。
  • 主体 main：推荐列表 .recommended-container 和侧边栏 .sidebar。
  • 前面课程完成了头部区域 .large-header，这节课完成主体推荐列表区 .recommended-container 里的推荐卡片列表。

布局分析 ​

lesson10

  • 推荐列表是由左右两部分组成：轮播图 .carousel + 推荐卡片列表。我们先做列表项推荐卡片 .recommended-card，做完一个以后复制为多份铺满即可。

  • 推荐卡片 .recommended-card 是有上下两部分组成：上面视频封面图片区 .recommended-card__image，下面视频信息区 .recommended-card__info。

    • 视频封面图片区 .recommended-card__image 分为 视频封面图片 img 和遮罩层区 .recommended-card__mask

      • 遮罩层区 .recommended-card__mask 分为：统计数据区 .recommended-card__stats 、视频时长 .recommended-card__duration
        • 统计数据项 .recommended-card__stat 分为播放量/弹幕数图标 svg 和 统计计数 .recommended-card__count

    • 视频信息区 .recommended-card__info 分为：视频标题 .recommended-card__title 和元信息区 .recommended-card__meta

      • 元信息区 .recommended-card__meta 分为 up svg 图标，up 主 .recommended-card__author 和视频发布时间 .recommended-card__date
bash
.recommended-container  # 推荐容器
 ├─ .recommended-card  # 推荐卡片
 │   ├─ .recommended-card__image  # 视频封面图片区
 │   │   ├─ img  # 视频封面图片
 │   │   └─ .recommended-card__mask  # 遮罩层区
 │   │       ├─ .recommended-card__stats  # 统计数据区
 │   │       │   ├─ .recommended-card__stat  # 统计数据项
 │   │       │   │   ├─ svg  # 播放量/弹幕数 图标
 │   │       │   │   └─ .recommended-card__count  # 统计计数
 │   │       │   └─ .recommended-card__stat
 │   │       └─ .recommended-card__duration  # 视频时长
 │   └─ .recommended-card__info  # 视频信息区
 │       ├─ .recommended-card__title  # 视频标题
 │       └─ .recommended-card__meta  # 元信息区
 │           ├─ svg # up 主图标
 │           ├─ .recommended-card__author  # up 主
 │           └─ .recommended-card__date  # 视频发布时间
 ├─ .recommended-item
 └─ .recommended-item

结构搭建 ​

html
<!-- 主体 -->
<div class="main">
  <!-- 推荐列表 -->
  <div class="recommended-container">
    <div class="recommended-card">
      <!-- 视频封面 -->
      <a href="#">
        <div class="recommended-card__image">
          <img src="./img/rcmd-1.png@672w_378h_1c_!web-home-common-cover" alt="" />
          <div class="recommended-card__mask">
            <div class="recommended-card__stats">
              <div class="recommended-card__stat">
                <svg class="iconpark-icon">
                  <use href="#bo-fang-liang"></use>
                </svg>
                <span class="recommended-card__count">10.5 万</span>
              </div>
              <div class="recommended-card__stat">
                <svg class="iconpark-icon">
                  <use href="#dan-mu-shu"></use>
                </svg>
                <span class="recommended-card__count">128</span>
              </div>
            </div>
            <div class="recommended-card__duration">03:16</div>
          </div>
        </div>
      </a>
      <!-- 视频信息 -->
      <div class="recommended-card__info">
        <h3 class="recommended-card__title">
          <a href="#">钢铁侠、美队确认回归！托比蜘蛛侠，金刚狼领衔主演《复联 6》</a>
        </h3>
        <div class="recommended-card__meta">
          <a href="#">
            <svg class="iconpark-icon">
              <use href="#up"></use>
            </svg>
            <span class="recommended-card__author">努力的 Lorre</span>
            <span class="recommended-card__date">· 11-07</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

样式处理 ​

基础样式 ​

css
img {
  /* 使图片在垂直方向上与周围的元素居中对齐，从而去除图片的默认上下间距 */
  vertical-align: middle;
}

a:focus,
a:hover,
a:active {
  /* 去除轮廓 */
  outline: none 0;
}

推荐列表 ​

css
/**
 * 主体
 */
.main {
  width: 100%;
  padding: 0 60px;
  box-sizing: border-box;
}

/**
 * 推荐列表
 */
.recommended-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
}

视频封面图片区 ​

css
/* 视频封面图片区 */
.recommended-card a {
  transition: color 0.2s linear;
  cursor: pointer;
}

.recommended-card a:hover {
  color: #00aeec;
}

.recommended-card__image {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.recommended-card__image img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

视频封面遮罩层 ​

css
/* 视频封面遮罩层 */
.recommended-card__mask {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 16px 8px 6px;
  box-sizing: border-box;

  width: 100%;
  height: 38px;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  color: #fff;
  font-size: 13px;

  display: flex;
  align-items: center;
}

.recommended-card__stats {
  flex: 1;
  display: flex;
  align-items: center;
}

.recommended-card__stat {
  display: flex;
  align-items: center;
  margin-right: 12px;
}

.recommended-card__mask svg {
  width: 18px;
  height: 18px;
  color: #fff;
  margin-right: 2px;
}

视频信息区 ​

css
/* 视频信息区 */
.recommended-card__info {
  margin-top: 10px;
}

.recommended-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  line-break: anywhere;

  padding-right: 16px;
  line-height: 22px;
  font-size: 15px;
  overflow: hidden;
  font-weight: 500;
  color: #18191c;
}

.recommended-card__meta {
  margin-top: 4px;
  display: flex;
  font-size: 13px;
}

.recommended-card__meta a {
  color: #9499a0;
  display: flex;
  align-items: center;
}

.recommended-card__meta svg {
  width: 17px;
  height: 17px;
  margin-right: 2px;
}

.recommended-card__date {
  margin-left: 4px;
}