10 个让 HTML 单页更耐看的小技巧

小而精致的单页不需要框架，下面这些纯 HTML/CSS 技巧足够让页面立刻「加分」。

1. 用系统字体栈：font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif，观感干净零加载。
2. CSS 变量配色：在 :root 定义主色，改一处全站生效。
3. 留白是最便宜的排版：把间距从 8px 加到 24px 试一次，多数页面立刻变高级。
4. 一屏定调：首屏给一句能看懂的话和明确的行动按钮。
5. 圆角+浅阴影：border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.06) 让卡片有层次。
6. 移动优先：写媒体查询把两栏改成一栏，先在小屏检查。
7. 图片加 max-width:100%：永远不给容器撑破的机会。
8. 动效克制：hover 用 transition:.2s 的位移/阴影即可，不要弹跳全家桶。
9. 可读性：正文行高 1.7 左右、行长别超过 70 字符。
10. 链接可感知：给正文链接加下划线或颜色差异，访问过的颜色做区分。

发布前记得用右侧预览在窄屏宽度下看一眼。