当前位置是:帝豪2娱乐 > 服务内容 > 服务内容

input搜索框心得

来源:wehoppe.com 作者:候委 发布时间:2017-09-16 点击量:

  咱们需求制造这么一个查找框:

  首要我先抛出制造这个查找框的细节:

  1)文本输入框要有内暗影。

  2)文本框与按钮要对齐。

  好,咱们如今开端制造,先说一下,最直接的制造方法,文本输入框的内暗影咱们可以用图像来做,用几像素的图像平铺,然后一个DIV层内包括input与button两个标签,大致HTML标签书写如:

  这么写尽管完成了想要的作用,可是咱们会发现,在IE浏览器下,input与button始终会有1像素的错位,如图:

  假如咱们要到达满足的作用,就要用到各IE浏览器的hack,形成咱们将来保护成本的加大,并且,假如暗影用图像的话,像这么的小图会不断增加,假如用CSS3来完成内暗影,咱们的PM肯定会跑来和咱们说,你看浏览器的体现不一致,有的有暗影,有的没有,你要是说咱们只有高浏览器支撑暗影,低版本浏览器不支撑暗影,咱们的PM会说,咱们要的是全浏览器保持一致,坑爹呀,为何就这么执着呢?不过请求严格,才能使咱们前进嘛!

  那咱们就运用另一个方法来完成,首要,咱们的文本框用一个DIV来模仿,然后将input的边框与背景都设置为none,这么就不会呈现错位的景象了;接着咱们就来处理文本帝豪2娱乐平台框的内暗影,咱们用两个DIV来操控,一般像这么的暗影基本上2像素就能到达作用了,所以咱们将X轴的DIV设置上border与下border,Y轴的DIV设置左border与右border,然后定位到用于模仿input的层内,一个完美的input框就制造完成了,暗影CSS代码如下:

  暗影HTML代码如下:

  完成后,这个查找框在视觉上与咱们想要的作用一般无二。




上一篇:智慧社区构建数据体系

下一篇:没有了