小米商城網頁製作大全之搜尋引擎(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
-
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》
- 完成此部分後,搜尋框就嵌入關鍵詞了。