你有没有想过,用纯HTML+CSS做几个常用的各大网站搜索框,然后把它们放在一个页面里?这样,只需打开该页面就可以随便挑选一个进行搜索,无需来回访问各大网站去搜索了。这样效率可是能提高很多啊!

结构分析

常见的搜索框无非包括以下三个简单结构:

  • 搜索图标icon:可以用字符svgpng甚至是jpg
  • 输入框:就用<input>,无需多言
  • 搜索按钮:用<button>或者是<div>

于是简单的结构就出来了:

1
2
3
4
5
<div>
<span><svg class="search-icon" t="1641104543254" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2294" width="200" height="200"><path d="M1012.573991 1011.664672c-18.074982 18.192982-62.081938 10.884989-62.081938 10.884989l-197.249803-197.405803a463.455538 463.455538 0 1 1 71.905928-71.905928l197.248804 197.248803s8.054992 43.359957-9.822991 61.177939zM829.667174 464.301218A365.007636 365.007636 0 1 0 464.639537 829.347854a365.066636 365.066636 0 0 0 365.027637-365.046636z" p-id="2295" fill="#d3d3d3"></path></svg></span>
<input type="text" autocomplete="off" placeholder="请输入关键词">
<button type="submit">搜索</button>
</div>

其中输入框的属性autocomplete="off"作用是关闭显示自动完成功能,也就是关掉显示输入历史的下拉菜单。

功能分析

在百度输入框搜索数字1,会跳转到页面:https://www.baidu.com/s?ie=UTF-8&wd=1

有几个部分组成:

  • https://www.baidu.com/s是百度的搜索(search)模块,我们可以放到<form>表单的action值里
  • ie=UTF-8是一种编码,我们先不用管
  • wd=是百度搜索的参数,我们可以把<input>标签的name属性值设置为wd
  • 其中?&都是分隔作用的,我们不用管

然后我们把刚刚的HTML代码完善一下,就能实现百度搜索框的内容啦。

实例练习

CSS样式就不写了,大家可以自定义。

1
2
3
4
5
6
7
<div>
<form action="https://www.baidu.com/s">
<span><svg class="search-icon" t="1641104543254" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2294" width="200" height="200"><path d="M1012.573991 1011.664672c-18.074982 18.192982-62.081938 10.884989-62.081938 10.884989l-197.249803-197.405803a463.455538 463.455538 0 1 1 71.905928-71.905928l197.248804 197.248803s8.054992 43.359957-9.822991 61.177939zM829.667174 464.301218A365.007636 365.007636 0 1 0 464.639537 829.347854a365.066636 365.066636 0 0 0 365.027637-365.046636z" p-id="2295" fill="#d3d3d3"></path></svg></span>
<input name="wd" type="text" autocomplete="off" placeholder="百度一下">
<button type="submit" style="background:#4e6ef2;">搜索</button>
</form>
</div>

其他各大网站搜索框的复刻都和上方百度的实现方式相同。

技巧:<form>表单加上target="_blank"属性,可以在点击搜索按钮后在新页面打开,而不是在本页面跳转。