【案例简介】

基于js实现的键盘导航搜索功能demo本文主要介绍：

1. 项目介绍（简介，功能，使用到的技术栈）
2. 项目效果展示
3. 一步步实现项目效果
4. 踩坑

## 一、项目介绍
 
 

**功能描述：**

- 一个优美快捷的个人导航页，附加主流搜索引擎**搜索**功能
- 为键盘上的 26 个字母绑定了导航网址，敲击键盘上的字母可跳转相应网页
- 自定义与字母关联的导航地址，数据存在本地 LocalStorage 中
- 基于原生 JS，键盘按键动态生成，按键样式完全使用 CSS3 完成

## 二、项目效果展示

【案例截图】

【核心代码】

   <form action="" id="searchBar" class="searchBar">
        <ul id="searchEnginLogo" class="searchEnginLogo">
          <li class="active">
            <img src="./image/google.svg" alt="google" />
          </li>
          <li>
            <img src="./image/baidu.svg" alt="baidu" />
          </li>
        </ul>
        <input type="text" id="inputBar" />
        <button id="searchBtn" class="searchBtn"></button>
      </form>
    </header>
    <main>
      <div id="main" class="wrapper"></div>
    </main>
    <footer class="description">
      <h3>小Tips</h3>
      <ul class="tips-content">
        <li>1. 按键盘上相应字母进入你想要到的网站</li>
        <li>2. 字母相关的导航地址可将鼠标悬浮其上查看</li>
        <li>3. 鼠标移动到键盘的按键时，可自行编辑导航网址</li>
        <li>4. 编辑后，网址会保留下来，不用担心刷新之后不见了</li>
        <li>5. '.'代表未设置网站或无favicon</li>
      </ul>