用CSS制作个人简历页面，核心是先规划好内容结构，再用样式控制排版与外观。对初学者来说，不需要复杂框架，掌握基础盒模型、布局方式和样式整合思路就够了。
一、先写HTML结构
简历通常分为头部信息、左侧技能栏和右侧经历栏。先用语义化标签搭出骨架：
<div class="resume">
<header class="resume-header">
<h1>张三</h1>
<p>前端开发爱好者</p>
</header>
<div class="resume-body">
<aside class="resume-side">
<h3>技能</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</aside>
<section class="resume-main">
<h3>工作经历</h3>
<p>某年公司实习</p>
</section>
</div>
</div>
二、用CSS完成布局
初学者可用浮动做左右分栏，也可用更简单的弹性盒。下面用flex整合整体布局：
.resume {
width: 800px;
margin: 0 auto;
border: 1px solid #ddd;
}
.resume-body {
display: flex;
}
.resume-side {
width: 30%;
background: #f5f5f5;
padding: 10px;
}
.resume-main {
width: 70%;
padding: 10px;
}
为什么用flex
浮动需要清除浮动，容易出错；flex只需在父容器写display:flex，子项自动排成一行，非常适合简历这类简单版面。
三、样式整合技巧
把所有CSS写在一个文件或<style>标签里，按模块加注释，方便修改：
/* 基础重置 */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* 头部样式 */
.resume-header { text-align: center; padding: 20px; background: #409eff; color: #fff; }
/* 侧边与主体已如上定义 */
常用样式补充
- 用
font-family统一字体 - 用
line-height撑开行距更透气 - 用
border-radius让头像或卡片圆角
四、完整小例子
把结构和样式合起来看更清楚：
<style>
.resume { width: 800px; margin: 20px auto; font-family: sans-serif; }
.resume-header { background: #409eff; color: #fff; padding: 15px; text-align: center; }
.resume-body { display: flex; }
.resume-side { width: 30%; background: #f5f5f5; padding: 10px; }
.resume-main { width: 70%; padding: 10px; }
</style>
<div class="resume">
<header class="resume-header"><h1>李四</h1></header>
<div class="resume-body">
<aside class="resume-side"><h3>技能</h3><ul><li>CSS</li></ul></aside>
<section class="resume-main"><h3>简介</h3><p>热爱网页制作</p></section>
</div>
</div>
五、小结
初学者做简历页面，先分块写HTML，再用flex布局，最后把样式按模块整合。多改几次宽度和颜色，就能做出属于自己的简历页。