HTML双栏布局如何做个人主页？个人简历页面设计-html教程-PHP中文网

绿色个人简历HTML5模板采用语义化标签与CSS Grid实现双栏布局，左侧30%展示短内容，右侧70%承载长文本，通过@media print强制单栏并禁用背景色以保障A4打印效果，兼顾ATS识别与无障碍访问。

html双栏布局如何做个人主页？个人简历页面设计

用 `grid-template-columns` 直接切左右两栏，别碰 `float` 或 `table`

双栏简历本质是「信息分组 + 视觉权重区分」，不是排版炫技。左侧放个人信息、技能标签、教育背景这类短内容，右侧放工作经历、项目描述等长文本——用 CSS Grid 一行定义列宽最稳：grid-template-columns: 30% 70%。百分比比 fr 单位更可控，尤其在打印 PDF 时不会退化成等宽列；gap: 2rem 统一控制间距，比手动加 margin 更可靠。

常见错误：用 float: left 搭双栏，结果小屏下内容错位、打印时右侧栏被截断；或者用

 布局，导致移动端必须横向滚动。这些方案现在没理由再用。
左侧容器不用设 width，靠 Grid 列宽控制即可
避免给栏内元素写 position: absolute 或 transform，PDF 导出时大概率消失
如果必须兼容 IE11，改用 Flexbox，但要显式写 align-items: flex-start，否则两栏会被拉成一样高，反而难读


@media print 里必须重置 grid-template-columns，否则 PDF 会崩
Chrome “另存为 PDF” 不解析 fr 和 minmax()，直接忽略 grid-template-columns 定义，导致左右栏变等宽、日期被硬切到下一行、甚至整段经历跨页断裂。解决办法不是换布局，而是针对性补打印样式：

在 @media print 块里把双栏强制切回单栏：grid-template-columns: 1fr

给每段经历（比如 ）加 break-inside: avoid，防止被拆到两页
禁用所有背景色和边框：* { background: transparent !important; }，不然 PDF 里全是黑块

测试前务必用 Chrome DevTools 切到 Print 预览模式（Ctrl+Shift+P → 输入 “Rendering” → 勾选 “Emulate CSS media type: print”），比反复导出快得多。
语义化结构比视觉效果更重要：用对  和 

简历不是纯展示页，ATS（简历筛选系统）和屏幕阅读器都依赖 HTML 结构。堆 
 再好看也没用，关键标签必须到位：每个大模块（教育、工作、技能）用  包裹，别用 
时间字段必须用 2020.03–2022.08，ATS 才能识别年份区间

联系方式用 xxx@example.com，手机点开直接调起邮件 App
技能列表用 ，别用 @@######@@ 模拟换行——后者无法被辅助工具朗读，也难统一缩进
很多人为了“简洁”把所有内容塞进一个 
 里，结果 ATS 抓不到模块边界。结构清晰比配色高级管用十倍。

											
												
												
													超级简历WonderCV
													一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。
												
												下载
												
											
										
移动端适配只靠一个 @media (max-width: 768px) 不够
小屏不是简单“变单栏”，还有字体缩放、点击区域、白空间处理三类问题：

必须加 ，否则 iOS Safari 默认按 980px 渲染，文字小得看不清
电话和邮箱链接加 tel: / mailto: 协议，不然点不了；别用图片替代联系方式
长技能标签（如 “React + TypeScript + Next.js”）在窄屏上容易溢出，加 white-space: normal; word-break: break-word;

避免用 font-size: 16px 这种固定值，改用 1.1em 或 1.05rem，让系统字号设置生效

真正麻烦的不是写响应式代码，而是测试——本地双击打开没问题，上传 GitHub Pages 后样式丢失，90% 是路径大小写不一致（Windows 不敏感，Linux 敏感），剩下 10% 是忘了加 viewport 声明。