一个搜索条效果

于 2008-12-10 21:35:00 发布
阅读量1k 收藏
点赞数
分类专栏： 网站建设 文章标签： float timer generator url javascript class
本文介绍了一个具体的搜索条设计案例，详细展示了HTML与CSS结合使用的代码片段，包括搜索框、下拉菜单及按钮等元素的设计样式，并提供了JavaScript交互逻辑来实现下拉选项及不同搜索类型的选择功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

http://www.corange.cn/archives/2008/10/1910.html

http://www.corange.cn//uploadfiles/1014_10818.jpg


 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> 
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>"> 
  3. <HTML> 
  4. <HEAD> 
  5. <TITLE>搜索条</TITLE> 
  6. <META NAME="Generator" CONTENT="EditPlus"> 
  7. <META NAME="Author" CONTENT=""> 
  8. <META NAME="Keywords" CONTENT=""> 
  9. <META NAME="Description" CONTENT=""> 
  10. <style> 
  11. /*basic*/ 
  12. *{padding:0;margin:0;color:#000;font:12px/20px Arial,Sans-serif,"宋体";} 
  13. /*elements*/ 
  14. .clear{clear:both;height:0px;overflow:hidden;} 
  15. ul,li,ol{list-style-type:none;list-style-position:outside;} 
  16. button,.btnNormal{height:22px;line-height:18px;padding:0 9px!important;padding:0 5px;} 
  17. a{color:#0042ff;text-decoration:underline;} 
  18. a,a *{cursor:pointer;} 
  19. a img{border:0;} 
  20. .searchTool{float:left;width:520px;} 
  21. .searchTool .searchExtend{float:left;line-height:24px;_padding-top:5px;} 
  22. .searchTool .radio{vertical-align:middle;margin-left:10px;margin-right:2px;*margin-right:0;} 
  23. .searchTool .txtSearch{float:left;width:232px;padding:2px 2px 0 2px;height:20px;line-height:20px;vertical-align:bottom;border:1px solid #3e99d4;} 
  24. .searchTool .selSearch{float:left;width:60px;background:#fff;height:22px;line-height:22px;border:1px solid #3e99d4;border-left:0;} 
  25. .searchTool .nowSearch{float:left;width:40px;height:20px;line-height:22px;overflow:hidden;padding-left:4px;} 
  26. .searchTool .btnSel{float:right;border-left:1px solid #3e99d4;width:14px;height:22px;} 
  27. .searchTool .btnSel a{background:url(<a href="http://static.youku.com/v1.0.0217/index/img/btn_sel.gif" target="_blank" rel="external">http://static.youku.com/v1.0.0217/index/img/btn_sel.gif</a>) no-repeat center center;display:block;width:14px;height:22px;} 
  28. .searchTool .btnSel a:hover{background:url(<a href="http://static.youku.com/v1.0.0217/index/img/btn_sel_over.gif" target="_blank" rel="external">http://static.youku.com/v1.0.0217/index/img/btn_sel_over.gif</a>) no-repeat center center;border:1px solid #fff;width:12px;height:20px;} 
  29. .searchTool .selOption{z-index:9999;position:absolute;margin-left:-1px;width:60px;background:#fff;border:1px solid #3e99d4;} 
  30. .searchTool .selOption a{display:block;height:21px;padding-left:5px;line-height:21px;color:#000;text-decoration:none;} 
  31. .searchTool .selOption a:hover{color:#fff;background:#95d5f1;} 
  32. .searchTool .btnSearch{float:left;margin-left:10px;width:58px;height:22px;line-height:22px;border:1px solid #3e99d4;overflow:hidden;} 
  33. .searchTool .btnSearch a{background:url(<a href="http://static.youku.com/v1.0.0217/index/img/bg_nav_option.gif" target="_blank" rel="external">http://static.youku.com/v1.0.0217/index/img/bg_nav_option.gif</a>) repeat-x center -6px;display:block;text-decoration:none;height:22px;line-height:22px;overflow:hidden;} 
  34. .searchTool .btnSearch a:hover{background:url(<a href="http://static.youku.com/v1.0.0217/index/img/bg_nav_option_over.gif" target="_blank" rel="external">http://static.youku.com/v1.0.0217/index/img/bg_nav_option_over.gif</a>) repeat-x center center;border:1px solid #fff;height:20px;line-height:20px;} 
  35. .searchTool .btnSearch .lbl{cursor:pointer;display:block;width:40px;padding-left:5px;letter-spacing:5px;text-align:center;height:18px;padding-top:1px;margin:0 auto;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#daeefa,offX=1,offY=1,positives=true);} 
  36. .searchTool .btnSearch a:hover .lbl{padding-top:0px;} 
  37. </style> 
  38. <script> 
  39. function drop_mouseover(pos){ 
  40. try{window.clearTimeout(timer);}catch(e){} 
  41. } 
  42. function drop_mouseout(pos){ 
  43. var posSel=document.getElementById(pos+"Sel").style.display; 
  44. if(posSel=="block"){ 
  45. timer = setTimeout("drop_hide('"+pos+"')", 1000); 
  46. } 
  47. } 
  48. function drop_hide(pos){ 
  49. document.getElementById(pos+"Sel").style.display="none"; 
  50. } 
  51. function search_show(pos,searchType,href){ 
  52. document.getElementById(pos+"SearchType").value=searchType; 
  53. document.getElementById(pos+"Sel").style.display="none"; 
  54. document.getElementById(pos+"Slected").innerHTML=href.innerHTML; 
  55. document.getElementById(pos+'q').focus(); 
  56. var sE = document.getElementById("searchExtend"); 
  57. if(sE != undefined && searchType == "bar"){ 
  58. sE.style.display="block"; 
  59. }else if(sE != undefined){ 
  60. sE.style.display="none"; 
  61. } 
  62. try{window.clearTimeout(timer);}catch(e){} 
  63. return false; 
  64. } 
  65. </script> 
  66. </HEAD> 
  67. <BODY> 
  68. <div class="searchTool"> 
  69. <form method="get" action="<a href="http://so.youku.com/search_playlist" target="_blank" rel="external">http://so.youku.com/search_playlist</a>" name="headSearchForm" id="headSearchForm" onsubmit="return dosearch(this);"> 
  70. <input class="txtSearch" id="headq" name="q" type="text" value="闯关东" /> 
  71. <input name="searchdomain" type="hidden" value="<a href="http://so.youku.com" target="_blank" rel="external">http://so.youku.com</a>"> 
  72. <input id="headSearchType" name="searchType" type="hidden" value="playlist"> 
  73. <div class="selSearch"> 
  74. <div class="nowSearch" id="headSlected" onclick="if(document.getElementById('headSel').style.display=='none'){document.getElementById('headSel').style.display='block';}else {document.getElementById('headSel').style.display='none';};return false;" onmouseout="drop_mouseout('head');">专辑</div> 
  75. <div class="btnSel"><a href="#" onclick="if(document.getElementById('headSel').style.display=='none'){document.getElementById('headSel').style.display='block';}else {document.getElementById('headSel').style.display='none';};return false;" onmouseout="drop_mouseout('head');"></a></div> 
  76. <div class="clear"></div> 
  77. <ul class="selOption" id="headSel" style="display:none;"> 
  78. <li><a href="#" onclick="return search_show('head','video',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">视频</a></li> 
  79. <li><a href="#" onclick="return search_show('head','playlist',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">专辑</a></li> 
  80. <li><a href="#" onclick="return search_show('head','user',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">会员</a></li> 
  81. <li><a href="#" onclick="return search_show('head','bar',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">看吧</a></li> 
  82. <li><a href="#" onclick="return search_show('head','pk',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">PK擂台</a></li> 
  83. </ul> 
  84. </div> 
  85. <div class="btnSearch"> 
  86. <a href="#" onclick="javascript:return dosearch(document.getElementById('headSearchForm'));"><span class="lbl">搜索</span></a> 
  87. </div> 
  88. <div class="searchExtend" id="searchExtend" name="searchExtend" style="display:none"> 
  89. <input type="radio" class="radio" name="sbt" value="post" onclick="csbt(this,this.form.sbts);" />搜贴子<input type="radio" name="sbt" value="user" onclick="csbt(this,this.form.sbts);" class="radio" />按作者搜<input type="hidden" name="sbts" value="bar"> 
  90. </div> 
  91. <div class="clear"></div> 
  92. </form> 
  93. </div> 
  94. <div class="clear"></div> 
  95. </div> 
  96. </div> 
  97. </BODY> 
  98. </HTML> 


 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值