Question

我非常喜欢Gmail创建表单输入和附带“搜索邮件”按钮的方式。

See linked for screenshot

但是，我很难解读Gmails压缩的HTML / CSS代码，以弄清楚他们是如何创建这种外观的。

有人可以帮我弄清楚我需要使用哪些HTML和CSS来重新创建文本输入+伴随“搜索邮件”按钮的组合，就像在Gmail中看到的那样（参见截图并特别注意文本输入的方式）也触摸按钮。）

提前致谢。

更新：

我发现了以下博文，但是我没有足够的信息来重新创建Gmail使用“搜索邮件”按钮完成的操作。

stopdesign.com/archive/2009/02/04/recreating-the-button.html

更新2

即使我从迈克尔那里获得了一些初步的精彩帮助，但我仍然在为如何实现这一点而感到失望。任何更多的帮助，将非常感激。谢谢！

Answer 1

它是一个有两列的表。搜索文本框位于左侧单元格中，“按钮”位于右侧单元格中。

“按钮”是一个div元素，带有一些样式，可以为按钮提供外观和感觉。它有一个背景渐变填充，填充和圆角的右角（但不是左边）。

如果单元格间距和填充为0，则按钮与文本字段齐平。由于按钮左侧没有圆角，但右侧没有圆角，因此它似乎是单个元素的一部分。

背景创建为：

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3));

四舍五入是：

border-bottom-left-radius: 0px 0px;
border-top-left-radius: 0px 0px;
border-bottom-right-radius: 3px 3px;
border-top-right-radius: 3px 3px;

Chrome的开发者工具或FireBug for Firefox等工具可以帮助您使用Inspect Element功能快速完成工作。

Answer 2

您可以使用css位置属性来执行此操作，并使用其技术，即像这样的事情

<div class="button"> 
  <span class="top-right"> </span>
  <span class="bottm-right"></span>
</div> 

//css
.button{ postion:relative ; width : .. ; height:..; top : .. ; left: .. }
.top-right{postion:absolute;top:0;left:100%; width:..;height:..;display:block;;background:url(top_right_corner_img.gif);}

.bottom-right{postion:absolute;top:100%;left:100%; width:..;height:..;display:block;background:url(bottom_right_corner_img.gif);}

使用一些js来添加点击事件..

Google如何创建表单按钮？

2 个答案: