CSS換頁標簽欄是一種常見的網頁設計技巧,它可以讓頁面更加美觀、規范化。下面我們來看一下如何實現這個效果。
<div class="tab-container"> <div class="tab-header"> <ul> <li class="active">標簽1</li> <li>標簽2</li> <li>標簽3</li> </ul> </div> <div class="tab-content"> <div class="active">標簽1的內容</div> <div>標簽2的內容</div> <div>標簽3的內容</div> </div> </div>
以上是CSS換頁標簽欄的基本HTML代碼。我們需要通過CSS來實現標簽欄的樣式和切換效果。
.tab-header ul { list-style: none; display: flex; justify-content: space-between; margin-bottom: 15px; } .tab-header li { padding: 10px; font-size: 18px; font-weight: bold; border: 1px solid #ddd; border-radius: 5px 5px 0 0; cursor: pointer; } .tab-header .active { background-color: #3366cc; color: #fff; border-color: #3366cc; } .tab-content div { padding: 20px; background-color: #f5f5f5; border: 1px solid #ddd; border-top: none; border-radius: 0 5px 5px 5px; } .tab-content .active { display: block; } .tab-content div:not(.active) { display: none; }
以上是CSS代碼,通過它我們可以設置標簽欄和內容的樣式,并實現標簽的切換效果。最后,我們只需要將HTML和CSS整合在一起,就可以獲得一個美觀實用的CSS換頁標簽欄效果了。
上一篇java里面平方和