你有没有想过,用纯HTML+CSS做几个常用的各大网站搜索框,然后把它们放在一个页面里?这样,只需打开该页面就可以随便挑选一个进行搜索,无需来回访问各大网站去搜索了。这样效率可是能提高很多啊!
结构分析
常见的搜索框无非包括以下三个简单结构:
- 搜索图标icon:可以用
字符
、svg
、png
甚至是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"
属性,可以在点击搜索按钮后在新页面打开,而不是在本页面跳转。
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 百里飞洋! 技术内容: 若存在错误或不当之处,还望兄台不吝赐教,期待与您交流!