一个漂亮的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)展示,具有强大的属性设 ...
随机推荐
- IIS Shared Configuration
Introduction The Internet changes the ways in which companies handle their day-to-day business and h ...
- 请问JAVA三层架构，持久层，业务层，表现层，都该怎么理解？和MVC三层模型有什么区别
持久层用来固化数据,如常说的DAO层,操作数据库将数据入库业务层用来实现整体的业务逻辑 如 前台获得了数据,逻辑层去解析这些数据,效验这些数据等操作表现层很好解释 你现在看到的网页 一些界面 都属于 ...
- Spring JdbcTemplate批量操作数据库
个人总结,转载请注明出处:http://www.cnblogs.com/lidabnu/p/5769732.html 还是分两部分:解决什么问题和怎么做. 解决什么问题 提升数据操作性能,因为批量操作 ...
- 3. NHibernate基础知识 - 你必须知道的一些事情
首先介绍一下框架结构(这个有个概念就可以): 然后我们会介绍一个很重要的概念(一定要好看)!! 这节对 NHibernate 架构做一个介绍,首先要了解一下该框架在应用程序中的位置: 先来一个简单的图 ...
- C# -abstract, override, virtual, new
new声明的方法,当使用子类的类型来调用的时候,它会运行子类的函数,而如果类型是基类的话,被隐藏的基类函数会被调用. 而子类中函数使用override的时候,则当使用子类的类型来调用的是,它会运行子 ...
- HttpServletRequest 获取URL的方法及区别
HttpServletRequest 获取请求的URL的方法有: 1.request.getRequestURL() 返回的是完整的url,包括Http协议,端口号,servlet名字和映射路径,但它 ...
- Codevs 1337 银行里的迷宫
1337 银行里的迷宫 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 传送门 题目描述 Description 楚楚每一次都在你的帮助下过了一关又一关(比如他开 ...
- Windows Phone 之播放视频
在Windows Phone 7中播放视频有两种方式, (1)使用MediaElement 控件来播放:用MediaElement 控件来播放视频比较灵活,你需要自己去实现播放暂停进度条等等的功能,播 ...
- 纯javascript联动的例子
有人想要学习下纯javascript联动的一些技巧,我这里就以日期的联动为例,附上一些代码至于复杂的省市区联动,不建议用纯javascript的,而是用ajax的方式,该不在此讨论范围内,想要了解aj ...
- 注册表和ODBC
注册表使用的是树型体系结构,树中的每个结点称键.每个键也可以包含其他的键或子键.它允许进一步的分支,也即为值,它用来存储有效的数据.在注册表中,注册表用键来组织数据,一个键中的值用它们的名来 ...