CSS實(shí)現(xiàn)Chrome Tab樣式可以讓網(wǎng)站更加美觀,用戶體驗(yàn)更佳。下面的代碼是一個(gè)簡(jiǎn)單的例子:
.tab { display: inline-flex; margin: 0; padding: 0; list-style: none; border-bottom: 2px solid #ddd; } .tab li { margin-right: 10px; padding: 10px; font-size: 16px; border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: #fff; color: #777; cursor: pointer; } .tab li.active { border-top: 2px solid #2ecc71; background-color: #2ecc71; color: #fff; }
以上代碼中,我們使用了列表的格式來(lái)實(shí)現(xiàn)Chrome Tab樣式。通過(guò)給li元素添加不同的類名,可以實(shí)現(xiàn)選中和未選中的標(biāo)簽樣式不同。
此外,還可以結(jié)合JavaScript代碼,實(shí)現(xiàn)動(dòng)態(tài)添加和移除標(biāo)簽頁(yè)的功能。