设计师用HTML写简历的核心是打造可复用、可验证、可迭代的视觉交付物，需精准控制图片缩放、Grid布局、语义化链接及打印分页逻辑。
设计师用 HTML 写简历，不是为了“写代码”，而是把作品陈列这件事从 PPT/PSD 的黑盒里拽出来，变成可复用、可验证、可迭代的视觉交付物。核心判断：你不需要会写 fetch() 或 React，但必须能控制 section 的垂直节奏、img 的缩放边界、以及打印时某张作品图会不会被截成两页。
怎么让作品图在HTML里不糊、不拉伸、不溢出？
设计师最常栽在图片渲染上——上传一张 3000×2000 的作品截图，直接塞进 <img alt="设计师怎么制作HTML简历？视觉化作品陈列教程" >，结果在手机上撑破容器，在 PDF 里压扁变形。
- 永远用
max-width: 100%+height: auto控制响应式缩放，别碰width: 100%（它强制拉伸） - 作品图建议统一裁成 4:3 或 16:9，避免浏览器按原始宽高比强行撑开布局
- 如果要居中展示且保持比例，用
object-fit: contain+object-position: center，而不是靠background-image模拟（后者无法被屏幕阅读器识别，也难打印） - 导出 PDF 前务必检查：Chrome 打印预览中右键图片 → “检查”，看 computed 样式里
width和height是否为具体数值（比如320px），而非auto或百分比——否则容易跨页断裂
CSS Grid 布局怎么安排作品集模块？
设计师习惯拖图层，但 Grid 是声明式布局：你告诉浏览器“我要三列作品，每张卡片固定高度，小屏下自动变一列”，而不是手动调每个 div 的 margin。
- 用
display: grid+grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))实现流式栅格，比 Flex 更稳——Flex 在内容高度不一时容易错行 - 每张作品卡片用
grid-row: span 2主动占位，避免长描述把后续卡片顶偏 - 标题和描述文字用
line-clamp: 2截断（配合-webkit-box），防止一段项目描述把整列拉得过长 - 慎用
gap大于1rem：打印时过大的间隙会导致作品图被挤到下一页，改用margin-bottom更可控
怎么让作品链接既美观又可用？
设计师常把“查看项目”做成纯文字按钮，或加个 SVG 图标完事。但实际使用中，面试官可能用鼠标悬停、触屏点击、键盘 Tab 导航、甚至语音助手触发——链接得扛住所有路径。
立即学习“前端免费学习笔记（深入）”；
- 所有作品链接必须是
<a href="https://..."></a>，不是<div onclick="...">（后者无法被键盘聚焦，也不支持右键新标签打开） <li>图标用 <code><svg></svg>内联，别用外部.png（PDF 导出时易丢失） - 加
rel="noopener noreferrer"防安全风险，加target="_blank"保证跳转不关原页面 - 悬停效果只用
opacity或transform: translateY(-2px)，别改font-size或padding（重排版会抖动，打印时不可见） - 在
@media print里强制关闭所有动画、阴影、背景色：*, *::before, *::after { animation: none !important; box-shadow: none !important; background: transparent !important; } - 给每个作品
section加page-break-inside: avoid，阻止浏览器在图和标题之间分页 - 禁用
float和position: absolute—— 它们在打印模式下行为不可控，一律改用 Grid 或 Flex - 测试前先在 Chrome DevTools 的 Rendering 面板里启用
Emulate CSS media type: print，比反复导出快十倍
打印 PDF 时作品图被截断、留白异常怎么办？
这是设计师用 HTML 简历翻车率最高的环节：屏幕上完美，PDF 里第一张图只剩半张脸，或者最后一页全是空白。
真正难的不是写出能跑的 HTML，而是理解浏览器如何把你的视觉意图翻译成像素——尤其当它被压缩进 A4 页面、被不同设备解析、被面试官用三种方式打开时。作品图的尺寸、链接的语义、打印时的分页逻辑，这些细节不会出现在设计稿里，但决定了简历是否“可用”。
