纯HTML、CSS制作Tab页面浏览(国外youtube分享)
纯HTML、CSS制作Tab页面浏览(国外youtube分享)
影片来源 h ttps://www.youtube.com/watch?v=oLqdy95LZSw&list=WL&index=72&t=259s
近期执行一个小Project，主要是复制网页版VS code的配置当作个人Profolio的简介想法，但是遇到了Tab分页的画面效果呈现，初步想法是应该是要用JavaScript才有办法实现，Google之后，发现基本上不外乎JavaScript DOM、JQuery的方式去实现，于是又找了一下youtube，发现有纯HTML+CSS的呈现方法，简单易懂，也为我技能书很薄的CSS新增了不同的想法，所以纪录逐字分析一下。
Images from ****YouTube by iEat 网站
正文开始，先基础做出HTML，使用
Images by HCW
然后就是CSS的部分，除了颜色、排版以外，基本上有几个步骤
－radio样式取消
－运用order顺序把所有的
－[type="radio"] :checked + label +.tab { display : block ;}
－制定[type=”radio”] :checked + label 的背景颜色
看起来会有点奇怪是因为我原本用的是Sass 他watching之后的产出，不是原生的CSS，但是基本上按照影片内的步骤可以看到成果渐渐变成想要的样子，有时间再更新图样比较好理解，但是基本上大概就是这样。
关于CSS 里面的＋号跟order，可以参考MDN文件，有说明可以参考运用。
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
果然网路大神还是多多，每种语言给每个人方法跟理解都不一样，这个纯粹是CSS做出分页导览，但是至于想要在分页多加取消键(x)，还是需要用JavaScript去实现比较实际。
(第二次打文章语意上还比较不纯熟，还请见谅。)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
