Question

我想在我自己的Facebook应用上设置按钮，就像普通的Facebook用户界面一样，例如标签应如下所示：

enter image description here

应用程序嵌入到iframe中，所以我（我想）不能使用FB中的CSS类？！

Answer 1

当然可以......从facebook查看源代码来源的源代码。或者在Firefox或Opera Dragonfly或任何其他Web开发插件中使用FireBug来获取CSS属性。

但是不要重新创建Facebook，我认为他们不会欣赏它！

Answer 2

您正在寻找的是：http://developers.facebook.com/docs/reference/fbml/tab-item/ 它被称为fb：tabs - 呈现一组标准的Facebook导航标签。必须至少包含一个fb：tab-item。它是FBML - Facebook标记语言的一部分，他们不推荐使用，也没有fb建议你使用也不推荐，最好用css来做，但你可以使用它，只要它有效：）

这里你去了，facebook样式标签的CSS：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Facebook Style Tabs</title>
<style>
body {
    background:#fff;
    font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
    font-size:11px;
    margin:0px;
    padding:0px;
    text-align:left;
}
a {
    color:#3b5998;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
.clearfix:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;
}
html[xmlns] .clearfix {
    display:block;
}
* html .clearfix {
    height: 1%;
}
/**********************************************************NAVIGATION TABS************************************************************/
.fb-tabs {
    border-bottom:1px solid #898989;
    padding:3px 0px;
    /* top and bottom,left and right */
}
.fb-tabs .left_tabs {
    float:left;
    padding-left:10px;
}
.fb-tabs .right_tabs {
    float:right;
    padding-right:10px;
}
.fb-tabitems {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
    text-align: center;
}
.fb-tabitems li {
    display:inline;
    padding:2px 0px 3px;
    /*top,left and right,bottom*/
    background:#f1f1f1 url(http://www.facebook.com/images/components/toggle_tab_gloss.gif) top left repeat-x;
}
.fb-tabitems li a {
    border:1px solid #898989;
    color:#333;
    font-weight:bold;
    padding:2px 8px 3px 9px;
}
.fb-tabitems li a small {
    font-size:11px;
    font-weight:normal;
}
.fb-tabitems li a:focus {
    outline:0px;
}
.fb-tabitems li.first a /*only for the first anchor of the list*/ {
    border:1px solid #898989;
}
.fb-tabitems li a.selected {
    background:#6d84b4;
    border:1px solid #3b5998;
    border-left:1px solid #5973a9;
    border-right:1px solid #5973a9;
    color:#fff;
    margin-left:-1px;
}
.fb-tabitems li.last a.selected {
    margin-left:-1px;
    border-left:1px solid #5973a9;
    border-right:1px solid #36538f;
}
.fb-tabitems li.first.last a.selected {
    border:1px solid #36538f;
}
.fb-tabitems li a.selected:hover {
    text-decoration: none;
}
</style>
</head>
<body>
<div class="fb-tabs clearfix">
    <center>
        <div class="left_tabs">
            <ul class="fb-tabitems clearfix">
                <li><a href="#">NavbarLink1</a></li>
                <li><a href="#" class="selected">NavbarLink2</a></li>
                <li><a href="#">NavbarLink3</a></li>
            </ul>
        </div>
        <div class="right_tabs">
            <ul class="fb-tabitems clearfix">
                <li><a href="#">NavbarLink1Right</a></li>
                <li><a href="#">NavbarLink2Right</a></li>
            </ul>
        </div>
    </center>
</div>
</body>
</html>

来源：http://forum.developers.facebook.net/viewtopic.php?id=86504

风格自己的应用程序，如默认的Facebook设计

2 个答案: