07 头部 banner 区

• 头部区域 .large-header 分为导航区 .bili-nav，banner 区 .bili-banner，频道区 .bili-channel。
• 前面课程完成了导航区 .bili-nav，这节课完成 banner 区 .bili-banner。

布局分析

• banner 区 .bili-banner 是两个图片（一个背景图，一个 logo 图）加一个遮罩层组成。img+.logo>a[href=#]>img^^.mask

• 我们之前做的导航区 .bili-nav 是压在了 .bili-banner 的上面，所以需要用到定位。

  • .bili-banner{position:relative} 设置相对定位
  • .bili-nav{position:absolute;top:0;z-index:1000} 设置绝对定位，将导航区放置在 banner 区的顶部。

结构搭建

<!-- banner -->
<div class="bili-banner">
  <img class="bili-banner__image" src="./img/header-banner.webp" alt="" />
  <div class="bili-banner__logo">
    <a href="#"><img src="./img/logo.png" alt="" /></a>
  </div>
  <div class="bili-banner__mask"></div>
</div>

banner 自适应样式

/**
 * banner 区域
 */
.bili-nav {
  /* 元素被放置在其包含块的顶部 */
  position: absolute;
  top: 0;
  /* 元素将在页面上的大多数其他元素之上 */
  z-index: 1000;
}

.bili-banner {
  /* 设置元素的定位方式为相对定位。相对定位元素的定位是相对于其在正常流中的初始位置 */
  position: relative;
  width: 100%;
  height: 155px;
  overflow: hidden;
}

.bili-banner__image {
  /* 设置为绝对定位，覆盖整个.bili-banner 元素，并使用 object-fit 属性来等比例缩放图片 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 图片等比例缩放：替换内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比不匹配内容框的宽高比，那么该对象将被剪裁以填充内容框 */
  object-fit: cover;
}

logo 样式

.bili-banner__logo {
  /* 使用 flexbox 布局将元素放置在元素底部，并设置宽度和高度以及内边距 */
  display: flex;
  align-items: flex-end;

  width: 100%;
  height: 100%;
  padding: 0 64px;

  a {
    /* 设置为相对定位，并设置宽度和高度以及下边距 */
    position: relative;
    width: 162px;
    height: 78px;
    margin-bottom: 18px;
  }
}

遮罩层样式

.bili-banner__mask {
  /* 设置为绝对定位，并覆盖整个.bili-banner 元素，并使用线性渐变设置背景 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.4), transparent);
}