如何制作网站可伸缩搜索框（无需JS）

网站搜索功能在我们自己做网站时，是必不可少的。在之前的课程中我们也介绍了如何制作网站搜索功能，通过这个方法，我们可以制作出自己网站的搜索框。

对于一些网站，由于版面限制，普通的搜索框无法适用，需要制作可伸缩搜索框。不点击时，搜索框是收缩状态，只显示一个搜索图标，点击后，就展示整个搜索框。

网站可伸缩搜索框效果如下：

点击前的收缩状态：

点击后的伸展状态：

这种网站可伸缩搜索框如何制作呢，下面学做网站论坛就来教学建网站新手们制作这种可伸缩搜索框。

第一步：在网站需要显示搜索框的位置放入以下的搜索框代码：（以下代码只适用于Wordpress，其它程序请自己修改一下提交地址）

第二步：以自己网站的CSS文件里，粘贴以下的CSS样式代码，控制可伸缩搜索框的样式。

第三步：还需要保存一下那个搜索放大镜的图片，放在自己的图片文件片里。图片地址：https://www.xuewangzhan.com/wp-content/uploads/2017/11/new_fdj.png

第四步：OK！所有的步骤都结束了，你的网站已有拥有了一个?可伸缩搜索框。就是这样的简单，无需任何的JS代码，只需要HTML和CSS就完美搞定。

标签： 代码 建网站 搜索 网站搜索 学建网站 制作网站

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。