3顶

一个漂亮的DIV搜索条

稿源：互联网 2022-06-11 02:02:54 点击： 2542 撤稿纠错

比普通的白色框好看多了。。想美化您的网站，有搜索框时可以考虑考虑这个东西

以下讨论的是和搜索相关的一个漂亮的DIV搜索条教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><HTML><br><HEAD><br><TITLE>搜索条</TITLE><br><META NAME="Generator" CONTENT="EditPlus"><br><META NAME="Author" CONTENT=""><br><META NAME="Keywords" CONTENT=""><br><META NAME="Description" CONTENT=""><br><style><br>/*basic*/<br>*{padding:0;margin:0;color:#000;font:12px/20px Arial,Sans-serif,"宋体";}<br>/*elements*/<br>.clear{clear:both;height:0px;overflow:hidden;}<br>ul,li,ol{list-style-type:none;list-style-position:outside;}<br>button,.btnNormal{height:22px;line-height:18px;padding:0 9px!important;padding:0 5px;}<br>a{color:#0042ff;text-decoration:underline;}<br>a,a *{cursor:pointer;}<br>a img{border:0;}<br>.searchTool{float:left;width:520px;}<br>.searchTool .searchExtend{float:left;line-height:24px;_padding-top:5px;}<br>.searchTool .radio{vertical-align:middle;margin-left:10px;margin-right:2px;*margin-right:0;}<br>.searchTool .txtSearch{float:left;width:232px;padding:2px 2px 0 2px;height:20px;line-height:20px;vertical-align:bottom;border:1px solid #3e99d4;}<br>.searchTool .selSearch{float:left;width:60px;background:#fff;height:22px;line-height:22px;border:1px solid #3e99d4;border-left:0;}<br>.searchTool .nowSearch{float:left;width:40px;height:20px;line-height:22px;overflow:hidden;padding-left:4px;}<br>.searchTool .btnSel{float:right;border-left:1px solid #3e99d4;width:14px;height:22px;}<br>.searchTool .btnSel a{background:url(http://static.youku.com/v1.0.0217/index/img/btn_sel.gif) no-repeat center center;display:block;width:14px;height:22px;}<br>.searchTool .btnSel a:hover{background:url(http://static.youku.com/v1.0.0217/index/img/btn_sel_over.gif) no-repeat center center;border:1px solid #fff;width:12px;height:20px;}<br>.searchTool .selOption{z-index:9999;position:absolute;margin-left:-1px;width:60px;background:#fff;border:1px solid #3e99d4;}<br>.searchTool .selOption a{display:block;height:21px;padding-left:5px;line-height:21px;color:#000;text-decoration:none;}<br>.searchTool .selOption a:hover{color:#fff;background:#95d5f1;}<br>.searchTool .btnSearch{float:left;margin-left:10px;width:58px;height:22px;line-height:22px;border:1px solid #3e99d4;overflow:hidden;}<br>.searchTool .btnSearch a{background:url(http://static.youku.com/v1.0.0217/index/img/bg_nav_option.gif) repeat-x center -6px;display:block;text-decoration:none;height:22px;line-height:22px;overflow:hidden;}<br>.searchTool .btnSearch a:hover{background:url(http://static.youku.com/v1.0.0217/index/img/bg_nav_option_over.gif) repeat-x center center;border:1px solid #fff;height:20px;line-height:20px;}<br>.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);}<br>.searchTool .btnSearch a:hover .lbl{padding-top:0px;}<br></style><br><script><br>function drop_mouseover(pos){<br> try{window.clearTimeout(timer);}catch(e){}<br>}<br>function drop_mouseout(pos){<br> var posSel=document.getElementById(pos+"Sel").style.display;<br> if(posSel=="block"){<br>  timer = setTimeout("drop_hide('"+pos+"')", 1000);<br> }<br>}<br>function drop_hide(pos){<br> document.getElementById(pos+"Sel").style.display="none";<br>}<br>function search_show(pos,searchType,href){<br>    document.getElementById(pos+"SearchType").value=searchType;<br>    document.getElementById(pos+"Sel").style.display="none";<br>    document.getElementById(pos+"Slected").innerHTML=href.innerHTML;<br>    document.getElementById(pos+'q').focus();<br>    var sE = document.getElementById("searchExtend");<br>    if(sE != undefined && searchType == "bar"){<br>     sE.style.display="block";<br>    }else if(sE != undefined){<br>     sE.style.display="none";<br>    }<br> try{window.clearTimeout(timer);}catch(e){}<br> return false;<br>}<br></script><br></HEAD><br><BODY><br><div class="searchTool"><br><form method="get" action="http://so.youku.com/search_playlist" name="headSearchForm" id="headSearchForm" onsubmit="return dosearch(this);"><br>     <input class="txtSearch" id="headq" name="q" type="text" value="闯关东" /><br>     <input name="searchdomain" type="hidden" value="http://so.youku.com"><br>     <input id="headSearchType" name="searchType" type="hidden" value="playlist"><br>     <div class="selSearch"><br>    <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><br>    <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><br>    <div class="clear"></div><br>    <ul class="selOption" id="headSel" style="display:none;"><br>     <li><a href="#" onclick="return search_show('head','video',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">视频</a></li><br>     <li><a href="#" onclick="return search_show('head','playlist',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">专辑</a></li><br>     <li><a href="#" onclick="return search_show('head','user',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">会员</a></li><br>     <li><a href="#" onclick="return search_show('head','bar',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">看吧</a></li><br>     <li><a href="#" onclick="return search_show('head','pk',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">PK擂台</a></li><br>    </ul><br>     </div><br>     <div class="btnSearch"><br>    <a href="#" onclick="javascript:return dosearch(document.getElementById('headSearchForm'));"><span class="lbl">搜索</span></a><br>     </div><br>          <div class="searchExtend" id="searchExtend" name="searchExtend" style="display:none"><br>           <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"><br>     </div><br>          <div class="clear"></div><br>     </form><br>   </div><br>   <div class="clear"></div><br>  </div><br> </div><br></BODY><br></HTML></font><br><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于一个漂亮的DIV搜索条的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200806173959.shtml方便下次再访问哦。

·上一篇： 用UL标签 CSS实现的柱状图
·下一篇： 漂亮的loading加载效果特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

一个漂亮的DIV搜索条

文章分类LIST >>返回首页

最新游戏

最新新闻