色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css換頁標簽欄效果

謝海陽1年前6瀏覽0評論

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換頁標簽欄效果了。