页面布局
Flex、Grid、文档流与页面骨架，练习桌面与移动端一致的信息结构。
6练习方向
4已完成作品
3前端笔记
1内容文章
练习方向
从基础到进阶组件设计
按钮、卡片、表单、弹窗与导航，练习可复用组件的状态与反馈。
交互动效
过渡、动画、手势反馈与滚动体验，练习不打扰使用的流畅动效。
数据展示
表格、列表、统计与状态标签，练习清晰展示复杂业务数据。
表单体验
输入、校验、验证码与提交状态，练习真实流程中的每一步反馈。
移动适配
视口、断点、横屏与触摸操作，练习手机端也能完整可用的页面。
已完成作品
持续整理中内容文章
记录建设过程与思考从功能堆叠到清晰边界
今天完成主站内容后台、打卡入口分离和旧站点清理，进一步明确每个系统的职责与入口。
阅读全文 →前端笔记
随手记录的关键写法CSS 变量统一主题
:root {
--forest: #16634b;
--gold: #c9a45c;
--bg: #eef1ec;
}Grid 自适应卡片
.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));
gap: 14px;
}导航强制刷新页面
fetch(
new Request(url, {
cache: "no-store"
})
);