使用HTML单选框与CSS Flexbox实现标签页滑动切换，通过radio控制面板显隐，结合transform位移和过渡动画完成平滑滑动效果。
实现标签页滑动切换效果，核心是结合 HTML 结构、CSS 动画与 Flexbox 布局。通过控制内容区域的水平位移，配合过渡动画，就能做出平滑的滑动切换效果，无需 JavaScript 也能完成基础版本。
1. 基础 HTML 结构
使用单选框（radio input）来模拟标签切换，利用其“互斥”特性控制不同面板显示：
<div class="tabs">
<input type="radio" name="tab" id="tab1" checked>
立即学习“前端免费学习笔记（深入）”；
<label for="tab1">首页</label>
<input type="radio" name="tab" id="tab2">
<label for="tab2">分类</label>
<input type="radio" name="tab" id="tab3">
<label for="tab3">我的</label>
<div class="tab-content">
<div class="panel" id="panel1">首页内容</div>
<div class="panel" id="panel2">分类内容</div>
<div class="panel" id="panel3">我的内容</div>
</div>
</div>
2. 使用 Flexbox 和 transform 实现滑动
将所有面板横向排列在一行，通过外层容器限制宽度并隐藏溢出，再根据选中标签移动整个内容区域：
3. 可访问性与样式优化
虽然用 radio input 能实现无 JS 切换，但建议加上一些视觉反馈和键盘支持：
- 给选中的 label 添加 active 样式（如加边框或变色）
- 隐藏 input 但保留其功能，不要用 display:none 阻止聚焦
- 为 .panel 设置 scroll-snap-align: start 实现滑动吸附（移动端友好）
- 搭配 touch 事件或 JS 可支持手势滑动，但纯 CSS 版本适合静态内容
基本上就这些。用 CSS 的 transform + Flexbox 控制位移，再借助表单控件的状态管理，就能做出轻量的滑动标签页。适合简单页面或学习 CSS 布局原理。
