html简单组件（三）：简洁美观的搜索框

搜索框效果图：

HTML代码：

     <div class="main"><div class="pannel-div search"><input type="text" class="in" id="in" placeholder="请输入查询内容" /><button class="btn_search" onclick="showInput()">搜索</button></div></div>

jquery代码：

         function showInput(){var val = $("#in").val();alert(val);}

CSS样式：

CSS样式单独为文件，在html中引用，文件名为：inputt.css

.main{width:100%;
}
.pannel-div{width: 450px;float: left;height: 100%;margin: 50px auto;
}
.search .in{width:300px;height:36px;border:2px solid blue;padding-left: 10px;border-radius: 0px;outline:none;font:16px/34px "microsoft yahei";
}
.search .btn_search{background:blue;width:80px;height:42px;color:white;border-radius: 0px;border:none;outline:none;font-size: 16px;
}

HTML+jquery+CSS完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html+jquery简洁美观的搜索框</title><link rel="stylesheet" type="text/css" href="css/inputt.css"><script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body><div class="main"><div class="pannel-div search"><input type="text" class="in" id="in" placeholder="请输入查询内容" /><button class="btn_search" onclick="showInput()">搜索</button></div></div><script type="text/javascript">function showInput(){var val = $("#in").val();alert(val);}</script></body>
</html>

完整代码下载链接为：https://download.csdn.net/download/qq_26666947/13990528

html简单组件（三）：简洁美观的搜索框相关推荐

实现搜索框记录搜索历史_三个案例告诉你：“搜索框”该如何设计？
不管是在2C还是2B产品,"搜索"是产品中最常见且必不可少的功能模块之一.对于用户来说,在众多功能模块和信息层级中如何快速定位到目标,通过输入已知的关键词进行搜索是最便捷的方式,没 ...
从结构、类型和状态3个方面，帮你掌握搜索框设计
我们在工作和生活中经常会用到搜索框,比如进入一款电商平台,我们需要去搜索自己想买的东西,就可以依靠搜索框完成这一动作,所以搜索框的设计也是重中之重:本文作者分享了关于从三个方面设计搜索框,我们一起来了 ...
站长工具|百度搜索框提示功能
百度向站长开放免费"百度搜索框"代码和"百度搜索框提示"代码.只需进行简单的设置, 即可将" 百度搜索框( 带提示功能)"功能快速加入到您的 ...
百度搜索框代码（有下拉提示的）
根据不同类型的网站需求,我们一共提供三种引入方式供您选择: ·简单方式--方便的将"百度搜索框(带提示功能)"直接加入到您的网页中. 将以下代码加入到您的网页中,即可获得带有&qu ...
【项目】实现网页搜索框功能
一.实现搜索框的部分代码 [注:涉及api接口和中后台数据交互] 1. 最终呈现形式: 2. 代码实现: HTML文件中: <div class=&quo ...
Android 系统搜索框（有浏览记录）
实现Android 系统搜索框(有浏览记录),先看下效果: 一.配置搜索描述文件要在res中的xml文件加创建sreachable.xml,内容如下: <?xml version=" ...
ios UISearchBar搜索框的基本使用
摘要: 小巧简洁的原生搜索框,漂亮而易用,如果我们的应用没有特殊需求,都可以使用它. iOS中UISearchBar(搜索框)使用总结初始化:UISearchBar继承于UIView,我们可以像创建 ...
android 系统搜索框(有浏览记录),Android 系统有浏览记录搜索框
一.配置搜索描述文件要在res中的xml文件加创建sreachable.xml,内容如下: xmlns:android="http://schemas.android.com/apk/re ...
Windows10 搜索框如何打开/关闭
当前 Windows10 的预览版已经确定会把 Cortana 语音助手集成在 PC 版系统中,让它成为我们日常生活与办公的助手.由于系统会默认把与 Cortana 集成的搜索框显示在开始菜单里,可能 ...

html简单组件（三）：简洁美观的搜索框

html简单组件（三）：简洁美观的搜索框

HTML代码：

jquery代码：

CSS样式：

HTML+jquery+CSS完整代码

html简单组件（三）：简洁美观的搜索框相关推荐

最新文章

热门文章