bilibiliHome

08 头部频道区 - 左侧频道列表图标 ​

  • 头部区域 .large-header 分为导航区 .bili-nav，banner 区 .bili-banner，频道区 .bili-channel。
  • 频道区 .bili-channel 可以分为两部分（中间跟右侧明显都是两排多列小方块结构，可以划分在一起），左边是频道列表图标区域 .left-channel-icon，右边是频道内容区 .right-channel-container。
  • 前面课程完成了导航区 .bili-nav 和 banner 区 .bili-banner，这节课完成频道区 .bili-channel 中的左边频道列表图标区域 .left-channel-icon。

布局分析 ​

lesson8

  • 频道区 .bili-channel 可以分为两部分，左边是频道列表图标区域 .left-channel-icons，右边是频道内容区 .right-channel-container。
  • 左侧是三块（动态，热门，频道），每一块里面是有一个小的 svg 图标 + span tile。
  • .left-channel-icons>(a[href=#]>div.icon-bg.icon-bg__+span.icon-title)*3

结构搭建 ​

html
<!-- 频道 -->
<div class="left-channel-icons">
  <a href="#">
    <div class="left-channel-icons__icon-bg left-channel-icons__icon-bg--dynamic">
      <svg class="iconpark-icon">
        <use href="#dong-tai"></use>
      </svg>
    </div>
    <span class="left-channel-icons__icon-title">动态</span>
  </a>
  <a href="#">
    <div class="left-channel-icons__icon-bg left-channel-icons__icon-bg--popular">
      <svg class="iconpark-icon">
        <use href="#re-men"></use>
      </svg>
    </div>
    <span class="left-channel-icons__icon-title">热门</span>
  </a>
  <a href="#">
    <div class="left-channel-icons__icon-bg left-channel-icons__icon-bg--channel">
      <svg class="iconpark-icon">
        <use href="#pin-dao"></use>
      </svg>
    </div>
    <span class="left-channel-icons__icon-title">频道</span>
  </a>
</div>

样式处理 ​

css
/**
 * 频道区域
 */
.bili-channel {
  display: flex;
  align-items: center;

  height: 110px;
  padding: 0 60px;
}

/**
 * 左侧频道列表图标
 */
.left-channel-icons {
  display: flex;

  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-right: 24px;
  }
}

.left-channel-icons__icon-bg {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-bottom: 6px;

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

.left-channel-icons__icon-bg--dynamic {
  background-color: #ff9212;
}

.left-channel-icons__icon-bg--popular {
  background-color: #f07775;
}

.left-channel-icons__icon-bg--channel {
  background-color: #59ca73;
}