【发布时间】:2010-04-02 07:42:57
【问题描述】:
你去这个网站吗?向下滚动到“使用按钮元素”。然后第一个黑色按钮叫做“Super Awesome button”
完整的 CSS 是什么? 就一节课。我想要这个的所有属性。
有没有什么办法可以看到,只有一节课?在萤火虫中它有很多东西......我不能把它们放在一起。
【问题讨论】:
标签: javascript css templates firebug
你去这个网站吗?向下滚动到“使用按钮元素”。然后第一个黑色按钮叫做“Super Awesome button”
完整的 CSS 是什么? 就一节课。我想要这个的所有属性。
有没有什么办法可以看到,只有一节课?在萤火虫中它有很多东西......我不能把它们放在一起。
【问题讨论】:
标签: javascript css templates firebug
顶部有一个"Read the blog post »" 链接,说明如何操作。
【讨论】:
你可以在萤火虫中做到这一点:
按钮元素有一个类,但其他元素也会影响按钮的视觉外观。以下是一个按钮的所有 css 属性(由 Firebug 提供):
.large.awesome, .large.awesome:visited {字体大小:14px;填充:8px 14px 9像素; }
.awesome, .awesome:visited, .medium.awesome, .medium.awesome: 访问过 { 字体粗细:粗体;行高:1; 文本阴影:0 -1px 1px rgba(0, 0, 0, 0.25); }
.awesome, .awesome:visited { -moz-边框半径:5px 5px 5px 5px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5); 背景:url(“/images/alert-overlay.png”) 重复-x 滚动 0 0 #222222; 边框底部:1px 实心 rgba(0, 0, 0, 0.25);颜色:#FFFFFF;光标:指针;显示:内联块; 位置:相对; 文字装饰:无; }
a { 大纲:0 无; }
h1,h2,h3,h4,h5,h6,p,块引用, pre、a、abbr、首字母缩写词、地址、引用、 代码,img,小,罢工,子,sup, tt,dd,dl,dt,li,ol,ul,字段集, 表格、标签、图例、按钮、表格、 标题, tbody, tfoot, thead, tr, th, td {边界:0无; 字体家族:继承; 字体样式:正常;边距:0; 文本对齐:左; }
【讨论】:
如果 Firebug 输出对您来说太多,您可以阅读顶部链接的 blog post,其中解释了如何创建这些按钮。
【讨论】:
这些按钮的 CSS 位于页面头部和名为 global.css 的外部样式表中。这个按钮的大部分视觉变化和所有按钮都是页面在页面头部的样式中,如果你想复制这个功能,你需要从这个页面的头部复制所有的 css 以及导致按钮反射到您的页面中的 .png 覆盖图像。不过,请确保您在文档中提及 css 的原始作者,并在应有的地方注明。
希望有帮助
【讨论】:
你可能应该从http://zurb.com/stylesheets/layouts/default.css获取css
那么你应该在你的页面上使用这个 css
之后你应该创建按钮:
超级棒的按钮 »
就是这样
【讨论】: