1 最终效果图

图1 最终效果

2 布局分析

使用的是三层div嵌套结构，第一层存放图片，第二层存放搜索框，第三层放下方提示标签。

3 html学习

第一层：图片也可以点击，所以将img设置在a中；
第二层：搜索框有两个东西组成：1 文本框（input type=text），而且这里的输入框内默认有文字提示使用的是input的placeholder属性。2 搜索按钮。
第三层：每一个span包裹着一个a（放提示标签）加上一个span（放 |）。

4 css学习

1. 设置第二层，也就是除了图片之外的搜索框中最大的div，首先需要设置背景颜色、宽度和高度；然后将其居中显示（margin: 50px auto）；最后给其设置padding: 1px，这样可以显示出1px的边框线。
   ps：在设置margin: 50px auto时，忘了设置不同参数个数代表什么，所以查阅了下资料如下。
   如果只提供一个，将用于全部的四边。
   如果提供两个，第一个用于上－下，第二个用于左－右。
   如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
   如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
2. 设置二层div中的输入搜索关键字的div。首先，需要设置宽度和高度。然后设置1px的外边距，加上上面第一个设置的内边距，现在等于搜索框离最外层的div有2px的边距。最后，使用border: 1px solid transparent，消除文本框自带的边框，和outline:none清除点击时候出现的焦点框。
3. 设置button的样式。首先，需要设置宽度（占满剩下的位置）；然后，设置按钮的背景颜色（天猫红）和字体的样式；最后消除按钮的边框即可。

好了，最关键的三个部分已经实现（如果还有，那就是图片使用absolute属性定下位），剩下的修修补补就可以实现该效果了。