纯HTML+CSS作品集只需index.html和style.css，结构分头部简介、作品网格、底部联系三块；图片用直引路径，禁用JS；作品卡片统一用，CSS用Grid/Flex自动布局；响应式设两断点，字体用rem，必加viewport meta、HTTPS资源、-webkit-前缀兼容Safari。
用纯 HTML + CSS 实现最小可行作品集结构
不需要框架、不依赖 CMS，一个 index.html 加一个 style.css 就能跑起来。核心是把内容压到三块：头部简介、作品网格、底部联系。所有图片用 <img alt="如何设计一个个人作品集网站_展示个人作品的简洁网页结构" > 直接引用本地路径或 CDN 链接，避免 JavaScript 加载逻辑——这样连本地双击打开都能看，部署时扔到 GitHub Pages 或 Vercel 也零配置。
- 头部只放一张头像（
<img src="avatar.jpg" alt="如何设计一个个人作品集网站_展示个人作品的简洁网页结构" >）+ 一行名字 + 一行简短职业描述（比如 “前端开发者 · 专注可访问性”） - 作品区用语义化
<section id="projects"></section>包裹，每个项目用<article></article>，内含缩略图、标题、一句话说明、技术标签（如<span class="tag">React</span>） - 底部仅保留一个邮箱链接（
<a href="mailto:name@example.com"></a>）和可选的 GitHub 图标链接，别塞社交媒体图标墙
作品卡片怎么写才不翻车
常见错误是给每张卡片加独立 CSS 类名（project-1、project-2），导致新增作品就得改 HTML 和 CSS。正确做法是统一用 <article class="project"></article>，CSS 里用 .project { margin: 1rem; } 控制间距，靠 Flex 或 Grid 布局自动排列。
- 图片必须加
alt属性，哪怕只是 “作品：天气应用界面”，否则屏幕阅读器无法识别，也影响 SEO - 避免在
<img alt="如何设计一个个人作品集网站_展示个人作品的简洁网页结构" >上硬写width/height，用 CSS 的aspect-ratio: 4/3+object-fit: cover保证缩略图不变形 - 技术标签不要用
<div>，改用 <code><span class="tech-tag"></span>，语义更准，也方便后期加 hover 效果响应式断点只设两个就足够
手机竖屏（
max-width: 480px）和桌面（min-width: 769px）之间留白，不额外处理平板。手机端作品网格设为单列，桌面端用display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))—— 这样在 1280px 宽度下自动铺开 4 列，1920px 下变成 6 列，不用手算像素。- 字体大小用
rem，根元素font-size: 100%（即浏览器默认 16px），标题用1.5rem，正文用1rem，缩放自然 - 禁用
user-scalable=no，否则 iOS 用户双指缩放会失效，无障碍体验直接降级 - 所有交互伪类（
:hover、:focus）必须同时存在，比如按钮悬停变色，也要确保键盘Tab切入时有清晰焦点框
部署前必须检查的三个冷门但致命项
很多人测完 Chrome 就上传，结果在 Safari 里图片错位、在 Edge 里网格塌陷。真正卡住上线的往往是这些细节：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须在里，漏掉这行，手机端页面会按 980px 渲染，文字小得看不见 - CSS 中避免使用
gap配合float布局（已淘汰），如果用了grid或flex，确认是否加了-webkit-前缀（Safari 15.4 以下需要-webkit-gap） - 所有外部资源（比如 Google Fonts）用
https://协议，HTTP 资源在 HTTPS 页面会被现代浏览器拦截，图片显示为空白且控制台报Mixed Content错误
最省事的方式：写完后用
http-server本地起服务（npx http-server），再拿真机 Safari / Chrome 打开localhost:8080看效果。模拟器容易骗人，真机滑动惯性、字体渲染、图片解码都不同。 - 字体大小用
