HTML+CSS TAB导航栏

这段代码实现了一个名为"Tab导航栏"的效果，它是一个基于CSS的导航栏，包含五个选项卡，每个选项卡都有一个带有渐变背景色的滑块，当用户点击选项卡时，滑块会滑动到相应的位置。同时，选中的选项卡会变为白色，未选中的选项卡会变为灰色。

Code

html

css

实现思路拆分

这段代码是设置所有元素的外边距和内边距为0，并且使用 border-box 盒模型。

这段代码是设置body元素的高度为100vh，使其占据整个视口的高度。同时，使用 flex 布局使其子元素水平和垂直居中。最后，设置背景为一个线性渐变。

这段代码是设置一个名为"wrapper"的元素的宽度、高度、行高、背景颜色、阴影和圆角。

这段代码是设置一个名为"nav"的元素的布局为flex，并且设置其相对定位。

这段代码是设置一个名为 "label" 的元素的布局为flex，并且设置其相对定位和 z-index 属性。同时，设置光标为指针。

这段代码是设置一个名为"a"的元素的相对定位和 z-index 属性。同时，设置字体颜色、字体大小、字体加粗和文本装饰为无。

这段代码是设置一个名为"i"的元素的字体大小和外边距。

这段代码是设置一个名为 "input" 的元素的显示属性为 none ，即隐藏该元素。

这段代码是设置一个名为 "tab" 的元素的绝对定位、高度、宽度、左侧和底部位置、背景颜色和圆角。同时，设置过渡效果。

这段代码是设置选中的选项卡的字体颜色为白色，并且设置过渡效果。

这段代码是设置选中的选项卡的滑块的位置。当选中 "comment" 选项卡时，滑块会向右移动20%的距离，以此类推。

本文共 496 个字数,平均阅读时长 ≈ 2分钟