首屏3秒内必须完成价值确认，文案复现广告核心词、可信标识直接可见、品牌标识明确、CTA动词开头、禁用无关元素；响应式用flex布局并正确设置父容器；viewport标签必须写全；HTML语义化但以转化路径优先。
首屏3秒内必须完成价值确认，否则用户就划走了
用户点开广告后，前3秒决定是否停留。不是“页面做得美不美”，而是“他一眼看出这页是为他准备的”。<h1>文案必须复现广告里的核心词，比如广告写“跨境物流免备案”，<h1>就不能泛泛写“智能物流解决方案”。可信标识要直接可见——人社部备案号、客户真实头像+一句话证言，比“服务10万+企业”管用十倍。
常见错误：把信任背书堆在首屏顶部导航栏或右上角小图标里，用户根本注意不到；或者用模糊的“行业领先”“值得信赖”代替具体可验证信息。
-
<header>里至少含一个可识别品牌标识（logo 或带字号的品牌文字），不能只靠颜色或字体暗示 - 主CTA按钮必须动词开头：
立即测算、免费领取、马上试用，禁用了解更多 - 首屏禁止出现二级导航、无关链接、社交媒体图标——这些是第二屏之后才该考虑的
用 flex 布局做响应式结构，别碰 float 和 absolute
移动端适配出问题，90%是因为没搞清 flex 的生效前提：父容器没加 display: flex，子元素写再多 flex: 1 都白搭。绝对定位更危险——position: absolute 必须配合 position: relative 的父容器，否则基准偏移，iOS 和部分安卓机型直接错位。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
- 主区块统一用
display: flex; flex-direction: column;（<header>、<main>、<footer>） - 水平居中 logo + 标题：给
<header>加justify-content: center; align-items: center; - 侧边栏固定宽、内容区自适应：侧边栏设
flex: 0 0 240px，内容区设flex: 1; min-width: 0（防长 URL 撑破）
viewport 元标签写错，整个移动端首屏就废
很多落地页在手机上只显示一半文字、按钮缩成针尖大小，根源不在 CSS，而在 <meta name="viewport"> 缺失或参数不全。iOS Safari 会自动缩放，安卓部分浏览器直接拒读，屏幕阅读器也受影响。
必须写全这一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
禁止写 user-scalable=no —— 它会让辅助工具失效，还可能触发某些浏览器的兼容降级。
检查方法：打开 Chrome DevTools → 切换设备模拟 → 看地址栏是否显示“缩放已禁用”或页面被强制缩小。
HTML 结构要语义化，但别为了“规范”牺牲转化路径
用 <header>、<main>、<section> 是对的，但别机械套用。高转化落地页往往只有一个 <main>，所有内容都在它里面线性展开；<nav> 如果只有首页链接，不如直接删掉——减少干扰就是提升转化。
真正关键的是 DOM 顺序：主 CTA 按钮的 HTML 位置必须在首屏视口内，且不能被 JS 异步加载遮挡。如果用了 Pug 或其他模板引擎，确保 index.pug 中的 CTA 代码没被包裹在条件判断或延迟加载块里。
容易被忽略的一点：表单提交按钮的 type 属性必须是 submit，不是 button——否则回车无法触发，移动端用户尤其容易卡住。
