用HTML+CSS打造现代感个人主页的关键是语义化结构、克制的视觉节奏与移动优先响应式：采用语义标签搭建清晰骨架，通过line-height、max-width和系统字体栈控制可读性，纯CSS实现汉堡菜单，并确保焦点样式、文本缩放适配及深色模式支持。
直接用 HTML + CSS 就能做出有现代感的个人主页，不需要框架、不依赖构建工具，关键在结构干净、视觉节奏明确、交互克制。
用语义化 HTML 搭建清晰骨架
现代感的第一前提是可读性——不仅是给人看，更是给浏览器和辅助技术理解。避免 <div> 堆砌，优先用 <header>、<section>、<article>、<footer>。
-
<header>放姓名、简短标语、主导航（最多 4 项，如 “About / Work / Blog / Contact”） - 每个核心模块用独立
<section>，加id（如id="work"），方便锚点跳转和 CSS 定位 - 照片/头像用
<img>，别用背景图——否则无法设置alt，影响可访问性和 SEO - 避免内联样式（
style="..."），所有样式走外部style.css或<style>块
CSS 中控制“现代感”的三个关键属性
不是靠特效堆叠，而是靠留白、字体层次和色彩克制。重点调好这三项：
-
line-height设为1.6～1.8，段落呼吸感立刻提升 -
max-width控制文字行宽，正文区域设max-width: 65ch（ch 是字符单位，比像素更可靠） - 用系统字体栈：例如
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;，兼顾性能与质感，不加载额外 Web Font - 阴影只用一层：比如卡片用
box-shadow: 0 2px 8px hsla(0,0%,0%,0.08)，太重就变“iOS 6 风格”
响应式不是“适配手机”，而是“优先移动内容流”
别等写完桌面版再加 @media。从 index.html 第一行开始就按移动优先写：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>里必须加：<meta name="viewport" content="width=device-width, initial-scale=1"> - 所有宽度用
rem或%，禁用固定px宽度（如不用width: 320px） - 导航栏默认折叠，用纯 CSS 实现汉堡菜单（借助
<input type="checkbox">+:checked+~选择器，无 JS） - 图片加
width: 100%; height: auto;，再配合object-fit: cover;控制裁剪方式
部署前必查的三个破坏现代感的细节
很多页面初看很酷，点开链接或缩放后瞬间掉价，问题往往出在这几个地方：
- 点击链接后
:focus样式被清空（尤其 Chrome 默认蓝色外框消失），务必保留可聚焦元素的轮廓，或用outline: 2px solid #007aff;替代 - 字体大小在 iOS Safari 上被自动放大（比如数字+文字组合），加
-webkit-text-size-adjust: 100%;到html或body - 深色模式适配缺失：用
@media (prefers-color-scheme: dark)覆盖关键颜色，至少保证文字和背景对比度 ≥ 4.5:1
真正难的不是做出“看起来新”，而是让每处交互都符合用户直觉——比如滚动时导航是否吸顶、锚点跳转是否平滑、表单提交有没有反馈。这些细节没做，再好的设计也会在真实使用中露馅。
