bilibiliHome

12 主体区 - 侧边栏 ​

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

布局分析 ​

lesson12

  • 侧边栏 .sidebar 分为五个按钮。

    • 分区按钮 .sidebar-btn.sidebar-btn--area: svg + span.sidebar-btn__text
    • 回到旧版按钮 .sidebar-btn.sidebar-btn--old
    • 客服按钮 .sidebar-btn.sidebar-btn--service: svg + span.sidebar-btn__text
    • 前往内测按钮 .sidebar-btn.sidebar-btn--beta
    • 返回顶部按钮 .sidebar-btn.sidebar-btn--top: svg + span.sidebar-btn__text
bash
.sidebar  # 侧边栏
 ├─ .sidebar-btn .sidebar-btn--area  # 分区
 │   ├─ svg  # 分区 svg
 │   └─ span.sidebar-btn__text
 ├─ .sidebar-btn .sidebar-btn--old  # 回到旧版
 ├─ .sidebar-btn .sidebar-btn--service  # 客服
 │   ├─ svg  # 客服 svg
 │   └─ span.sidebar-btn__text
 ├─ .sidebar-btn .sidebar-btn--beta  # 前往内测
 └─ .sidebar-btn .sidebar-btn--top  # 顶部
     ├─ svg  # 返回顶部 svg
     └─ span.sidebar-btn__text

结构搭建 ​

html
<!-- 侧边栏滚动按钮 -->
<div class="sidebar">
  <div class="sidebar-btn sidebar-btn--area">
    <svg class="iconpark-icon">
      <use href="#fen-qu"></use>
    </svg>
    <span class="sidebar-btn__text">分区</span>
  </div>
  <div class="sidebar-btn sidebar-btn--old">回到旧版</div>
  <div class="sidebar-btn sidebar-btn--service">
    <svg class="iconpark-icon">
      <use href="#ke-fu"></use>
    </svg>
    <span class="sidebar-btn__text">客服</span>
  </div>
  <div class="sidebar-btn sidebar-btn--beta">前往内测</div>
  <div class="sidebar-btn sidebar-btn--top">
    <svg class="iconpark-icon">
      <use href="#ding-bu"></use>
    </svg>
    <span class="sidebar-btn__text">顶部</span>
  </div>
</div>

样式处理 ​

基础样式 ​

css
/**
 * 侧边栏滚动按钮
 */
.sidebar {
  position: fixed;
  right: 12px;
  bottom: 40px;
}

按钮样式 ​

css
.sidebar-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  width: 40px;
  margin-top: 6px;
  padding: 8px 0 6px;
  box-sizing: border-box;

  border: 1px solid #e3e5e7;
  border-radius: 8px;
  background-color: #fff;
  font-size: 12px;
  text-align: center;
  cursor: pointer;

  svg {
    width: 24px;
    height: 24px;
  }
}

.sidebar-btn--old,
.sidebar-btn--beta {
  padding: 4px;
}

.sidebar-btn--top {
  margin-top: 12px;

  svg {
    width: 15px;
    height: 8px;
  }
}

.sidebar-btn__text {
  margin-top: 2px;
}