CSS3標簽頁是一種能夠在網站中創建多個標簽頁的技術,這樣可以方便地在網站內切換不同的內容和頁面。在CSS3中,有許多可以實現標簽頁樣式的CSS屬性和偽元素,下面我們來看一些常用的例子:
/* 標簽頁容器樣式 */ .tabs { display: flex; /* 使用flex布局 */ align-items: center; justify-content: center; font-family: Arial, sans-serif; } /* 標簽樣式 */ .tab { margin: 0 10px; /* 間距 */ padding: 10px 20px; /* 內邊距 */ background-color: #EEE; /* 背景色 */ color: #333; /* 文字顏色 */ cursor: pointer; /* 鼠標指針樣式 */ } /* 激活標簽樣式 */ .tab.active { background-color: #333; /* 激活時背景色 */ color: #EEE; /* 激活時文字顏色 */ } /* 標簽內容樣式 */ .tab-content { display: none; /* 初始隱藏 */ padding: 20px; border: 1px solid #EEE; border-top: none; } /* 激活標簽內容樣式 */ .tab-content.active { display: block; /* 激活時顯示 */ }
上面的代碼中使用了強大的flex布局來保證標簽在水平方向上的居中,并且監聽了鼠標事件來激活對應的標簽頁內容。可以根據實際需求進行調整和修改。