欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css標簽卡頁

李中冰2年前11瀏覽0評論

在網頁設計中,標簽卡頁(Tab)可以很好地組織信息,使得頁面更加易讀和易操作。CSS是網頁的樣式表語言,其中包含了眾多的樣式標簽,下面我們來介紹CSS標簽卡頁的實現方法。

/* HTML代碼如下 */
  • Tab 1
  • Tab 2
  • Tab 3
Tab 1 content
Tab 2 content
Tab 3 content
/* CSS代碼如下 */ .tabs { display: flex; list-style: none; background-color: #f2f2f2; border-top: 4px solid #4CAF50; margin: 0; padding: 0; } .tabs li { flex: 1; text-align: center; padding: 18px; cursor: pointer; border-bottom: 4px solid #ddd; transition: all 0.3s ease; } .tabs li.active { background-color: white; border-bottom: 4px solid #4CAF50; } .tab-content { margin-top: 20px; } .tab-content .tab-pane { display: none; padding: 20px; border: 1px solid #ddd; } .tab-content .active { display: block; }

在上述代碼中,我們使用了flex布局來對標簽進行排列。每個標簽都是一個li元素,并且設置了樣式來實現選中效果。每個標簽對應的內容在tab-content中也進行了設置,同時也有選中效果。

如果需要添加更多的標簽,只需要在ul標簽中添加更多的li元素,在div.tab-content中添加相應的div.tab-pane元素即可。

總之,CSS標簽卡頁可以幫助我們更好地組織頁面信息,更好地展現數據和功能。以上代碼只是示例,您可以自己添加和修改樣式來實現自己想要的效果。