落地页首屏必须在3秒内完成价值确认与动作触发，核心是可信标识、需求匹配文案、单点动词型CTA三要素缺一不可。
落地页不是“把设计稿切出来就行”，而是要让点击广告的用户在3秒内确认“这页面说的就是我想要的”。核心判断标准就一条：用户是否在首屏完成价值确认+动作触发，其余都是围绕它展开的技术实现。
首屏必须包含三要素：可信标识、需求匹配文案、单点行动按钮
信息流用户滑动极快，首屏（viewport 内不需滚动看到的部分）决定跳出率。缺任意一项，转化直接打骨折。
-
<header></header>里至少有一个可识别的品牌标识（logo 或品牌名），不能只靠字体或颜色暗示；<h1></h1>文案必须复现广告语中的核心诉求词，比如广告写“3步搞定社保代缴”，<h1></h1>就不能写“专业人事服务解决方案”； - 行动按钮（CTA）只能有一个主操作，且文字要动词开头：“立即测算”“免费领取”“马上试用”，禁用“了解更多”“查看详情”这类零成本但无指向的表达；
- 避免在首屏堆砌信任背书（如“已服务10万+企业”），它们应放在 CTA 下方或第二屏——首屏空间只留给“你为什么该信这个页面”最直接的证据，比如“人社部备案编号：XXXXX”或客户真实头像+一句话证言。
用 flex 布局做响应式结构，别碰 float 和 position: absolute
落地页要适配从 iPhone SE 到 iPad Pro 的所有设备，flex 是目前最稳的方案。常见错误是只设子元素 flex: 1 却忘了父容器没加 display: flex，结果样式完全不生效。
- 对
<header></header>、<main></main>、<footer></footer>这类主区块，统一用display: flex; flex-direction: column;； - 需要水平居中 logo + 标题时，给
<header></header>加justify-content: center; align-items: center;，而不是给 logo 加position: absolute； - 侧边栏固定宽、内容区自适应？用
flex: 0 0 240px（不缩放、不增长、宽240px）配flex: 1，再加min-width: 0防止长 URL 撑破容器； - 绝对定位只用于悬浮按钮、加载遮罩等脱离文档流的元素，且父容器必须有
position: relative，否则基准错乱。
viewport 和 meta 标签写错，移动端首屏就废
很多落地页在手机上首屏显示一半文字、按钮被缩得太小，根本原因是 <meta name="viewport"> 缺失或参数错误。这不是样式问题，是渲染起点就偏了。
立即学习“前端免费学习笔记（深入）”；
- 必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，漏掉initial-scale=1.0会导致 iOS Safari 自动缩放； - 禁止写
user-scalable=no—— 屏幕阅读器和部分安卓浏览器会因此拒绝渲染； -
<meta charset="UTF-8">必须在最前面，否则中文标题可能乱码； - 如果用了第三方统计或表单 SDK，确保它们的 JS 不阻塞
DOMContentLoaded，否则首屏渲染延迟超过 2 秒，用户已划走。
表单提交失败，90% 是后端接口没配 CORS 或没处理 OPTIONS 预检
线索收集页的表单点不动、控制台报 CORS error 或 Failed to fetch，别急着改前端，先看网络面板里请求发没发出去、状态码是多少。
- 前端用
fetch提交时，如果带Content-Type: application/json，浏览器会先发一个OPTIONS预检请求，后端必须返回Access-Control-Allow-Origin: *和Access-Control-Allow-Methods: POST, OPTIONS； - 表单
action直接指向后端地址？那得确保后端返回的是text/html并能跳转，否则用户点完按钮页面白屏； - 手机号、验证码字段加了
inputmode="numeric"和pattern="[0-9]*"，但没配autocomplete="tel"，iOS 键盘不会自动弹数字键盘； - 提交按钮加
disabled状态防重复点击，但成功后必须手动removeAttribute('disabled')，否则用户刷新页面前无法再操作。
真正卡住落地页效果的，往往不是布局难或动画炫，而是首屏加载慢、表单没回传、移动端缩放错位这种基础链路断点。盯住 network 面板里的每个请求状态，比调一百行 CSS 更有效。
