04 头部导航区 - 左侧列表

头部区域 .large-header 分为导航区 .bili-nav，banner 区 .bili-banner，频道区 .bili-channel。
导航区 .bili-nav 分为三部分，左侧是一个列表，中间是我们的搜索区域，然后右侧用户功能列表。
这里先完成导航区 .bili-nav 里的左侧列表。

导航布局分析

lesson 4

导航区 .bili-nav 分为三部分，左侧是一个列表，中间是我们的搜索区域，然后右侧用户功能列表。
左侧是一些登不登录都可以看的一些信息，中间搜索框，右侧就是用户登录以后可以查看那些信息。
将浏览器缩小，我们会发现中间的这个搜索区域，它有自适应宽度。所以左右两边尺寸相对固定，中间自适应。

左侧列表使用 ul.left-entry 无序列表。

每一个链接都是可以点击的，点击后它会跳转到新的界面，所以要 a 标签做包裹。(li>a.entry-title[href=#]>span)*8

首页的前面有一个小图标，下载客户端前面也有个小图标。那么这个小图标可以使用图片来完成，也可以使用 SVG 来进行制作。B 站使用的是 SVG，我们把它拿下来直接放在代码里边即可。

html

<!-- 首页图标 -->
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M3.73252 2.67094C3.33229 2.28484 3.33229 1.64373 3.73252 1.25764C4.11291 0.890684 4.71552 0.890684 5.09591 1.25764L7.21723 3.30403C7.27749 3.36218 7.32869 3.4261 7.37081 3.49407H10.5789C10.6211 3.4261 10.6723 3.36218 10.7325 3.30403L12.8538 1.25764C13.2342 0.890684 13.8368 0.890684 14.2172 1.25764C14.6175 1.64373 14.6175 2.28484 14.2172 2.67094L13.364 3.49407H14C16.2091 3.49407 18 5.28493 18 7.49407V12.9996C18 15.2087 16.2091 16.9996 14 16.9996H4C1.79086 16.9996 0 15.2087 0 12.9996V7.49406C0 5.28492 1.79086 3.49407 4 3.49407H4.58579L3.73252 2.67094ZM4 5.42343C2.89543 5.42343 2 6.31886 2 7.42343V13.0702C2 14.1748 2.89543 15.0702 4 15.0702H14C15.1046 15.0702 16 14.1748 16 13.0702V7.42343C16 6.31886 15.1046 5.42343 14 5.42343H4ZM5 9.31747C5 8.76519 5.44772 8.31747 6 8.31747C6.55228 8.31747 7 8.76519 7 9.31747V10.2115C7 10.7638 6.55228 11.2115 6 11.2115C5.44772 11.2115 5 10.7638 5 10.2115V9.31747ZM12 8.31747C11.4477 8.31747 11 8.76519 11 9.31747V10.2115C11 10.7638 11.4477 11.2115 12 11.2115C12.5523 11.2115 13 10.7638 13 10.2115V9.31747C13 8.76519 12.5523 8.31747 12 8.31747Z"
    fill="currentColor"></path>
</svg>

<!-- 下载客户端图标 -->
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M7.23181 8.65895V1.75796C7.23181 1.33935 7.57582 1 8.00018 1C8.42453 1 8.76854 1.33935 8.76854 1.75796V8.67097L9.98589 7.47009C10.286 7.17409 10.7725 7.17409 11.0725 7.47009C11.3726 7.7661 11.3726 8.24601 11.0725 8.54201L8.54958 11.0308C8.24952 11.3268 7.76302 11.3268 7.46295 11.0308L4.94002 8.54201C4.63995 8.24601 4.63995 7.7661 4.94002 7.47009C5.24008 7.17409 5.72658 7.17409 6.02665 7.47009L7.23181 8.65895Z"
    fill="currentColor"></path>
  <path
    d="M3.48023 4.29936C2.40686 4.29936 1.53672 5.15772 1.53672 6.21656V11.5669C1.53672 12.6257 2.40686 13.4841 3.48023 13.4841H12.5198C13.5931 13.4841 14.4633 12.6257 14.4633 11.5669V6.21656C14.4633 5.15772 13.5931 4.29936 12.5198 4.29936H11.6158C11.1915 4.29936 10.8475 3.96001 10.8475 3.5414C10.8475 3.12279 11.1915 2.78344 11.6158 2.78344H12.5198C14.4418 2.78344 16 4.3205 16 6.21656V11.5669C16 13.4629 14.4418 15 12.5198 15H3.48023C1.55815 15 0 13.4629 0 11.5669V6.21656C0 4.3205 1.55815 2.78344 3.48023 2.78344H4.38418C4.80853 2.78344 5.15254 3.12279 5.15254 3.5414C5.15254 3.96001 4.80853 4.29936 4.38418 4.29936H3.48023Z"
    fill="currentColor"></path>
</svg>

鼠标移入到 a 标签上光标变成了一个小手，使用 cursor: pointer 来设置。

结构搭建

html

<!-- File: index.html -->

<!-- 导航 -->
<div class="bili-nav">
  <!-- 左侧入口 -->
  <ul class="left-entry">
    <li>
      <a href="#" class="left-entry__link">
        <svg class="iconpark-icon">
          <use href="#shou-ye"></use>
        </svg>
        <span class="left-entry__text">首页</span>
      </a>
    </li>
    <li>
      <a href="#" class="left-entry__link"><span class="left-entry__text">番剧</span></a>
    </li>
    <li>
      <a href="#" class="left-entry__link"><span class="left-entry__text">直播</span></a>
    </li>
    <li>
      <a href="#" class="left-entry__link"><span class="left-entry__text">游戏中心</span></a>
    </li>
    <li>
      <a href="#" class="left-entry__link"><span class="left-entry__text">会员购</span></a>
    </li>
    <li>
      <a href="#" class="left-entry__link"><span class="left-entry__text">漫画</span></a>
    </li>
    <li>
      <a href="#" class="left-entry__link"><span class="left-entry__text">赛事</span></a>
    </li>
    <li>
      <a href="#" class="left-entry__link">
        <svg class="iconpark-icon">
          <use href="#xia-zai-ke-hu-duan"></use>
        </svg>
        <span class="left-entry__text">下载客户端</span></a
      >
    </li>
  </ul>
</div>

添加公共样式

* { margin: 0; padding: 0; }：将所有元素的内边距（padding）和外边距（margin）都设置为 0。这是一种常见的 CSS 重置技术，用于消除浏览器之间的样式差异。
li { list-style: none; }：将所有 <li> 元素（通常在列表中使用）的列表样式设置为 none，这意味着列表项前面不会有标记（如圆点或数字）。
a { text-decoration: none; color: #000; cursor: pointer; }：设置所有 <a> 元素（链接）的样式。
- text-decoration: none; 去除链接的下划线
- color: #000; 将链接的颜色设置为黑色
- cursor: pointer; 使得鼠标悬停在链接上时变为手形图标，表示可以点击。
body { background-color: skyblue; font-size: 14px; }：设置 <body> 元素（通常是页面的主体部分）的样式。
- background-color: skyblue; 将背景颜色设置为天蓝色
- font-size: 14px; 将字体大小设置为 14 像素。

css

/* File: css/base.css */

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000;
  cursor: pointer;
}

body {
  background-color: skyblue;
  font-size: 14px;
}

导航左侧样式设计

html

<link rel="stylesheet" href="./css/index.css" />

css

/* File: css/index.css */

.bili-nav {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 24px;
}

/**
 * 左侧入口
 */
.left-entry {
  display: flex;
}

.left-entry__link {
  display: flex;
  align-items: center;
  height: 64px;
  color: #fff;
  margin-right: 15px;

  svg {
    margin-right: 6px;
    width: 18px;
    height: 18px;
    fill: none;
    overflow: hidden;
  }
}

04 头部导航区 - 左侧列表 ​

导航布局分析 ​

结构搭建 ​

添加公共样式 ​

导航左侧样式设计 ​

04 头部导航区 - 左侧列表

导航布局分析

结构搭建

添加公共样式

导航左侧样式设计