表单大师_表单特效-经典仿taobao搜索框效果 时间：2016-01-17 来源：经典短信 阅读： 提示：您可以先修改部分代码再运行<!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> <title>表单特效-经典的搜索框效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> <!-- .search{ padding-right:10px; padding-left:10px; padding-top:5px; padding-bottom:5px; width: 280px; background:#1A93CC; float:left; position:relative; } .search .input{ padding-top:2px; height:16px; width: 180px; border: 1px solid #0086C6; font-size:14px; background:#fff url(http://www.zzsky.cn/effect/images/search_btn.gif) no-repeat right 0; } .label{ color:#ccc; position:absolute; left:12px;top:6px; display:block; height:22px; line-height:22px; font-size:12px; } span.submit{ cursor:pointer; position:absolute; left:171px; top:6px; width:20px; height:20px; text-indent:-999em; } --> </style> </head> <body> <!--把下面代码加到<body>与</body>之间--> <form action="{sys:plusurl}search/index.asp" method="post" name="frmsearch" id="frmsearch"> <input name="key<a href="http://www.bbyears.com/clist-116-1.html" target="_blank" class="keylink">word</a>" type="text" class="input" id="key<a href="http://www.bbyears.com/clist-116-1.html" target="_blank" class="keylink">word</a>" value="" style="float:left;"> <label for="keyword" id="for-keyword" class="label">站内搜索</label> 搜索 </form> <script type="text/javascript"> var $ = function(id){return document.getElementById(id);} var formSubmit = function(id){ document.forms[id].submit(); return false; } var tip = function(q, for_q){ q = $(q); for_q = $(for_q); q.onfocus = function(){ for_q.style.display = "none"; q.style.backgroundPosition = "right -17px"; } q.onblur = function(){ if(!this.value) for_q.style.display = "block"; q.style.backgroundPosition = "right 0"; } for_q.onclick = function(){ this.style.display = "none"; q.focus(); } }; tip("keyword","for-keyword"); </script> </body> </html> 提示：您可以先修改部分代码再运行表单大师_表单特效-经典仿taobao搜索框效果 http://m.bbyears.com/zhufuduanxin/21034.html 推荐访问:表单大师官网 html表单 上一篇：[94版三国演义]漫画版《三国演义》引发网友激烈论战 下一篇：经典全面的ppt_经典全面的php取得url参数与域名代码