一个漂亮的DIV搜索条

<!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">

<HTML>

<HEAD>

<TITLE>搜索条</TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style>

/*basic*/

*{padding:;margin:;color:#;font:12px/20px Arial,Sans-serif,"宋体";}

/*elements*/

.clear{clear:both;height:0px;overflow:hidden;}

ul,li,ol{list-style-type:none;list-style-position:outside;}

button,.btnNormal{height:22px;line-height:18px;padding: 9px!important;padding: 5px;}

a{color:#0042ff;text-decoration:underline;}

a,a *{cursor:pointer;}

a img{border:;}

.searchTool{float:left;width:520px;}

.searchTool .searchExtend{float:left;line-height:24px;_padding-top:5px;}

.searchTool .radio{vertical-align:middle;margin-left:10px;margin-right:2px;*margin-right:;}

.searchTool .txtSearch{float:left;width:232px;padding:2px 2px  2px;height:20px;line-height:20px;vertical-align:bottom;border:1px solid #3e99d4;}

.searchTool .selSearch{float:left;width:60px;background:#fff;height:22px;line-height:22px;border:1px solid #3e99d4;border-left:;}

.searchTool .nowSearch{float:left;width:40px;height:20px;line-height:22px;overflow:hidden;padding-left:4px;}

.searchTool .btnSel{float:right;border-left:1px solid #3e99d4;width:14px;height:22px;}

.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;}

.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;}

.searchTool .selOption{z-index:;position:absolute;margin-left:-1px;width:60px;background:#fff;border:1px solid #3e99d4;}

.searchTool .selOption a{display:block;height:21px;padding-left:5px;line-height:21px;color:#;text-decoration:none;}

.searchTool .selOption a:hover{color:#fff;background:#95d5f1;}

.searchTool .btnSearch{float:left;margin-left:10px;width:58px;height:22px;line-height:22px;border:1px solid #3e99d4;overflow:hidden;}

.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;}

.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;}

.searchTool .btnSearch .lbl{cursor:pointer;display:block;width:40px;padding-left:5px;letter-spacing:5px;text-align:center;height:18px;padding-top:1px;margin: auto;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#daeefa,offX=,offY=,positives=true);}

.searchTool .btnSearch a:hover .lbl{padding-top:0px;}

</style>

<script>

function drop_mouseover(pos){

 try{window.clearTimeout(timer);}catch(e){}

}

function drop_mouseout(pos){

 var posSel=document.getElementById(pos+"Sel").style.display;

 if(posSel=="block"){

  timer = setTimeout("drop_hide('"+pos+"')", );

 }

}

function drop_hide(pos){

 document.getElementById(pos+"Sel").style.display="none";

}

function search_show(pos,searchType,href){

    document.getElementById(pos+"SearchType").value=searchType;

    document.getElementById(pos+"Sel").style.display="none";

    document.getElementById(pos+"Slected").innerHTML=href.innerHTML;

    document.getElementById(pos+'q').focus();

    var sE = document.getElementById("searchExtend");

    if(sE != undefined  &&  searchType == "bar"){

     sE.style.display="block";

    }else if(sE != undefined){

     sE.style.display="none";

    }

 try{window.clearTimeout(timer);}catch(e){}

 return false;

}

</script>

</HEAD>

<BODY>

<div class="searchTool">

<form method="get" action="http://so.youku.com/search_playlist" name="headSearchForm" id="headSearchForm" onsubmit="return dosearch(this);">

     <input class="txtSearch" id="headq" name="q" type="text" value="闯关东" />

     <input name="searchdomain" type="hidden" value="http://so.youku.com">

     <input id="headSearchType" name="searchType" type="hidden" value="playlist">

     <div class="selSearch">

    <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>

    <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>

    <div class="clear"></div>

    <ul class="selOption" id="headSel" style="display:none;">

     <li><a href="#" onclick="return search_show('head','video',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">视频</a></li>

     <li><a href="#" onclick="return search_show('head','playlist',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">专辑</a></li>

     <li><a href="#" onclick="return search_show('head','user',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">会员</a></li>

     <li><a href="#" onclick="return search_show('head','bar',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">看吧</a></li>

     <li><a href="#" onclick="return search_show('head','pk',this)" onmouseover="drop_mouseover('head');" onmouseout="drop_mouseout('head');">PK擂台</a></li>

    </ul>

     </div>

     <div class="btnSearch">

    <a href="#" onclick="javascript:return dosearch(document.getElementById('headSearchForm'));"><span class="lbl">搜索</span></a>

     </div>

          <div class="searchExtend" id="searchExtend" name="searchExtend" style="display:none">

           <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">

     </div>

          <div class="clear"></div>

     </form>

   </div>

   <div class="clear"></div>

  </div>

 </div>

</BODY>

</HTML>

一个漂亮的DIV搜索条的更多相关文章

使用CSS3和jQuery可伸缩的搜索条
使用CSS3和jQuery可伸缩的搜索条 helloweba.com 作者:月光光时间:2013-12-09 21:23 标签: CSS3 jquery 搜索条在我们网站是必不可少的,尤其是在有限的 ...
模仿京东顶部搜索条效果制作的一个小demo
最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...
20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1
20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...
PS网页设计教程XXIV——从头设计一个漂亮的网站
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
利用CSS3特性巧妙实现漂亮的DIV箭头
DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发: 还有傲游网站的导航条: 像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果. 传统的实现方式都 ...
一个漂亮的JavaScript“警告”替代品
下载一个漂亮的JavaScript"警告"替代品安装 $ npm安装-节省sweetalert 使用从"sweetalert"进口swal; 横波测井(& ...
Swift - 搜索条（UISearchBar）的用法
1,搜索条Options属性还可设置如下功能样式: Shows Search Results Button:勾选后,搜索框右边显示一个圆形向下的按钮,单击会发送特殊事件. Shows Bookmark ...
小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器
来自:http://blog.csdn.net/dawanganban/article/details/17679069 在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的 ...
一个漂亮而强大的自定义view
代码地址如下:http://www.demodashi.com/demo/13502.html 简介主要提供一个漂亮而强大的自定义SeekBar,进度变化由提示牌 (sign)展示,具有强大的属性设 ...

随机推荐

js监听用户的键盘敲击事件，兼容各大主流浏览器
js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...
Shell变量命名规则
变量与变量内容以一个等号『=』来连结,如下所示: 『myname=chenfei0801』等号两边不能直接接空格符,如下所示为错误: 『myname = chenfei0801』或『myname=c ...
Android WebView的loadData方法注意事项
loadData()中的html data中不能包含'#', '%', '\', '?'四中特殊字符,出现这种字符就会出现解析错误,显示找不到网页还有部分html代码.需要如何处理呢?我们需要用Url ...
Linux中nat模式上不了网的问题怎么解决？
我是这么解决的
“System.Transactions.Diagnostics.DiagnosticTrace”的类型初始值设定项引发异常。
今天在项目中用log4net,App.config文件中增加了configSections节点,程序运行报错“System.Transactions.Diagnostics.DiagnosticTra ...
错误：Retrieving the COM class factory for component with CLSID {000209FF-0000-0000-C000-000000000046} failed due to the following error: 80070005 拒绝访问。
最近,把一个网站部署到另一个服务器上,网站中一个功能word转pdf报下面错误: 在此附上解决方案: 方法1:配置Web.Config文件,在每次请求时模拟本地系统的账户. 具体操作:在Web.Con ...
[功能帮助类] C#RandomHelper随机数，随机字符，可限制范围-帮助类（转载）
点击下载 RandomHelper.rar 主要功能如下 .生成一个指定范围的随机整数,该随机数范围包括最小值,但不包括最大值 .生成一个0.0到1.0的随机小数 .对一个数组进行随机排序 . 一:随 ...
SVM对偶形式
dual svm 对偶SVM linear SVM 可以用二次规划方法解 xn通过非线性转换变成zn SVM配合非线性特征转换透过large-margin降低模型复杂度透过特征转换得到弯弯曲曲的边 ...
window FILES——windows文件管理相关实例
C语言下有一套文件管理方案.C++语言下也有一套自己的文件管理方案.windows系统当然也有自己的一套文件管理方案啦.对于普通char类型为基础的字符使用哪种方案的解决办法都是一样的,但是对于宽字符 ...
Webstorm6的汉化以及主题设置
Webstorm6.0.2界面截图: webstorm作为一款前端开发软件,被业内称为神器,下面是下载地址. 需要的人太多,邮件不过来,传到这边方便大家下载汉化包 http://www.jetbra ...

一个漂亮的DIV搜索条

一个漂亮的DIV搜索条的更多相关文章

随机推荐

热门专题