小米商城网页制作大全之搜索引擎(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