介绍
这个资源把“HTML 化学周期表”落成可直接打开的前端页面，首屏包含元素网格、分类筛选按钮和详情介绍卡片，适合教育站、科普专题或课堂演示直接使用。
技术栈
项目基于原生 HTML、CSS 与 JavaScript 编写，无第三方依赖，页面可直接在本地打开。下载后可直接替换标题、数据或配色，用作素材站展示页或专题组件页。
软件架构
- index.html 负责左侧说明区、筛选区与右侧元素网格结构。
- styles.css 构建深色实验室风格界面、元素色板和响应式栅格。
- script.js 维护元素数据、筛选状态与详情卡片更新逻辑。
安装教程
- 下载压缩包后解压，确保 index.html、styles.css、script.js、preview.png 位于同一目录。
- 双击 index.html 即可在浏览器中打开，也可上传到任意静态空间直接部署。
- 按需修改 HTML 文案和 script.js 中的数据配置，保存后刷新即可。
使用说明
- 默认展示全部元素卡片，点击筛选按钮可切换到指定分类。
- 点击任意元素卡片，会同步更新左侧详情介绍信息。
- 如需扩展完整周期表，只需继续补充 script.js 中的元素数据数组。
功能讲解
- 元素卡片提供原子序数、符号、中文名与分类标签。
- 详情卡片会展示相对原子质量和当前元素的说明文本。
- 页面在移动端自动切换为单列信息布局，保持可读性和点击区域。
