tab頁簽是Web頁面中經常使用的導航方式之一,通過基于CSS的樣式定義可以輕松地實現各種不同的樣式效果。下面我們將介紹一些基本的CSS樣式屬性,用于定義Tab頁簽的樣式。
/* 定義tab頁簽的樣式 */ .tab{ display: flex; /* 使用flex布局 */ justify-content: center; /* 居中 */ align-items: center; height: 40px; /* 高度 */ background-color: #f5f5f5; /* 背景顏色 */ } /* 定義tab頁簽中單個標簽的樣式 */ .tab-item{ flex: 1; /* 等分寬度 */ text-align: center; /* 居中 */ font-size: 16px; /* 字體大小 */ color: #666666; /* 字體顏色 */ cursor: pointer; /* 光標樣式 */ } /* 定義tab頁簽中當前選中標簽的樣式 */ .tab-item.active{ color: #333333; /* 字體顏色 */ background-color: #ffffff; /* 背景顏色 */ border-bottom: 3px solid #0099ff; /* 底部邊框 */ }
以上代碼定義了一個基本的tab頁簽樣式,包括tab容器、單個標簽和當前選中標簽的樣式。其中,使用了flex布局實現標簽等分寬度并居中顯示,同時指定了標簽的基本樣式,包括字體大小、顏色、光標樣式等屬性。而當前選中標簽的樣式則增加了字體顏色、背景顏色以及底部邊框等屬性。
上一篇tab標簽切換純css