一个多功能蓝色漂亮的搜索条效果

<!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:0;margin:0;color:#000;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:0 9px!important;padding:0 5px;}
    a{color:#0042ff;text-decoration:underline;}
    a,a *{cursor:pointer;}
    a img{border:0;}
    .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:0;}
    .searchTool .txtSearch{float:left;width:232px;padding:2px 2px 0 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:0;}
    .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(/images/20111223/btn_sel.gif) no-repeat center center;display:block;width:14px;height:22px;}
    .searchTool .btnSel a:hover{background:url(/images/20111223/btn_sel_over.gif) no-repeat center center;border:1px solid #fff;width:12px;height:20px;}
    .searchTool .selOption{z-index:9999;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:#000;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(/images/20111223/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(/images/20111223/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:0 auto;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#daeefa,offX=1,offY=1,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+"‘)", 1000);
    }
    }
    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>
    <br><br><hr>
时间: 2024-08-29 17:12:27

一个多功能蓝色漂亮的搜索条效果的相关文章

模仿京东顶部搜索条效果制作的一个小demo

最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 1 #define kScreenWidth [UIScreen mainScreen].bounds.size.width 2 #define kScreenHeight [UIScreen mainScreen].bounds.size.height 3 4 #import "mainViewController.h" 5 6 @interface mainViewController

纯css实现进度条效果

去年7月份做一个公司商城的微信页面(微信用的chrome内核)需要写一个提示返现进度的进度条效果. 一个完整的进度条效果其实可以拆分一下: 一段背景: 一小段的静态的斜纹进度条: 斜纹进度条用线性渐变 linear-gradient 类实现,原理很好理解,2个参数: 1.角度: 2.关键点(包含2个参数,1是颜色,2是长度位置) display: inline-block; width: 100px; height: 100px; background-image: linear-gradien

一个漂亮的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>搜索条</

使用CSS3和jQuery可伸缩的搜索条

搜索条在我们网站是必不可少的,尤其是在有限的页面空间里,放置一个重要的搜索条是个难题,今天我将结合实例给大家介绍一下如何使用CSS3和jQuery来实现一个可伸缩功能的搜索条. HTML 在需要放置搜索条的页面中放置如下html代码,搜索条#search_bar包含一个form#myform表单,表单中放置一个搜索输入框#search,一个搜索按钮.search_btn以及搜索按钮图标.search_ico. <div id="search_bar" class="se

Swift - 搜索条(UISearchBar)的用法

1,搜索条Options属性还可设置如下功能样式: Shows Search Results Button:勾选后,搜索框右边显示一个圆形向下的按钮,单击会发送特殊事件. Shows Bookmarks Button:勾选后,搜索框右边会显示一个书本的按钮,单击会发送特殊事件. Shows Cancel Button:勾选后,搜索框右边会出现一个“Cancel”按钮,单击会发送特殊事件. Shows Scope Bar:勾选后,会在搜索条下面出现一个分段控制器. 2,下面是一个搜索条的使用样例,

用ASP做一个TOP COOL的站内搜索

该搜索引擎由一个HTM文件一个ASP文件组成,主要是运用FILESYSTEMOBJECT组件来达到目的,功能强大,修改界面以后可以直接拿来使用,当然加上一点自己的东西就更加好了. searchpage.htm 该HTM文件用来传入条件 <HTML> <HEAD> <TITLE>ASP搜索引擎范例</TITLE> </HEAD> <BODY> <CENTER> <FORM METHOD=POST ACTION=&quo

手机影音第七天 视频的播放下一个视频功能实现,视频进度、电量变化的实现

先看下效果图: 在这里,视频进度条会根据视频播放变化,下方的按钮中,播放下一个,上一个都已实现. 代码已经托管到码云上,想下载看的小伙伴可以从下方地址中获取 https://git.oschina.net/joy_yuan/MobilePlayer 1.在这张图上,自定义的显示电量的那一列已经被系统自带的状态栏遮盖,下面就说一下实现方法: 系统电量变化时,系统会发送一个广播,所有对这个广播感兴趣的activity都可以注册广播来接收这个广播.在这里接收系统电量变化,屏幕锁屏.开屏的广播,只能使用

【转】 Pro Android学习笔记(五十):ActionBar(3):搜索条

目录(?)[-] ActionBar中的搜索条 通过Menu item上定义search view 进行Searchable的配置 在activity中将search view关联searchable activity Searchable activity的代码 ActionBar中的搜索条 我们同样可以在Action Bar中嵌入搜索条.在小例子中,我们在action bar中嵌入一个搜索框的widget(称为search view).当我们输入搜索内容,能够在指定的activity中打开(

iOS 搜索条使用详解

在ios开发中搜索条的使用挺常见的,不过之前一直没用到也没细细研究,最近做外包项目的时候刚好用到,在这里记录一下使用的过程,只要理解了原理,其实还是比较简单的!上传的图片有点大,刚好可以看清楚它的使用效果! 我喜欢一步步的解析控件使用过程,其实真正的用心做一件事情是很享受的,虽然现在的社会都很注重效率和回报,这也是中国这种社会环境下难出大师级的人物的很重要的一个因素.扯得有点远了,只是希望国内开发者不要太急功近利,熟练应用本不是难事,一点点积累就好.下面开始搜索条 UISearchBar 和 U