【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

工作中实用代码之搜索栏(赶紧收藏)

原创 2017年01月02日 22:38:08
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框</title>
    <style>
        *{margin: 0;padding: 0;font-family: "微软雅黑";}
        input{outline: none;border: 0;}
        .search_box{ width: 500px; height: 35px; border:2px solid teal; margin: 100px auto; font-size: 14px;}
        .search_box input,.search_box label{ height: 35px; line-height: 35px; padding:0 10px;}
        .search_box .search_txt{float: left; width: 420px; position: relative; overflow: hidden;}
        .search_box .search_txt input{ width: 100%; position: relative; background: transparent;}
        .search_box .search_txt label{ position: absolute; top: 0; left: 0; width: 100%; color: #999;}
        .search_box .search_btn{ float: left; width: 80px; background: teal; font-size: 16px; color: #FFF; cursor: pointer;}
    </style>
</head>
<body>
    <div class="search_box">
        <div class="search_txt">
            <label>请输入需要搜索的内容</label>
            <input type="text" value=""/>
        </div>
        <input type="button" value="搜&nbsp;索" class="search_btn"/>
    </div>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        var temp = 0;
        $(".search_txt input").focus(function(){
            $(this).siblings().hide();
        });
        $(".search_txt input").blur(function(){
            if($(this).val() ==""){
                $(this).siblings().show();
            }
        });
    </script>
</body>
</html>

效果图:
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

如何测试一个搜索框

以百度搜索框为例,需从以下几个方面进行考虑:

简单搜索框的制作

最近刚刚学了CSS,一直没怎么实践,今天就随手写一个比较好看的搜索框,通过Css来实现。虽然前端的工作大多是由前端设计师来完成的。但是这个也还是不错的,和大家分享一下。 search bo...

iOS开发-搜索栏UISearchBar和UISearchController

作者:FlyElephant 出处:http://www.cnblogs.com/xiaofeixiang iOS中UISearchDisplayController用于搜索,搜索栏的重要性我们就...

android搜索框功能实现

这里实现的是搜索框时时查询,代码中是在数据库中使用的模糊查询; 整个布局使用的是线性布局,搜索框又是一个线性布局(里面包含一个相对布局和一个TextView,相对布局里面有一个EditText和Ima...

搜索栏动画效果

源码地址

实现toolbar上的搜索栏

先看一下效果图:点击搜索图标之前和点击之后                                                 步骤:1.利用最新版的Android Studio生成一个...

实现百度搜索栏代码

实现百度搜索栏代码 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">        搜索词自动完成    #search{  ...

Win7实用技巧(一):去除搜索栏的搜索记录

Win7的搜索功能强大了不少,但是使用过后会留下烦人的搜索记录,如下图:     接下来,笔者将为读者介绍如何去掉烦人的搜索记录。    第一步: 按快捷键Win+R,输入“gpedit...

删除IE8浏览器收藏夹和搜索栏

Ie8搜索栏实在碍事,如果使用的是宽屏就更加郁闷了,整个占据了一行,非常影响外观,那么我们今天就将他修理一下,网上提供了一些解决方案,但大多过于复杂,现在需要修改注册表文件,代码如下: Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Internet Explorer\Infodelivery\Restrictions] "NoSearchBox"=dword:00000001 [HKEY_CURRENT_USER\Software\Policies

零行代码把搜索栏searchBar的英文-cancel改为中文-取消

啊啊,标题有点哇众取宠了. 不说了,直接看方法,如下: info.plist文件 里修改Localization native development region,点击最右边,选择属性为chin...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)