当前位置：首页 > CSS

css个人简历制作两页

2026-02-12 17:54:52CSS

设计思路

使用CSS创建两页个人简历需要合理规划布局，确保内容在两页间自然分割。采用分页控制技术，如page-break属性，并注重响应式设计。

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="resume">
        <div class="page page-1">
            <!-- 第一页内容 -->
            <header>
                <h1>姓名</h1>
                <p>联系方式 | 邮箱 | 地址</p>
            </header>
            <section class="education">
                <h2>教育背景</h2>
                <!-- 教育经历内容 -->
            </section>
        </div>

        <div class="page page-2">
            <!-- 第二页内容 -->
            <section class="experience">
                <h2>工作经历</h2>
                <!-- 工作经历内容 -->
            </section>
            <section class="skills">
                <h2>技能</h2>
                <!-- 技能列表 -->
            </section>
        </div>
    </div>
</body>
</html>

CSS样式

/* 基础样式 */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}

.resume {
    width: 210mm; /* A4宽度 */
    height: 297mm; /* A4高度 */
    margin: 0 auto;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.page {
    padding: 20mm;
    height: 257mm; /* 减去上下padding */
    position: relative;
}

/* 分页控制 */
.page-1 {
    page-break-after: always;
}

/* 页眉样式 */
header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

header h1 {
    margin: 0;
    color: #2c3e50;
    font-size: 28px;
}

/* 各部分样式 */
section {
    margin-bottom: 20px;
}

h2 {
    color: #3498db;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    font-size: 20px;
}

/* 响应式设计 */
@media print {
    body {
        background: none;
    }
    .resume {
        box-shadow: none;
        width: 100%;
        height: auto;
    }
}

内容布局技巧

教育背景部分 使用时间轴样式展示学历信息：

.education-item {
    display: flex;
    margin-bottom: 15px;
}
.education-year {
    width: 80px;
    font-weight: bold;
}
.education-content {
    flex: 1;
}

工作经历部分 采用卡片式布局：

.job {
    background: #f8f9fa;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 3px solid #3498db;
}
.job-title {
    font-weight: bold;
    margin-bottom: 5px;
}
.job-period {
    color: #666;
    font-style: italic;
}

打印优化

添加专门的打印样式确保分页正确：

@media print {
    .page {
        height: auto;
        min-height: 257mm;
        page-break-inside: avoid;
    }
    .page-1 {
        page-break-after: always;
    }
}

视觉增强技巧

使用CSS Grid布局专业技能部分：

.skills-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
}
.skill-category {
 background: #e8f4fc;
 padding: 10px;
 border-radius: 5px;
}

添加进度条样式的技能指示器：

css个人简历制作两页

.skill-bar {
 background: #ecf0f1;
 height: 10px;
 border-radius: 5px;
 margin-top: 5px;
}
.skill-level {
 height: 100%;
 background: #3498db;
 border-radius: 5px;
}

通过以上CSS结构和样式设计，可以创建专业的两页个人简历，既适合屏幕浏览也适合打印输出。重点在于合理的内容分区和分页控制，同时保持整体设计简洁专业。