1、分块<div>
搜索框:(body部分)
伪装成一个搜索框,一般都是<input>标签+<button>标签
<form method="get" id="searchform" action="http://blog.iliyang.cn/">
<fieldset class="search">
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="关键字" x-webkit-speech>
<button class="btn" title="SEARCH"> </button>
</fieldset>
</form>
其中 x-webkit-speech 支持语音输入功能
<input>标签用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式,输入字段可以是文本字段、
复选框、掩码后的文本控件,单选按钮、按钮等等
<input>标签 placeholder属性
定义与用法:
placeholder 属性提供可描述输入字段预期值的提示信息(hint)
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
注释:placeholder 属性适用于以下的<input> 类型:text,search,url,telephone,email以及password。
延伸另一种搜索框方法:<input>标签的 search属性
实例:实现一个文字搜索功能,要求输入时,键盘回车按钮提示显示为“搜索”。
1、input type=text 并不能达到这种效果,使用type=search可以做到(但需要input type=search外面包上一层带action属性的form)
作者:EvelynJS
链接:http://www.jianshu.com/p/f3878babccee
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明。
a.type=search会有很多默认样式和行为
。会默认下拉框显示搜索历史记录
设置input autocomplete =“off”去掉弹出的下拉框
。输入时自动弹出”X“
取消:
input[type="search"]::-webkit-search-cancel-button{
display: none;
}
。IOS手机输入框是椭圆形
-webkit-appearance: none;
。同时,如果提交搜索时想使用Ajax,那么可以阻止表单的默认行为
container.on('submit', '.input-kw-form', function(event){
event.preventDefault();
})
这是画图软件画的初始图片,后来有人推荐给我一个在线绘图工具感觉很好用https://www.processon.com/
画出来的效果
怎么感觉我画的比较好看哈哈哈哈哈