bilibiliHome

05 头部导航区 - 搜索框 ​

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

布局分析 ​

lesson 5

  • 中间搜索区域 .center-search-container，在移动的时候，它会有一个自身的宽度。那么这块儿应该是由两部分组成的。左侧输入框 .nav-search-content>input.nav-search-input + 右侧搜索按钮 .nav-search-button。

  • HTML 表单 form 里面 input 是有输入框跟提交按钮这些结构的。但是在我们现在的网页制作中，很少会使用表单提交方式来提交了。

    • 因为表单提交会导致页面的跳转，用户体验很不好，所以这里采用的方式是用 javascript 来做一个相应的处理。
    • 所以这里的搜索按钮直接通过一个普通的按钮图标来实现，不需要使用 button 标签。当然用 button 实现也是没有问题的（但需要一些特殊处理）。

  • .center-search-container>.nav-search-content>input.nav-search-input^.nav-search-button

    html
    <div class="center-search-container">
  <div class="nav-search-content"><input type="text" class="nav-search-input" /></div>
  <div class="nav-search-button"></div>
</div>

  • button 图标

    xml
    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.3451 15.2003C16.6377 15.4915 16.4752 15.772 16.1934 16.0632C16.15 16.1279 16.0958 16.1818 16.0525 16.2249C15.7707 16.473 15.4456 16.624 15.1854 16.3652L11.6848 12.8815C10.4709 13.8198 8.97529 14.3267 7.44714 14.3267C3.62134 14.3267 0.5 11.2314 0.5 7.41337C0.5 3.60616 3.6105 0.5 7.44714 0.5C11.2729 0.5 14.3943 3.59538 14.3943 7.41337C14.3943 8.98802 13.8524 10.5087 12.8661 11.7383L16.3451 15.2003ZM2.13647 7.4026C2.13647 10.3146 4.52083 12.6766 7.43624 12.6766C10.3517 12.6766 12.736 10.3146 12.736 7.4026C12.736 4.49058 10.3517 2.1286 7.43624 2.1286C4.50999 2.1286 2.13647 4.50136 2.13647 7.4026Z" fill="currentColor"></path></svg>

结构搭建 ​

html
<!-- 中间搜索区域 -->
<div class="center-search">
  <div class="center-search__content">
    <input type="text" class="center-search__input" placeholder="搜索" />
  </div>
  <div class="center-search__button">
    <svg class="iconpark-icon">
      <use href="#sou-suo-an-niu"></use>
    </svg>
  </div>
</div>

input 公共样式 ​

css
/* File: css/base.css */

input {
  /* 去掉边框 */
  border: 0 none;
  /* 去除聚焦时的边框 */
  outline-style: none;
}

输入区域样式处理 ​

css
/**
 * 中间搜索区域
 */
.center-search {
  /* 在主轴方向上的增长比例，值为 1 表示占满整个可用空间，用于实现自适应宽度的布局效果 */
  flex: 1;
  height: 40px;
  padding: 0 48px 0 4px;
  border-radius: 8px;
  border: 1px #e3e5e7 solid;
  background-color: #f1f2f3;

  display: flex;
  align-items: center;
  position: relative;

  &:hover {
    background-color: #fff;
  }
}

.center-search__content {
  display: flex;
  height: 20px;
  width: 100%;
  padding: 0 8px;
}

.center-search__input {
  flex: 1;
  background-color: transparent;

  line-height: 20px;
  overflow: hidden;
  padding-right: 8px;
}

按钮处理 ​

css
.center-search__button {
  position: absolute;
  top: 4px;
  right: 7px;

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

  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 6px;
  cursor: pointer;

  transition: background-color 0.5s ease-in-out;

  &:hover {
    background-color: #e3e4e5;
  }

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