响应式个人简历网页：中英文切换、明暗主题，HTML+CSS+JS 实现

本文将介绍如何使用 HTML、CSS 和 JavaScript 创建一个响应式个人简历网页，包含中英文切换功能和明暗主题切换功能。

思路

创建一个 HTML 文件，包含个人简历的内容和英文版本的内容。
在 HTML 文件中使用 CSS 来控制页面的布局和样式。
使用 JavaScript 来实现切换功能，当用户点击切换按钮时，切换页面的语言版本。
使用 CSS 来实现明暗主题的切换，当用户点击切换按钮时，切换页面的主题样式。

UML 用例分析图

classDiagram
    class User {
        +name: String
        +changeLanguage(): void
        +changeTheme(): void
    }
    class ResumePage {
        +content: String
        +displayContent(): void
    }
    class LanguageSwitchButton {
        +onClick(): void
    }
    class ThemeSwitchButton {
        +onClick(): void
    }
    User -- ResumePage
    User -- LanguageSwitchButton
    User -- ThemeSwitchButton
    LanguageSwitchButton -- ResumePage
    ThemeSwitchButton -- ResumePage

以上是一个简单的 UML 用例分析图，其中 User 类表示用户，ResumePage 类表示个人简历网页，LanguageSwitchButton 类表示切换按钮，ThemeSwitchButton 类表示主题切换按钮。User 类与 ResumePage 类、LanguageSwitchButton 类、ThemeSwitchButton 类之间存在关联关系，表示用户可以通过点击按钮来切换语言和主题。

详细步骤

1. 创建 HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>个人简历</h1>
        <button id="languageSwitchButton">切换语言</button>
        <button id="themeSwitchButton">切换主题</button>
    </header>
    <main>
        <div id="resumeContent">
            <!-- 中文版本简历内容 -->
        </div>
        <div id="resumeContentEn">
            <!-- 英文版本简历内容 -->
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

2. 编写 CSS 样式

/* style.css */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}

main {
    padding: 20px;
}

#resumeContent, #resumeContentEn {
    display: none;
}

/* 明暗主题样式 */
.dark-theme {
    background-color: #222;
    color: #fff;
}

.dark-theme header {
    background-color: #333;
}

.dark-theme button {
    background-color: #555;
    color: #fff;
}

3. 使用 JavaScript 实现切换功能

// script.js
const languageSwitchButton = document.getElementById("languageSwitchButton");
const themeSwitchButton = document.getElementById("themeSwitchButton");
const resumeContent = document.getElementById("resumeContent");
const resumeContentEn = document.getElementById("resumeContentEn");

let isEnglish = false;
let isDarkTheme = false;

languageSwitchButton.addEventListener("click", () => {
    isEnglish = !isEnglish;
    if (isEnglish) {
        resumeContentEn.style.display = "block";
        resumeContent.style.display = "none";
    } else {
        resumeContent.style.display = "block";
        resumeContentEn.style.display = "none";
    }
});

themeSwitchButton.addEventListener("click", () => {
    isDarkTheme = !isDarkTheme;
    document.body.classList.toggle("dark-theme");
});

总结

以上步骤详细介绍了如何创建一个包含中英文切换和明暗主题切换功能的响应式个人简历网页。您可以根据自己的需求进行修改和扩展。

注意：

请将所有代码文件保存在同一个文件夹中。
在 HTML 文件中添加您的个人简历内容。
使用浏览器打开 HTML 文件即可查看效果。