css个人简历制作两页
设计思路
使用CSS创建两页个人简历需要结合HTML结构和CSS分页控制。关键点在于通过@page规则和分页符实现打印或PDF输出的分页效果，同时确保内容在两页间合理分布。
HTML基础结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两页个人简历</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="resume-container">
<!-- 第一页内容 -->
<div class="page page-1">
<header>...</header>
<section class="experience">...</section>
</div>
<!-- 第二页内容 -->
<div class="page page-2">
<section class="education">...</section>
<section class="skills">...</section>
</div>
</div>
</body>
</html>CSS分页控制
/* 设置页面尺寸和边距 */
@page {
size: A4;
margin: 1cm;
}
.resume-container {
width: 210mm;
height: 297mm;
margin: 0 auto;
}
.page {
page-break-after: always;
height: 277mm; /* 减去上下边距 */
padding: 20px;
}
.page-2 {
page-break-before: always;
}样式优化技巧
布局建议
- 使用CSS Grid或Flexbox创建响应式布局
- 为不同部分设置清晰视觉层次：
section { margin-bottom: 1.5rem; }
h2 { border-bottom: 2px solid #333; padding-bottom: 0.5rem; }
打印优化
```css
@media print {
body {
-webkit-print-color-adjust: exact;
}
.page {
height: auto;
min-height: 277mm;
}
}内容分配策略
第一页建议包含
- 姓名/联系方式标题区
- 个人简介/职业目标
- 工作经历（主要部分）
第二页建议包含
- 教育背景
- 专业技能
- 证书/奖项
- 其他补充信息
视觉增强技巧
使用CSS变量保持风格一致：
:root {
--primary-color: #2c3e50;
--secondary-color: #7f8c8d;
}
header {
background-color: var(--primary-color);
color: white;
padding: 2rem;
}添加分页提示（调试用）：
.page::after {
content: "Page End";
color: lightgray;
text-align: center;
display: block;
margin-top: 1rem;
}
