课程卡片高度不一致需设min-height和flex:1；导航栏fixed时banner需padding-top；课表优先用语义化table；微信白屏要删console.log并检查异步脚本时机。
课程卡片用 flex 布局但高度不一致？加 align-items: stretch 不起作用
常见现象是课程标题短的卡片整体变矮，和旁边带长描述的卡片不对齐，视觉割裂。根本原因不是 flex 本身失效，而是子容器（比如课程标题、简介、价格区）默认 min-height: auto，且内部文字换行撑开高度后，父级没强制统一基准线。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给课程卡片容器（如
.course-card）设display: flex; flex-direction: column;，再加height: 100%或固定最小高（如min-height: 320px） - 所有直接子元素（
.course-title、.course-desc、.course-price）设flex-shrink: 0，防止被压缩变形 - 关键：在
.course-desc上加flex: 1，让它自动填满剩余空间，这样所有卡片底部价格栏才能对齐
招生简章 页面滚动时头部导航消失？别只靠 position: fixed
很多教培站把导航栏写成 position: fixed; top: 0 后，一滚动就盖住顶部 banner 或轮播图，用户第一眼看不到机构 slogan 和主推课程。这不是 bug，是布局逻辑没闭环。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<header>或 banner 区域加padding-top，值等于导航栏高度（比如64px），确保内容不被遮挡 - 如果用 JS 动态切换导航样式（如滚动后缩小），记得监听
scroll时检查document.documentElement.scrollTop，而不是window.scrollY（兼容 IE/旧 Edge） - 移动端必须加
viewportmeta：<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则fixed在 iOS Safari 下可能错位
课程时间表用表格还是 CSS Grid？看数据是否要打印或 SEO
如果页面要支持「打印招生简章 PDF」或被搜索引擎抓取课表结构（比如家长搜“周末初中数学班”），纯 div + grid 的时间表会丢失语义，打印时行列错乱，SEO 也难识别时间-科目-教师的对应关系。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
<table>，但不要套用旧式 border 表格；用role="grid"+aria-label增强可访问性，例如：<table aria-label="2024秋季课程时间安排"> - 如果坚持用
grid（比如做交互动画），至少给每节课区块加data-day="周一"、data-time="14:00-15:30"属性，方便 JS 提取或后续埋点 - 避免用
grid-template-areas写死布局——当某天加开一节插班课，整个 CSS 就得重写
微信内打开招生页白屏？检查 console.log 和 async 脚本加载顺序
教培机构常把报名表单 JS 放在底部，但用微信内置浏览器打开时，如果脚本含 console.log（尤其未注释掉的调试语句），某些低版本 X5 内核会直接中断执行，导致页面空白。这不是代码错误，是环境限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 上线前全局搜索并删掉所有
console.log、debugger，用/* DEBUG */注释块包起来更安全 -
<script async src="form.js"></script>必须配合DOMContentLoaded检查，因为异步加载无法保证执行时机，表单初始化可能早于 DOM 就绪 - 微信内禁止调用
navigator.mediaDevices.getUserMedia（摄像头）、Notification.requestPermission（通知），如有相关逻辑，先用if ('mediaDevices' in navigator)判断再执行
课程体系页面最难的不是排版，是让不同设备、不同入口（公众号菜单、朋友圈链接、PC 直接输入）进来的人，看到的都是同一套信息结构——这意味着 HTML 语义比视觉动效更重要，而这点常常被忽略。
