Facebook的风格YUI的标签

有谁知道如何风格YUI的Tabview组件[1]，所以它会看起来像Facebook标签[2]？Facebook的风格YUI的标签

我正在使用YUI 2.一个非常粗略的尝试在下面（我修改了Devtacular [3]中给出的示例代码）。但它不处理选项卡之间的间距，也不处理选定选项卡周围的外部线条。

谢谢！

.yui-navset .yui-nav a { 
    padding: 8px; 
    background-color: #d8dfea; 
    color: #3b5998; 
    font-weight: bold; 
    font-size: 12px; 
    float: left; 
    margin-right: 4px; 
    text-decoration: none; 
    cursor: hand; 
} 
.yui-navset .yui-nav a:hover { 
    background-color: #3b5998; 
    color: #ffffff; 
    text-decoration: none; 
} 
.yui-navset .yui-nav .selected a { 
    background-color: #ffffff; 
    color: #333333; 
    text-decoration: none; 
}

来源

2010-03-21 Ruggiero Spearman

也许这将有助于澄清我想要什么。我对CSS不是很有经验。尽管如此，我开始修改yui-sam-skin CSS来适应我的需求。我想知道有没有人做过，所以我可以节省很多时间。 – 2010-03-21 11:39:54

我结束了以下CSS。这是来自YUI文档的改版，包含试用和错误，可能包含非常愚蠢的CSS错误，但标签看起来像FB标签。

/* .yui-navset defaults to .yui-navset-top */ 
.yui-navset .yui-nav, 
.yui-navset .yui-navset-top .yui-nav { /* protect nested tabviews from other orientations */ 
    border-color: #d8dfea; 
    border-style:solid;/* #2647a0; /* color between tab list and content */ 
    border-width:0 0 1px 0; 
    Xposition:relative; 
    zoom:1; 
    padding-left: 4px; 
} 

.yui-navset .yui-nav li, 
.yui-navset .yui-navset-top .yui-nav li { 
    margin:0 0.16em 0 0; /* space between tabs */ 
    padding: 0px; 
    zoom:1; 
} 

.yui-navset .yui-nav .selected, 
.yui-navset .yui-navset-top .yui-nav .selected { 
    margin:0 0.16em -1px 0; /* for overlap */ 
} 

.yui-navset .yui-nav a, 
.yui-navset .yui-navset-top .yui-nav a { 
    background-color:#d8dfea; 
    border:solid #a3a3a3; 
    border-width: 0px; /*top right bottom left*/ 
    color:#3b5998; 
    text-decoration:none; 
    padding: 4px 8px; 
} 

.yui-navset .yui-nav a em, 
.yui-navset .yui-navset-top .yui-nav a em { 
    border:solid #a3a3a3; 
    border-width:1px 0 0; 
    cursor:hand; 
    padding:0.25em .75em; 
    left:0; right: 0; bottom: 0; /* protect from other orientations */ 
    top:-1px; /* for 1px rounded corners */ 
    position:relative; 

} 

.yui-navset .yui-nav .selected a, 
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */ 
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */ 
    background-color: #ffffff; 
    color: #333333; 
    text-decoration: none; 
    border-width: 1px 1px 0px 1px; 
    border-style: solid; 
    border-color: #d8dfea; 
} 

.yui-navset .yui-nav a:hover, 
.yui-navset .yui-nav a:focus { 
    background-color: #3b5998; 
    color: #ffffff; 
    text-decoration: none; 
} 

.yui-navset .yui-nav .selected a { 
    padding: 8px 8px; /* raise selected tab */ 
} 

.yui-navset .yui-nav .selected a, 
.yui-navset .yui-nav .selected a em { 
    border-color: #d8dfea; 
    /*border-color:#243356; /* selected tab border color */ 
} 

.yui-navset .yui-content { 
    background-color: #ffffff;/*#edf5ff;/*#D8DFEA;/*#edf5ff; /* content background color */ 
} 

.yui-navset .yui-content, 
.yui-navset .yui-navset-top .yui-content { 
    /*border:0px solid #808080; /* content border */ 
    padding:0.25em 0.5em; /* content padding */ 
    border-bottom-width: 1px; 
    border-bottom-color: #d8dfea; 
    border-bottom-style: solid; 
} 

.yui-navset .yui-content h2 { 
    background-color: #ffffff; /*#edf5ff;*/ 
}

来源

2010-04-01 09:18:12

Facebook的风格YUI的标签

回答

相关问题