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的標籤

回答

相關問題