導讀：
原來的自己大多時候是通過視訊和書本資料自學，很少有動手實踐，也就會有眼高手低的毛病，每次做一個小功能來練手的時候都會遇到各式各樣的問題，也正是在想方設法解決這些問題的過程中收穫是最大的，不僅是解決問題的能力，更重要的是學習這些的興趣會更濃，堅持下去的動力更足。
小米網頁的搜尋框是通過input標籤實現，右邊搜尋圖示使用Font Awesome圖示實現，滑鼠懸停背景色變為小米主流顏色黃色這些是通過寫CSS樣式實現。

• 小米官網搜尋框功能如下：
  

1.框架實現

• 搜尋框有文字框和提交框組成，input標籤均可以完成。

• 配合使用CSS定義樣式，為input文字框定義1畫素的灰色邊框，否則空白看不出文字框和提交框效果。

  例1：input和button實現

  <input type="text" class="SearchBox" ><button type="submit" class="SearchBtn"></button>
  

  例2：兩個input實現

  <input type="text" class="SearchBox" ><input type="button" class="SearchBtn">
  

  二者實質是相同的。
  CSS樣式如下：

  .SearchBox{height:50px;
              width:190px;
              border
   
  :1px solid #e0e0e0;
              vertical-align:middle;
              border-right: none;
              }
    .SearchBtn{height:50px;
          width:50px;
          border:1px solid #e0e0e0;
          background:transparent;
          color:#b0b0b0;
          vertical-align:middle;
          position:relative;
          line-height
   
  :50px;
          padding:3px;
          }
  
  

• border-right: none;：文字框右邊邊框設定成無，或者把提交框左側邊框設定成無，否者兩邊均有邊框，重疊在一起時顏色會加深。

• SearchBtn：SearchBtn中line-height（居中）和padding（微調邊距）都是為了調整搜尋引擎那個圖示的位置。

• 搜尋框框架製作完成。
  效果如下：
  

  • 這裡遇到一個問題，兩個input不寫在同一行時，兩個input框之間有間隙，不能完全貼合？
    形如：
    

  • 解決方法1：將兩個input寫在同一行，如下：

    <input type="text" class="SearchBox" ><input type="button" class="SearchBtn">
    

  • 解決方法2：不寫在一行，為SearchBox屬性新增float：left屬性，根據需要使用margin-top調整搜尋框位置即可。

2.搜尋框關鍵字

• 1.定義一個div，id為hotword。
  html程式碼如下：

	<div class="hotword">
          <a href="">小米8</a>
          <a href="">小米MIX 2s</a>
  	</div>

• 2.CSS調整熱點詞的位置，背景顏色，字型顏色，滑鼠懸浮顏色等。
  css程式碼如下：

.hotword    {position: absolute;
            text-align:right;
            margin-top:-98px;
            margin-left:87px;
            }
.hotword a{
            font-size:12px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            background:#e3e3e3;
            color:rgb(117,117,117);
            display: inline-block;
            line-height: 1.42857143;/*1.42857143why*/
            position:relative;
            }
.hotword a:hover{
            text-decoration:none;
            background: #ff6700;
            color: #fff;
            }

• .hotword ：關鍵詞的位置屬性設定。

• .hotword a：對a標籤中文字的屬性設定。

• .hotword a:hover：滑鼠懸浮設定，text-decoration:none;：滑鼠懸浮時，文字下劃線去除。background: #ff6700;：懸浮時背景色設定為橘黃色。 color: #fff;：懸浮時文字變為白色。

• display: inline-block;：使塊級元素變行內元素，在同一行顯示，行內非替換元素如span、a標籤，是不能設定寬度高度的，加上該屬性之後就可以使這些元素像塊級元素一樣設定寬度高度。

• line-height: 1.42857143;：行高大約是20px，如：Boostrap官網在Body上設定了line-height，值約為1.5(1.42857143)
  這樣，文字上下就會一直有0.25倍字型大小的間距。

  • 完成此部分後，搜尋框就嵌入關鍵詞了。
    效果如下：

  

  3.搜尋引擎實現

  搜尋引擎圖示我是使用Font Awesome圖示實現的。

  • Font Awesome介紹
  • Font Awesome提供可縮放的向量字型圖示，我們可以定製大小、顏色、陰影及其他css樣式。
  • 它完全開源免費，相比較iconfont使用方便簡單。
  • 期初是為了配合bootstrap使用，現在它適用於所有框架。

  實現步驟如下：

  • 1.引入Font Awesome
    在head頭部中引入font-awesome.css，可以不用下載Font Awesome安裝包，線上直接引入，我是直接引入的，開啟網址https://www.bootcdn.cn/font-awesome/，複製最新版本的連結，如下圖：
    
    貼上到html網頁head頭部即可，如下：

    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    

  • 2.圖示引用
    引用Font Awesome圖示元素，要在這個元素的類中加入字首fa，然後加入對應的圖示名稱，如下：

    <i id="fa-search" class="fa fa-search">
    

    不知道圖示名字可以在官網搜尋，可以搜到圖示和相應的名稱，如下：
    

  • 3.修改圖示屬性
    為引入的圖示加上id屬性，便於修改樣式。如下：

    #fa-search{
                font-size:1.6em;
                }
    

    • 設定字型大小使圖示變大一些，適應搜尋提交框的大小。
    • 不新增id="fa-search"屬性，直接.fa-search{ font-size:1.6em;}圖示屬性修改不成功。
      製作完成的搜尋框，效果如下：
      

    《over》