我如何获得此元素的CSS?

时间:2010-04-02 07:42:57

标签: javascript css templates firebug

你去这个网站了吗?向下滚动到“使用按钮元素”。然后第一个黑色按钮叫做“Super Awesome button”

这个完整的CSS是什么? 只有一节课。我想要这一切的所有属性。

有没有办法看到它,只有一个班级?在萤火虫中它有很多东西......我不能把它们放在一起。

5 个答案:

答案 0 :(得分:2)

顶部有一个"Read the blog post »"链接,说明了如何操作。

答案 1 :(得分:1)

哟可以在萤火虫中做到:

button元素有一个类,但其他元素也会影响按钮的视觉效果。以下是来自一个按钮(由Firebug)的所有css属性:

  

.large.awesome,.large.awesome:访问过   {font-size:14px;填充:8px 14px   9px; }

     

.awesome,.awesome:访问过,   .medium.awesome,   .medium.awesome:已访问{   字体重量:粗体;行高:1;   text-shadow:0 -1px 1px rgba(0,0,0,   0.25); }

     

.awesome,.awesome:visited {   -moz-border-radius:5px 5px 5px 5px;   -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);   背景:网址( “/图片/警报的overlay.png”)   repeat-x scroll 0 0#222222;   border-bottom:1px solid rgba(0,0,0,   0.25);颜色:#FFFFFF;光标:指针;显示:内联块;   位置:相对;   文字修饰:无; }

     

a {outline:0 none; }

     

h1,h2,h3,h4,h5,h6,p,blockquote,   pre,a,abbr,首字母缩写词,地址,引用,   代码,img,small,strike,sub,sup,   tt,dd,dl,dt,li,ol,ul,fieldset,   形式,标签,传奇,按钮,表,   标题,tbody,tfoot,thead,tr,th,   td {border:0 none;   FONT-FAMILY:继承;   字体风格:正常;余量:0;   文本对齐:左; }

答案 2 :(得分:0)

如果Firebug输出对您而言过多,您可以阅读顶部链接的blog post,其中说明了如何创建这些按钮。

答案 3 :(得分:0)

这些按钮的CSS既位于页面的头部,又位于名为global.css的外部样式表中。此按钮和所有按钮的大多数视觉更改都是页面顶部的样式,如果要复制此功能,则需要从此页面的头部复制所有css以及.png叠加图像,导致按钮反射到您的页面。请确保您在文档中提及css的原作者,并在到期时给予信任。

希望有所帮助

答案 4 :(得分:0)

您应该从http://zurb.com/stylesheets/layouts/default.css

获取css

然后你应该在你的页面上使用这个css

之后你应该创建按钮:

Super Awesome Button»

就是这样