脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → search搜索框写法

深入浅析search 搜索框的写法

 更新时间：2016年08月02日 09:43:27   作者：当背包没有包  
本文以京东搜索框为例给大家浅析search 搜索框的写法，本文介绍的非常不错，需要的朋友可以参考下

关于搜索框，写法有很多种，搜索框这一块是一个比较细的活，要先计算好他的高、宽；

下面我就以京东搜索框为例，给大家浅析一下。

上面就是最终search框效果图。

先送出代码>>>>>>

<span style="color: rgb(255, 0, 255); font-size: 18pt;"><strong>HTML 标签：</strong></span> 
<div class="center_child1">
<form>
<input type="text" name="search" placeholder="search练习">
<button>搜索</button> -------像京东是用的button标签，其他网站，
如百度：是用的<input type="submit" name="" > 标签。
</form>
</div> 
CSS 样式：.center_child1{
width:538px;
height:36px;　　 overflow:hidden;
border:2px solid #BD1D17;
}
.center_child1 input{
width:456px;
height:24px; float:left; padding:6px 2px; ----------------对 input 内补白，使其字体不紧贴 border 边框,增加美感。 background-color:transparent; -------让 input 标签的背景颜色为透明色。
border:none; -----------------去 input 标签，原有的边框属性。
outline:none;
font-size:16px;
}
.center_child1 button{
width:76px;
height:36px;
float:right;
background:#BD1D17;
border:none;
color:#fff;
font-size:15px;
}

总结：一个搜索框主要有三部分，一个是输入框部分（左边的），另一个是搜索按钮部分（右边的），还有就是一个包含它们两个大的 div ；

1、先对大的 div 设置宽高、边框颜色，这个要根据个人需求事先计算好。

2、分别对 input（输入框部分）左浮动；对 button（按钮部分）右浮动，记得对大的div使用overflow：hidden；属性；

3、调整 input 的高度，宽度，记得用 padding 撑起它的高度值，这样不至于输入字体时紧贴边框，增加美感 ；宽度值，左边可稍微加点 padding 值，为了美感。

以上所述是小编给大家介绍的search 搜索框的写法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JavaScript原型和原型链详解

    JavaScript原型和原型链详解

    在面向对象的编程语言中,类和对象的关系是铸模和铸件的关系,对象总是从类创建而来,比如Java中,必须先创建类再基于类实例化对象,这篇文章主要介绍了JavaScript原型和原型链的相关知识,需要的朋友可以参考下
    2024-05-05
  • JS如何判断对象是否包含某个属性

    JS如何判断对象是否包含某个属性

    这篇文章主要介绍了JS如何判断对象是否包含某个属性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 去掉gridPanel表头全选框的小例子

    去掉gridPanel表头全选框的小例子

    这篇文章介绍了去掉gridPanel表头全选框的小例子，有需要的朋友可以参考一下
    2013-07-07
  • JS实现简单的下雪特效示例详解

    JS实现简单的下雪特效示例详解

    很多南方的小伙伴可能没怎么见过或者从来没见过下雪，这篇文章小编给大家带来一个小Demo，模拟了下雪场景。感兴趣的小伙伴快来跟随小编一起学习一下吧
    2021-12-12
  • 善用事件代理，警惕闭包的性能陷阱。

    善用事件代理，警惕闭包的性能陷阱。

    关于JS性能优化中的冰山一角：事件代理、警惕闭包。其实本文有一个文章已经说到，闭包如何产生，闭包的作用；
    2011-01-01
  • 详解 Map 和 WeakMap 区别以及使用场景

    详解 Map 和 WeakMap 区别以及使用场景

    这篇文章主要介绍了详解 Map 和 WeakMap 区别以及使用场景,Map本质上是一个键值对的集合,WeakMap 只能将对象作为键名,下面来一起俩姐更多详细内容吧，希望这一篇文章能让你对 Map 有更好的理解，或者能够帮你理解 Map 和 WeakMap
    2022-01-01
  • 微信小程序自定义状态栏

    微信小程序自定义状态栏

    这篇文章主要为大家详细介绍了微信小程序自定义状态栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • JS Array创建及concat()split()slice()的使用方法

    JS Array创建及concat()split()slice()的使用方法

    下面小编就为大家带来一篇JS Array创建及concat()split()slice()的使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 详解JS函数重载

    详解JS函数重载

    本文主要介绍了利用JavaScript中的特殊对象arguments来模拟函数重载的解决方案，非常的实用，给需要的小伙伴参考下
    2014-12-12
  • ionic环境配置及问题详解

    ionic环境配置及问题详解

    这篇文章主要为大家详细介绍了ionic环境配置及问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论