当前位置：首页 > CSS

css个人简历制作两页

2026-01-08 20:38:56CSS

使用CSS制作两页个人简历

创建两页的个人简历需要合理布局和分页控制，以下是实现方法：

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">
            <!-- 第一页内容 -->
        </div>
        <div class="page page-2">
            <!-- 第二页内容 -->
        </div>
    </div>
</body>
</html>

CSS样式设置

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

.resume {
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    position: relative;
}

.page {
    padding: 20mm;
    height: 257mm; /* 297mm - 上下各20mm */
    position: relative;
}

.page-1 {
    /* 第一页特定样式 */
}

.page-2 {
    /* 第二页特定样式 */
}

分页控制技巧

使用CSS的page-break属性确保打印时分页：

css个人简历制作两页

@media print {
    .page {
        page-break-after: always;
    }
    .page:last-child {
        page-break-after: auto;
    }
}

内容布局建议

左侧栏放置个人信息、技能等固定内容：

css个人简历制作两页

.sidebar {
    width: 30%;
    float: left;
    padding-right: 20px;
}

.main-content {
    width: 70%;
    float: left;
}

响应式设计

添加媒体查询适应不同设备：

@media (max-width: 768px) {
    .sidebar, .main-content {
        width: 100%;
        float: none;
    }
}

视觉增强技巧

使用CSS变量统一配色：

:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
}

.header {
    background-color: var(--primary-color);
    color: white;
    padding: 20px;
}

完整示例结构

<!-- 第一页 -->
<div class="page page-1">
    <header class="header">
        <h1>姓名</h1>
        <p>职位/职业</p>
    </header>

    <div class="sidebar">
        <section class="contact">
            <h3>联系方式</h3>
            <!-- 联系信息 -->
        </section>

        <section class="skills">
            <h3>技能</h3>
            <!-- 技能列表 -->
        </section>
    </div>

    <div class="main-content">
        <section class="experience">
            <h2>工作经历</h2>
            <!-- 工作经历 -->
        </section>
    </div>
</div>

<!-- 第二页 -->
<div class="page page-2">
    <div class="main-content">
        <section class="education">
            <h2>教育背景</h2>
            <!-- 教育信息 -->
        </section>

        <section class="projects">
            <h2>项目经验</h2>
            <!-- 项目列表 -->
        </section>

        <section class="certifications">
            <h2>证书</h2>
            <!-- 证书列表 -->
        </section>
    </div>
</div>

通过以上CSS和HTML结构，可以创建专业的两页个人简历，既适合屏幕浏览也适合打印输出。