漂亮的博客搜索框
看到漂亮的搜索框，收藏...
主要用背景圖片和輸入框和鏈接隱藏完成。
可以在IE6+,ff，chorme下兼容...
?
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>博客搜索框</title> <style type="text/css"> /*----------------------- 博客圖片搜索框 兼容性：IE6+,ff,chomre author：tomieric date:2010-7-30 website:http://cnblogs.com/tomieric qq微博：http://t.qq.com/tomi-eric -------------------------*/ #search{ position:relative; width:231px; height:39px; line-height:39px; background:url(search.png) no-repeat left center;} #search_text{ height:20px; width:160px; position:absolute; top:8px; left:6px; border:1px solid transparent; color:#aaa} #search a{ display:block; width:55px; height:26px; text-decoration:none; position:absolute; right:6px; top:6px;text-indent:-1000em/*隱藏鏈接文字*/} </style> <script> function submit_form(){ //模擬表單提交函數 var keyWords=document.getElementById("search_text").value; //獲得搜索框關鍵字 window.location.href="http://google.com.hk/search?hl=zh-CN&q=tomieric+"+keyWords; //跳轉到搜索頁面 return false; } </script> </head> <body> <div id="search"> <input type="text" name="text" id="search_text" /> <a href="#" onFocus="this.blur()" οnclick="submit_form()">搜索</a> </div> </body> </html>?
demo:U115
?
轉載于:https://www.cnblogs.com/tomieric/archive/2010/07/30/1788717.html
總結
- 上一篇： mysql字符串拼接有空值_mysql字
- 下一篇： php怎么做性格测试题目,PHP和原生J