css个人简历制作两页
制作两页CSS个人简历的方法
使用HTML和CSS创建两页个人简历，关键在于控制分页和布局。以下方法可实现分页效果并优化打印样式。
HTML结构示例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="resume">
<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样式
.resume {
width: 210mm;
margin: 0 auto;
}
.page {
height: 297mm;
padding: 20mm;
box-sizing: border-box;
page-break-after: always;
background: white;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
@media print {
.page {
box-shadow: none;
page-break-after: always;
}
.page:last-child {
page-break-after: auto;
}
}内容布局技巧
固定每页高度为A4纸尺寸(210×297mm)，使用page-break-after属性确保打印时分页。
两列布局示例：
.two-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}控制内容溢出：
section {
margin-bottom: 15px;
overflow: hidden;
}打印优化设置
添加打印专用样式确保分页准确：
@page {
size: A4;
margin: 0;
}
@media print {
body {
background: none;
}
.page {
margin: 0;
border: none;
}
}视觉设计建议
使用CSS变量维护统一风格：
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
}
.header {
color: var(--primary-color);
border-bottom: 2px solid var(--secondary-color);
}添加响应式设计：
@media (max-width: 768px) {
.two-columns {
grid-template-columns: 1fr;
}
}
