分步骤介绍如何设计一个带选择和提示功能的检索框

好多网站的搜索输入框设计的很漂亮,接下来笔者将逐步介绍如何设置自己的搜索输入框.

设计效果图:

该效果主要采用CSS样式与Javascript进行实现.不得不说CSS样式功能很强大,而且效果很炫,笔者推荐一本书叫《CSS禅意花园》,你可以从中感悟CSS的唯美之处.

我们分步来介绍如何实现.

第一步：如何实现带提示信息的输入框

我们知道输入框在html中使用<input type=”text” >标签定义,针对输入框我们常用的事件为触焦,和脱焦.

我们从其它网站这块应用可以看出,当输入框获得焦点时提示信息就消失了,当输入框失去焦点时输入框中的提示信息就出现了.

所以我们只需要对不同的事件,添加不同的CSS样式,效果就可以完成了.

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gbk">
    <title>焦点事件特效-搜索框</title>
    <style>
        .init{
            color:gray;
            /*font-style:italic;*/
            width:200px;
        }
        .highlight{
            color:black;
            /*font-style:normal;*/
            width:200px;
        }
    </style>
    <script>
        function txt_onfocus(tag){
            if(tag.value==tag.defaultValue){
                tag.value='';
                tag.className='highlight';
            }
        }
        function txt_onblur(tag){
            if(tag.value==''){
                tag.value=tag.defaultValue;
                tag.className='init';
            }
        }
    </script>
</head>

<body>
    <input type="text" onblur="txt_onblur(this)" onfocus="txt_onfocus(this)" value="关键词" class="init">
    <input type="button" value="找找看">
</body>
</html>

效果图如下:

接下来我们在这个基础上进行更完美的设计.

第二步:设计带选项的检索框

先写好HTML页面如下,进行相关数据展示,然后再进行CSS样式进行布局

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
      <meta http-equiv="Content-Type" content="text/html;charset=gbk">
      <title>焦点事件特效-搜索框</title>

 </head>

 <body>
    <div class="searchdiv">
        <div class="searchTool">
            <form onsubmit="return searchFooterFunc();">
                <span class="choose" hoverable="true">
                    <span class="chooseList">全部</span>
                    <b></b>
                    <div class="choosePop">
                        <ul>
                            <li><a href="#" value="0">全部</a></li>
                            <li><a href="#" value="1">作品</a></li>
                            <li><a href="#" value="2">经验</a></li>
                            <li><a href="#" value="3">作者</a></li>
                        </ul>
                    </div>
                </span>

                <input type="text" onblur="txt_onblur(this)" onfocus="txt_onfocus(this)" value="请输入关键词" class="searchTextInit">
                <input type="button" value class="searchBtn">
            </form>
        </div>
    </div>
 </body>
</html>

效果图如下:

很丑吧,的确很丑,如果我们看到的那些网站去掉CSS样式,就一个词形容：惨不忍睹.

接下来我们用CSS进行布局,样式设计.CSS代码如下:

  <style>
        body, button, input, select, textarea {
            font: 12px/1.6 Verdana, Helvetica, sans-serif;
        }
        .searchdiv{    
            height:38px;
            padding:8px 0 0 0;
            background:#ffba00;
            border-top:1px solid #3e3e3e;
            border-bottom:1px solid #3e3e3e;
            text-align:center
        }
        /*.footerSearch .searchBar{margin:0 auto;}*/

        .searchTool{    
            width:360px;
            height:32px;
            line-height:32px;
            margin:0px auto 0 auto; 
            text-align:left; 
            background:#fff;
        }
        .choose{
            float:left;
            cursor:pointer;
            height:32px;
            width:52px; 
            display:inline-block;
            position:relative;
            line-height:32px;
            font-size:12px; 
            text-align:center;
            padding-right:10px;
        }
        /*下拉箭头样式*/
        .choose b{
            position:absolute;
            right:8px;
            top:14px;
            width:0;
            height:0;
            border-width:4px 4px;
            border-style:solid;
            border-color:#868686 #fff #fff;
            font-size:0;line-height:0;
        }
        
        .searchTextInit{
            height:32px;
            line-height:32px;
            border:0;
            border-left:1px solid #eca128;
            padding:0 8px;
            font-size:12px;
            color:#333;
            color:gray;
            width:250px; 
            background:#fff;
            float:left
        }
        .searchTextInput{
            height:32px;
            line-height:32px;
            border:0;
            border-left:1px solid #eca128;
            padding:0 8px;    /*上 右 下 左*/
            font-size:12px;
            color:black;
            width:250px; 
            background:#fff;
            float:left
        }
        .searchBtn{
            float:left;
            height:24px;
            width:24px; 
            background:#fff 
            url(images/bs.png) no-repeat center 0px;
            cursor:pointer;
            border:0;
            margin:4px 0 0 4px;
        }

        .searchBtn:hover{
            background:#fff url(images/bs.png) 
            no-repeat center -24px;
        }

        .choose ul{
            border-bottom:1px solid #eca128;
            list-style:none;
            width:64px;
            padding:0px;
        }
        
        .choose:hover b{border-color:#868686 #fff #fff;}
        
        .choose:hover .choosePop{ 
            display:inline-block;
        }
        
        .choosePop{ 
            display:none;
            width:64px; 
            position:absolute;
            left:-1px;
            top:20px;
        }
        /*鼠标离开列表上效果*/
        .choosePop ul li a:link,.choosePop ul li a:visited{
            color:#666;
            background:#fff;
        }
        /*鼠标移动到列表上效果*/
        .choosePop ul li a:hover,.choosePop ul li a:active{
            color:#2d2d2d;
            background:#ffba00;
        }
        .choosePop ul li{
            border-left:1px solid #eca128;
            border-right:1px solid #eca128;
            line-height:24px;
        }
        .choosePop ul li a{
            display:block;
            font-size:12px;
            text-decoration:none;
        }
        
      </style>

这下我们看一下效果

第三步:整合并完善效果

然后将第一步的效果进行整合.即可得到效果图所示的漂亮的检索框了.

转载请注明出处:[http://www.cnblogs.com/dennisit/archive/2013/03/20/2970976.html]

posted @ 2013-03-20 13:22 苏二阅读(1885) 评论(9) 编辑收藏举报

刷新页面返回顶部