【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 
演示请查看RunJS：
http://sandbox.runjs.cn/show/us82aiml
需要完成的功能点包括：
- 不同页面，tab数是不固定的，所以每个tab的宽度需要自适应，比如2个时各占1/2，3个时1/3，四个时1/4，默认是1/3。tab数超出4个时，会折行显示。这个是通过“元素范围选择器”来实现的，即综合利用
nth-child、nth-last-child、first-child、last-child来组合实现。 - tab之间，可能有分界线。如果通过margin实现，很容易导致不合理的折行，因此利用border模拟分隔符的效果。此时需要设置盒模型为border-box，并且不支持完全透明效果。
- 屏幕向下滚动足够距离时，自动吸附到顶部（固定定位）。通过
fixed样式实现。 - 固定定位状态下，导航栏可以“变身”为另一种形式，也可以不变。通过
fixed+multi组合样式实现。 - 变身模式下，支持折叠和展开效果。通过
fixed+fold组合实现。 - 变身模式下，展开层的tab列表和原本的tab列表是一一对应的，只是样式不同。通过初始化时复制一份拷贝，外加独立
multi样式重定义实现。 - 切换tab时，需要保持两个列表状态同步更新。通过类似于
jQuery.index()方法检索当前tab的顺序。
需要达成的目标是：
- DOM结构尽可能简单明晰。
- 展开、折叠、变形都通过CSS定义，JS仅仅需要在合适的时机添加或删除一个
class。 - 通过细粒度的样式定义，方便各个页面自定义视觉效果。
最后，不得不说，css3的伪类，太强大了！
参考链接：
- http://www.w3cplus.com/css3/using-css-mod-queries-with-range-selectors.html
- http://alistapart.com/article/quantity-queries-for-css
来源：oschina
链接：https://my.oschina.net/u/2324376/blog/790024