1. 程式人生 > >小米商城網頁製作大全之搜尋引擎(input,Font Awesome)

小米商城網頁製作大全之搜尋引擎(input,Font Awesome)

導讀:
原來的自己大多時候是通過視訊和書本資料自學,很少有動手實踐,也就會有眼高手低的毛病,每次做一個小功能來練手的時候都會遇到各式各樣的問題,也正是在想方設法解決這些問題的過程中收穫是最大的,不僅是解決問題的能力,更重要的是學習這些的興趣會更濃,堅持下去的動力更足。
小米網頁的搜尋框是通過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》