一个漂亮的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)展示,具有强大的属性设 ...

随机推荐

HDU2028JAVA
Lowest Common Multiple Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (J ...
NDK开发之数组操作
JNI把Java数组当作引用类型来处理,JNI提供了必要的函数来访问和处理Java数组. 下面一个一个来看. 1.创建数组我们可以使用NewArray函数在原生代码中创建数组实例,其中可以是Int. ...
CentOS 6.7 安装配置BT下载工具Transmission
1.配置额外yum源 i386 cd /etc/yum.repos.d/ wget http://geekery.altervista.org/geekery-el6-i686.repo x86_64 ...
ASP.NET操作DataTable
.创建 datatable DataTable dt=new Datable();//可以给表创建一个名字,tb .给表加个列名: dt.Columns.Add("id", typ ...
sql查询最大id
如有个表里有字段 id,name,..... 当name是重复时取其id最大的一条记录 select max(id) id,name from 表 group by name --最小用mini - ...
HDU-1020（水题）
Encoding Problem Description Given a string containing only 'A' - 'Z', we could encode it using the ...
js获取元素transform参数得出的个人理解
之前写页面的时候有试过想用js获取某些元素的translate的数值什么的,但是translate又是transform的子样式(勉强说说),理所当然就是先获取transform样式,再读里面的值. ...
chrome偶尔弹出新窗口的解决方案
最近使用谷歌浏览器,在搜索页点击搜索结果时,偶尔会弹出新窗口,而不是新标签,试验发现,只要将chrome里面安装的google drive app卸载就行了. 当然了,如果此方法不适合你的情况,还可以 ...
第三部分关于HHibernate中关键字ID的配置
实体类映射中,必须配置一个关键字,对应着数据表的关键字,大多数的实体类也都有一个属性表示类的唯一性,在实体类配置文件(.hbm.xml)中,<id>元素的就是这个作用. 一个完整的ID配置 ...
JQuery Datatables(二)
前篇讲到了Datatables的基本用法,链接地址:http://www.cnblogs.com/wumian1360/p/4263129.html 今天来实现5,6,7三点. 其实Datatable ...

一个漂亮的DIV搜索条

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

随机推荐

热门专题