零基础建站培训介绍

当前位置:

如何制作网站可伸缩搜索框(无需JS)

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

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

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

点击前的收缩状态:

如何制作网站可伸缩搜索框1

点击后的伸展状态:

如何制作网站可伸缩搜索框2

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

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

<form id="search" action="<?php bloginfo('url'); ?>/" target="_blank" class="clearfix searform">

<input id="s" name="s" class="animatedSearch" type="text" style="border:none"/>

</form>

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

.searform{position:relative;}
.animatedSearch {width: 44px;height: 44px;margin-top: 24px;margin-right: 10px;padding:0 10px;float: right;
border-radius: 44px;font-size: 1.2em;background: #007bc7 url(images/new_fdj.png)no-repeat 50%;color: #fff;transition: width 0.4s ease-in-out;}

.animatedSearch:focus {width: 100%;background: #007bc7 url(images/new_fdj.png)no-repeat 95% 50%;outline:none;}

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

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

上一课: 下一课:

发表评论