頁籤設計
by 鍾玉芳, 2011-05-05 11:39, 人氣(3045)
下圖是頁籤的範例:
常見的頁籤設計說明如下:
1. 頁籤框線
透過 .tabBox 和 .tabBox .tab .item 中 border 屬性，改變索引框線的呈現方式
透過 .tabBox 和 .tabBox .tab .item 中 border 屬性，改變索引框線的呈現方式
例如:
.tabBox {border-bottom:1px solid #ff0000;} /* 設定頁籤下方的框線 */
.tabBox .tab .item {
border:1px solid #ff0000; /* 設定頁籤區塊四邊的框線 */
border-bottom:0px; /* 頁籤區塊的下方不設定框線 */
}
.tabBox .tab .item {
border:1px solid #ff0000; /* 設定頁籤區塊四邊的框線 */
border-bottom:0px; /* 頁籤區塊的下方不設定框線 */
}
2. 滑鼠移至頁籤的變化
透過 .tabBox .tab .hover 中的屬性設定，例如:
.tabBox .tab .hover {
background:#0000ff; /* 背景變藍色 */
透過 .tabBox .tab .hover 中的屬性設定，例如:
.tabBox .tab .hover {
background:#0000ff; /* 背景變藍色 */
color:#ffff7f; /* 文字變黃色 */
}
3. 設計目前所在的頁籤
透過 .tabBox .tab .curr 中的屬性設定，例如:
.tabBox .tab .curr {
background:url(圖片網址) no-repeat; /* 設定背景為圖片、不重覆 */
.tabBox .tab .curr {
background:url(圖片網址) no-repeat; /* 設定背景為圖片、不重覆 */
border:0 /* 沒有框線 */
color:#fff; /* 文字是白色 */
padding:6px 17px 20px 17px /* 設定文字的位置 */
}
}
4. 以圖片設計頁籤 (各個頁籤使用不同的圖示)
定義元素的名稱 (例如學校經歷的頁籤名稱為 #tab_school)，透過 background 屬性，改變每個頁籤的樣式
例如:
.tabBox .tab #tab_school {
background:url(圖片網址) no-repeat left; /* 設定頁籤是圖片、不重覆、靠左 */
padding:18px 0px 15px 50px; /* 設定文字的位置 */
}
