易优图标点击弹出搜索框的CSS教程和代码标签调用

小秋同学 12-09 14:22:41 学习园地
摘要: 大家好,今天帮朋友做了一个图标点击搜索框弹出的效果:说实在的 这个效果很普遍,但是单独不管趴出样式,基本都是用不了,我今天整理了这个相对来说比较简单。大家可以看的使用。HTML代码:<a href="javascript:;"摘要: 大家好,今天帮朋友做了一个图标点击搜索框弹出的效果:说实在的 这个效果很普遍,但是单独不管趴出样式,基本都是用不了,我今天整理了这个相对来说比较简单。大家可以看的使用。HTML代码:<a href="javascript:;"

大家好,今天帮朋友做了一个图标点击搜索框弹出的效果:

易优图标点击弹出搜索框的CSS教程和代码标签调用(图1)


说实在的 这个效果很普遍,但是单独不管趴出样式,基本都是用不了,我今天整理了这个相对来说比较简单。大家可以看的使用。


HTML代码:


<a href="javascript:;" title="搜索" class="search_btn"></a>

  <div class="w-nav search_box">

    <div class="search">

      <form action="{eyou:searchurl /}" method="get" onsubmit="return checksearch(this)">

        <input class="text" type="text" name="keywords" value="请输入关键字" onfocus="if(this.value==defaultValue)this.value=''" onblur="if(this.value=='')this.value=defaultValue">

        <input type="hidden" name="channel" value="" />

        <input type="hidden" name="typeid" value="" />

        <input type="submit" title="搜索" class="btn pngFix" value=""/>

      </form>

      <script type=text/javascript>

                jQuery(document).ready(function() {

                    jQuery("#rid").selectbox();

                });

            </script> 

    </div>

  </div>

<script src="{eyou:global name='web_templets_pc' /}/skin/jss/nav.js"></script>

<script src="{eyou:global name='web_templets_pc' /}/skin/jss/jqselect.js"></script>

  <script src="{eyou:global name='web_templets_pc' /}/skin/jss/search.js"></script>

  <link href="{eyou:global name='web_templets_pc' /}/skin/jss/style.CSS" rel="stylesheet">


以上代码通常放在头部文件,当然你也可以放哪里都可以

其中说明的是。上面的3个JS不可缺少。还有一个style.css里面的样式也是不能缺少的。基本这样就可以使用了,JS和CSS文件在附件 大家可以下载使用。

附件一般放在   \template\pc\skin目录里面 


本帖含有附件!帮助1.00学币可下载!!

文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/905.html发布于 12-09 14:22:41
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就施舍一下文章作者

支付宝施舍

微施舍

阅读
分享
加入收藏

发表评论
加载中~