如何制作与截图风格一致的人格测试页面？（HTML/CSS/WordPress）

一、HTML + CSS 原生实现 #

核心结构设计 #

• 顶部导航栏：包含品牌标识、测试进度提示
• 问题展示区：居中显示问题文本，搭配梯度选项按钮（如「非常不同意」到「非常同意」）
• 进度条：直观展示测试完成进度
• 底部操作区：包含「上一题」「下一题」按钮，测试结束后显示结果入口

关键样式还原 #

• 配色：主色调采用深蓝色系，按钮hover状态用浅蓝高亮，选项区分选中/未选中视觉状态
• 排版：问题文本用大字号粗体，选项文本用中等字号，进度条采用圆角矩形样式
• 交互：选项点击添加选中动画（边框变色、背景填充），按钮点击带轻微缩放反馈

基础代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人格测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            background-color: #1a365d;
            color: white;
        }
        .progress-text {
            font-size: 0.9rem;
        }
        .question-container {
            max-width: 800px;
            margin: 4rem auto;
            padding: 0 1rem;
        }
        .question-text {
            font-size: 1.5rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 2rem;
            color: #1a365d;
        }
        .options-group {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
        }
        .option-btn {
            flex: 1;
            padding: 1rem;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            background-color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
        }
        .option-btn.selected {
            background-color: #3182ce;
            color: white;
            border-color: #2b6cb0;
        }
        .option-btn:hover {
            border-color: #3182ce;
        }
        .progress-bar {
            width: 80%;
            height: 8px;
            background-color: #e2e8f0;
            border-radius: 4px;
            margin: 2rem auto;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background-color: #3182ce;
            width: 20%;
            transition: width 0.5s ease;
        }
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 3rem;
        }
        .action-btn {
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 8px;
            background-color: #1a365d;
            color: white;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s ease;
        }
        .action-btn:hover {
            background-color: #2c5282;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <div class="brand">人格测试</div>
        <div class="progress-text">第1题 / 共10题</div>
    </div>
    <div class="progress-bar">
        <div class="progress-fill"></div>
    </div>
    <div class="question-container">
        <div class="question-text">我更倾向于在团队中主导决策</div>
        <div class="options-group">
            <button class="option-btn">非常不同意</button>
            <button class="option-btn">不同意</button>
            <button class="option-btn">中立</button>
            <button class="option-btn">同意</button>
            <button class="option-btn">非常同意</button>
        </div>
    </div>
    <div class="action-buttons">
        <button class="action-btn" disabled>上一题</button>
        <button class="action-btn">下一题</button>
    </div>
    <script>
        const optionBtns = document.querySelectorAll('.option-btn');
        optionBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                optionBtns.forEach(b => b.classList.remove('selected'));
                btn.classList.add('selected');
            });
        });
    </script>
</body>
</html>

二、WordPress 实现方案 #

1. 主题与布局搭建 #

• 选择轻量可自定义主题（如 GeneratePress），通过主题自定义面板调整配色为深蓝色系，匹配目标风格
• 用Gutenberg编辑器搭建页面结构：添加导航块、标题块、按钮组块，配合第三方插件实现进度条

2. 插件推荐 #

• WP Quiz Maker：支持创建多选项测试题，自定义选项样式、进度条，完成后可展示结果页面，通过自定义CSS修改插件样式
• Formidable Forms：利用表单功能搭建测试题，设置单选按钮组字段，通过表单逻辑记录选择、计算并展示人格结果

3. 自定义样式示例 #

在WordPress后台「外观」-「自定义」-「额外CSS」中添加：

/* 调整选项按钮样式 */
.wp-quiz-maker .option-container .option {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin: 0 0.5rem;
    cursor: pointer;
}
.wp-quiz-maker .option-container .option.selected {
    background-color: #3182ce;
    color: white;
    border-color: #2b6cb0;
}

三、细节还原要点 #

• 响应式适配：移动端自动堆叠选项按钮，保持布局整洁
• 交互反馈：所有可点击元素添加hover、active状态视觉效果
• 进度可视化：实时更新进度条和题目计数，清晰展示测试进程

内容的提问来源于stack exchange，提问作者Matrix