CSS3作為一種新的網頁設計領域的技術，提供了許多新的實現方式，可以為用戶帶來更好的體驗。其中，CSS3 Tab效果就是一種非常常見且美觀的設計方式。
<!-- HTML代碼 --> <div class="tab-box"> <ul class="tab-nav"> <li class="active">Tab1</li> <li>Tab2</li> <li>Tab3</li> </ul> <div class="tab-content"> <div class="active tab-item"> Content1 </div> <div class="tab-item"> Content2 </div> <div class="tab-item"> Content3 </div> </div> </div>
上述代碼就是Tab的HTML結構，包含一個包裹容器
，一個包裹標簽的導航
- 以及一個包裹內容的容器
。
接下來，就可以使用CSS3中的屬性進行Tab效果的實現，以下就是相應的CSS3代碼：
/* CSS代碼 */
.tab-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
.tab-nav li {
width: 33.333%;
text-align: center;
line-height: 50px;
cursor: pointer;
color: #666;
}
.tab-nav li.active {
color: #f90;
border-bottom: 2px solid #f90;
}
.tab-content .tab-item {
display: none;
padding: 20px;
border: 1px solid #f90;
}
.tab-content .active {
display: block;
}在上述代碼中，設置了導航標簽的布局方式為flex，使用了有重要意義的狀態類.active，以及對顏色、邊框等進行設置，最終實現了美觀的Tab效果。
下一篇orc php 代碼