bilibiliHome

11 主体区 - 轮播图区域 ​

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

布局分析 ​

lesson10

  • 推荐列表是由左右两部分组成：轮播图 .carousel + 推荐卡片列表。
  • 轮播图 .carousel 从上到下分别为轮播图图片 img、轮播图遮罩层 .carousel__mask 和轮播图工具栏 .carousel__tools。
  • 轮播图工具栏 .carousel__tools 分为轮播图标题 a、指示器列表 ul.carousel__indicators 和按钮区域 .carousel__buttons。
bash
.carousel  # 轮播图容器
 ├─ img  # 轮播图图片
 ├─ .carousel__mask  # 轮播图遮罩层
 └─ .carousel__tools  # 轮播图工具栏
     ├─ a  # 轮播图标题
     ├─ ul.carousel__indicators  # 轮播图指示器列表
     │   ├─ li.carousel__indicator  # 指示器项
     │   ├─ li.carousel__indicator .carousel__indicator--active  # 指示器项（激活状态）
     │   └─ li.carousel__indicator  # 轮播图指示器项
     └─ .carousel__buttons  # 轮播图按钮区域
         ├─ button.carousel__button .carousel__button--prev  # 向前按钮
         └─ button.carousel__button .carousel__button--next  # 向后按钮

结构搭建 ​

html
<!-- 轮播图 -->
<div class="carousel">
  <img src="./img/carousel1.webp" alt="" />
  <div class="carousel__mask"></div>
  <div class="carousel__tools">
    <a href="#">勇度感动回归！星爵兄妹重逢</a>
    <ul class="carousel__indicators">
      <li class="carousel__indicator"></li>
      <li class="carousel__indicator"></li>
      <li class="carousel__indicator"></li>
      <li class="carousel__indicator"></li>
      <li class="carousel__indicator"></li>
      <li class="carousel__indicator carousel__indicator--active"></li>
      <li class="carousel__indicator"></li>
      <li class="carousel__indicator"></li>
      <li class="carousel__indicator"></li>
    </ul>
    <div class="carousel__buttons">
      <button class="carousel__button carousel__button--prev">
        <svg class="iconpark-icon">
          <use href="#zuo-jian-tou"></use>
        </svg>
      </button>
      <button class="carousel__button carousel__button--next">
        <svg class="iconpark-icon">
          <use href="#you-jian-tou"></use>
        </svg>
      </button>
    </div>
  </div>
</div>

样式处理 ​

默认样式 ​

css
button {
  /* 去除按钮的边框 */
  border: none;
  /* 去除聚焦时的轮廓 */
  outline: none;
}

基础样式 ​

css
/**
 * 轮播图
 */
.carousel {
  position: relative;

  grid-row: 1/3;
  grid-column: 1/3;
  border-radius: 6px;
  overflow: hidden;
}

.carousel img {
  width: 100%;
}

轮播图遮罩层 ​

css
/* 轮播图遮罩层 */
.carousel__mask {
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 392px;
  border-radius: 6px;
  background: linear-gradient(0, #524c46 23%, transparent 35%);
}

轮播图工具栏 ​

css
/* 轮播图工具栏 */
.carousel__tools {
  position: absolute;
  left: 0;
  bottom: 94px;

  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.carousel__tools a {
  display: flex;
  margin-bottom: 10px;
  font-size: 18px;
  color: #fff;
}

轮播图指示器列表 ​

css
/* 轮播图指示器列表 */
.carousel__indicators {
  display: flex;
}

.carousel__indicator {
  width: 8px;
  height: 8px;
  margin: 4px;
  border-radius: 50%;
  background-color: #fff6;
  cursor: pointer;
}

.carousel__indicator--active {
  width: 14px;
  height: 14px;
  margin: 1px;
  background-color: #fff;
}

轮播图按钮区域 ​

css
/* 轮播图按钮区域 */
.carousel__buttons {
  position: absolute;
  right: 15px;
  bottom: 23px;
}

.carousel__button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  margin-right: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: #ffffff1a;
  border: none;
  cursor: pointer;
}

.carousel__button--next {
  margin-right: 0;
}

.carousel__button svg {
  width: 12px;
  height: 12px;
  color: #fff;
}