定义静态结构

定义外层容器的样式

使用弹性盒布局，居中container，使用--自定义css样式，container宽度使用calc计算出来

这里有几个自定义的样式：

1. --navtab-width 这个就是container容器的宽度
2. --navtab-item-width 这个是为了计算容器伪类，也就是：：after平移的距离
3. --navtab-overlay-width 这个是伪类的宽度
4. --active-index 这个是当前li的索引，那一个高亮这里显示的就是对应的索引

定义伪类的样式

定义ul li 的样式

使用transition: 0.5s ease; 动画过渡，使其动画更加流畅

初始化参数

点击动态改变索引

因为比较方便，所以是使用react写的，这样就不用操作dom了

技术点总结：

1.这里使用了overflow障眼法技术，外层容器固定好宽度，然后overflow：hidden,里层容器超过这个宽度，就好隐藏超过的部分，这样就形成了不规则矩形

2.使用css自定义样式，结果cale属性，可以动态在css里面计算宽度