js+css实现可配置json的个人简历代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现可配置json的个人简历代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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 type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        /* 全局与字体 */
:root {
    --primary-color: #2c3e50; /* 深蓝灰 */
    --secondary-color: #1abc9c; /* 青色 */
    --light-gray: #ecf0f1; /* 浅灰 */
    --medium-gray: #bdc3c7; /* 中灰 */
    --dark-gray: #7f8c8d; /* 深灰 */
    --text-color: #34495e; /* 文本颜色 */
    --sidebar-bg: var(--primary-color);
    --sidebar-text: var(--light-gray);
    --main-bg: #ffffff;
    --section-border: var(--light-gray);
}

body {
    font-family: 'Lato', 'Noto Sans SC', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6; /* 页面背景色 */
    color: var(--text-color);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 0;
}

a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color);
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 容器与布局 */
.resume-container {
    max-width: 1000px;
    margin: 40px auto;
    background-color: var(--main-bg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    border-radius: 8px;
    overflow: hidden;
}

.sidebar {
    width: 35%;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 40px 30px;
    box-sizing: border-box;
}

.main-content {
    width: 65%;
    padding: 40px 30px;
    box-sizing: border-box;
}

/* 侧边栏 */
.sidebar h3 {
    color: var(--secondary-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 8px;
    margin-bottom: 15px;
    font-size: 1.2em;
    display: flex;
    align-items: center;
}

.sidebar .icon {
    margin-right: 10px;
    color: var(--secondary-color);
    width: 20px; /* 固定图标宽度 */
    text-align: center;
}

.personal-info-block {
    text-align: center;
    margin-bottom: 30px;
}

.profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--secondary-color);
    margin-bottom: 15px;
    object-fit: cover;
}

.name {
    font-size: 1.8em;
    margin-bottom: 5px;
    color: var(--text-light);
}

.title {
    font-size: 1.1em;
    font-weight: 400;
    color: var(--medium-gray);
    margin-bottom: 0;
}

.contact-block ul li, .social-block ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 0.95em;
}
.contact-block ul li i, .social-block ul li i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
    color: var(--secondary-color);
}
.contact-block ul li a, .social-block ul li a {
    color: var(--sidebar-text);
}
.contact-block ul li a:hover, .social-block ul li a:hover {
    color: var(--secondary-color);
}


.skills-block .skill-category {
    margin-bottom: 15px;
}

.skills-block h4 {
    color: var(--sidebar-text);
    font-size: 1em;
    margin-bottom: 8px;
    font-weight: 500;
}

.skills-block .skill-item {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--sidebar-text);
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 6px;
    margin-bottom: 6px;
    font-size: 0.9em;
}

/* 主内容区 */
.main-content .section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--section-border);
}
.main-content .section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.main-content h3 {
    color: var(--primary-color);
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 8px;
    margin-bottom: 20px;
    font-size: 1.4em;
    display: flex;
    align-items: center;
}
.main-content .icon {
    margin-right: 10px;
    color: var(--secondary-color);
.........完整代码请登录后点击上方下载按钮下载查看