HTML 简历项目教程

2024-09-14 00:25:43作者：尤辰城Agatha

1. 项目目录结构及介绍

html-resume/
├── css/
│   ├── main.css
│   └── normalize.css
├── fonts/
│   ├── FontAwesome.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2
├── images/
│   └── avatar.png
├── index.html
└── README.md

目录结构说明

css/: 存放项目的样式文件，包括 main.css 和 normalize.css。
- main.css: 主要样式文件，定义了页面的布局和样式。
- normalize.css: 用于统一不同浏览器的默认样式。
fonts/: 存放项目使用的字体文件，主要是 FontAwesome 字体文件。
images/: 存放项目使用的图片文件，例如头像图片 avatar.png。
index.html: 项目的启动文件，包含了简历的主要内容和结构。
README.md: 项目的说明文件，通常包含项目的简介、使用方法等信息。

2. 项目启动文件介绍

`index.html`

index.html 是项目的启动文件，包含了简历的主要内容和结构。以下是文件的主要部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resume</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <div class="left-panel">
            <!-- 左侧个人信息 -->
        </div>
        <div class="right-panel">
            <!-- 右侧详细信息 -->
        </div>
    </div>
</body>
</html>

主要内容

<head>: 包含了页面的元数据和样式文件的引用。
- normalize.css: 用于统一不同浏览器的默认样式。
- main.css: 主要样式文件，定义了页面的布局和样式。
<body>: 页面的主体部分，包含了简历的布局结构。
- container: 主要的布局容器，包含了左侧和右侧两个面板。
- left-panel: 左侧面板，通常用于显示个人信息。
- right-panel: 右侧面板，通常用于显示详细的工作经历、教育背景等信息。

3. 项目配置文件介绍

`main.css`

main.css 是项目的主要样式文件，定义了页面的布局和样式。以下是文件的主要部分：

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f4f4f4;
}

.container {
    display: flex;
    width: 100%;
    height: 100%;
}

.left-panel {
    width: 30%;
    background-color: #333;
    color: #fff;
    padding: 20px;
}

.right-panel {
    width: 70%;
    padding: 20px;
}