漂亮HTML个人简历代码

把简历做成网页，漂亮最直接的个人好处是：你发一个链接，对方点开就能看。简历PDF还要下载，代码Word可能乱码。漂亮但很多人写出来的个人HTML简历，丑得让人不想看第二眼。简历问题不在技术，代码在审美和代码习惯。漂亮

我见过一份简历，个人白底黑字，简历所有内容挤在左边，代码右边空了一大半。漂亮问他为什么不居中，个人他说用了<div align="left">。简历这种写法早就不推荐了。现在做布局，优先用Flexbox或者Grid。比如整个简历包在一个容器里，给它设个最大宽度，再用margin: 0 auto居中，比什么都省事。

<div class="resume"> <header> <h1>张三</h1> <p>前端开发 · 三年经验</p> </header> <section> <h2>工作经历</h2> ... </section> </div> .resume {  max-width: 800px; margin: 0 auto; padding: 40px 20px; font-family: system-ui, sans-serif; color: #222; } 

字体别用默认的宋体。系统字体栈就很好：system-ui, -apple-system, "Segoe UI", Roboto, sans-serif。行高给到1.6，段落之间留点空隙，阅读体验立刻不一样。标题和正文拉开层级，h1用28px到32px，h2用20px左右，再加一条细细的下边框，干净利落。

颜色不要超过三种。主色可以用深灰#222，辅助色用中灰#666，强调色选一个低饱和的蓝或者绿，比如#2a7ae2。链接和职位名称用强调色，其他一律灰阶。花里胡哨的渐变和阴影，放在简历里只会显得不专业。

很多人喜欢在简历里塞图标。用Font Awesome没问题，但别每个标题旁边都放一个。联系方式那一行，邮箱、电话、GitHub各配一个小图标，足够了。图标大小和文字对齐，设成vertical-align: middle，不然会歪。

列表项是简历的核心。工作经历用<ul>，但要把默认的圆点去掉，换成短横线或者小方块。CSS里写list-style: none，然后用::before加一个content: "—"，颜色调成浅灰。每条经历控制在一到两行，动词开头，带数字结果。比如“重构订单模块，接口响应时间从800ms降到200ms”。

响应式不能忘。手机上打开，左右内边距至少16px，字号别小于14px。用媒体查询把两栏布局改成单栏。有个简单办法：所有容器用百分比宽度，图片设max-width: 100%。别写死像素宽度，不然小屏上会出现横向滚动条，体验极差。

打印样式经常被忽略。面试官可能把你的网页另存为PDF。加一段@media print，把背景色去掉，链接颜色改成黑色，隐藏导航栏和按钮。页边距设成1.5cm，字号保持12pt以上。这样打印出来不会缺内容。

代码写完了，扔到GitHub Pages或者Vercel上，一分钟部署。域名用你的名字.github.io/resume，比任何网盘链接都体面。记得在<title>里写清楚“张三的简历-前端开发”，别只写“简历”两个字。分享到微信里，链接卡片会显示这个标题，细节决定印象。

最后说个真事。有个朋友把简历做成了暗色主题，背景#1a1a1a，文字#e0e0e0，强调色用#64ffda。看起来很酷，但HR用公司电脑打开，屏幕反光严重，根本看不清。他后来换回白底，面试邀约反而多了。漂亮不等于炫技，清晰、舒服、信息到位，才是简历的第一原则。