如何制作網(wǎng)站可伸縮搜索框（無需JS）
2018-11-01 來源：學(xué)做網(wǎng)站論壇
網(wǎng)站搜索功能在我們自己做網(wǎng)站時，是必不可少的。在之前的課程中我們也介紹了如何制作網(wǎng)站搜索功能，通過這個方法，我們可以制作出自己網(wǎng)站的搜索框。
對于一些網(wǎng)站，由于版面限制，普通的搜索框無法適用，需要制作可伸縮搜索框。不點擊時，搜索框是收縮狀態(tài)，只顯示一個搜索圖標(biāo)，點擊后，就展示整個搜索框。
網(wǎng)站可伸縮搜索框效果如下：
點擊前的收縮狀態(tài)：
點擊后的伸展?fàn)顟B(tài)：
這種網(wǎng)站可伸縮搜索框如何制作呢，下面學(xué)做網(wǎng)站論壇就來教學(xué)建網(wǎng)站新手們制作這種可伸縮搜索框。
第一步：在網(wǎng)站需要顯示搜索框的位置放入以下的搜索框代碼：（以下代碼只適用于Wordpress，其它程序請自己修改一下提交地址）
<input id="s" name="s" class="animatedSearch" type="text" style="border:none"/>
</form>
第二步：以自己網(wǎng)站的CSS文件里，粘貼以下的CSS樣式代碼，控制可伸縮搜索框的樣式。
.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;}
第三步：還需要保存一下那個搜索放大鏡的圖片，放在自己的圖片文件片里。圖片地址：https://www.xuewangzhan.com/wp-content/uploads/2017/11/new_fdj.png
第四步：OK！所有的步驟都結(jié)束了，你的網(wǎng)站已有擁有了一個?可伸縮搜索框。就是這樣的簡單，無需任何的JS代碼，只需要HTML和CSS就完美搞定。
標(biāo)簽： 代碼 建網(wǎng)站 搜索 網(wǎng)站搜索 學(xué)建網(wǎng)站 制作網(wǎng)站
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
上一篇:海洋CMS忘記管理員密碼解決方法
