搜索邮件按钮是如何实现的？
我正在使用 Firebug，我刚刚看到它是一个带有 css 的 div，但我不明白他们是怎么做到的？
<div id=":ri" class="J-Zh-I J-J5-Ji L3 J-Zh-I-Js-Zq" tabindex="0" role="button" style="-moz-user-select: none;">Search Mail</div>
我正在尝试制作类似的东西，但我只是一个初学者，我想要按钮的效果，但我不明白他们是怎么做到的？即使我不懂CSS，我只是复制这个但没有效果
.num1 {
-moz-border-radius: 2px 2px 2px 2px;
background: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
color: #666666;
cursor: default;
font: 75% arial,sans-serif;
margin: 0 8px 0 0;
outline: medium none;
padding: 3px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.num2{
display: inline-block;
position: relative;
}
.num3{
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-left-width: 0;
margin-left: 0 !important;
}
I am using Firebug, I just saw tha it is a div with css, but I dont get it how they did it?
<div id=":ri" class="J-Zh-I J-J5-Ji L3 J-Zh-I-Js-Zq" tabindex="0" role="button" style="-moz-user-select: none;">Search Mail</div>
I am trying to make something similar but I am just a beginner,I want that effect of the button but I don't get it how they did it? even I don't understand the css, I just copy this but no effect
.num1 {
-moz-border-radius: 2px 2px 2px 2px;
background: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
color: #666666;
cursor: default;
font: 75% arial,sans-serif;
margin: 0 8px 0 0;
outline: medium none;
padding: 3px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.num2{
display: inline-block;
position: relative;
}
.num3{
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-left-width: 0;
margin-left: 0 !important;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这里只是 CSSed div： http://jsfiddle.net/bmWGY/1/
你需要如果你想用这个 div 做点什么的话，还有更多。
Here just the CSSed div: http://jsfiddle.net/bmWGY/1/
You'll need much more if you want to do something with this div.
Gmail 使用 JavaScript 检测
div上的click事件。此外，动态添加/删除类以赋予“按钮”正确的样式。为跨浏览器解决方案正确设置
div元素的样式比尝试设置input和button元素的样式要容易得多。Gmail uses JavaScript to detect the
clickevent on thediv. In addition, classes are dynamically added/removed to give the "button" the correct styles.It is much easier to style a
divelement correctly than to try to styleinputandbuttonelements for a cross-browser solution.它可能是一个简单的 div，附加了 javascript
onclick函数。如果使用 jQuery 或其他框架，则可以使用.click()< 在其他地方定义“操作” /code>或.bind()（对于 jQuery ) 函数。请参阅前面两个链接中提供的示例以了解其实际效果。It's likely a simple div with a javascript
onclickfunction attached. If using jQuery or some other framework, the "action" can be defined elsewhere using the.click()or.bind()(for jQuery) functions. See the examples provided in the preceding two links to see this in action.