步骤导航 css

步骤导航（Step Navigation）是一种用户界面设计模式，用于引导用户完成一系列有序的步骤。这种设计通常用于表单填写、向导式设置、多步骤流程等场景。CSS（层叠样式表）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言，它可以帮助我们实现步骤导航的视觉效果。

基础概念

步骤导航通常由一系列步骤组成，每个步骤代表流程中的一个阶段。用户可以通过这些步骤逐步完成整个流程。每个步骤通常包括一个标题和一个内容区域。

类型

线性步骤导航：用户必须按顺序完成所有步骤，不能跳过任何步骤。
非线性步骤导航：用户可以选择跳过某些步骤，或者根据需要重新访问之前的步骤。

应用场景

在线表单填写
账户设置向导
安装向导
多步骤的配置流程

示例代码

以下是一个简单的线性步骤导航的HTML和CSS示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step Navigation</title>
    <style>
        .step-navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .step {
            position: relative;
            padding: 10px 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .step.active {
            background-color: #e9e9e9;
            border-color: #007bff;
        }
        .step::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -1px;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #ccc;
        }
        .step.active::after {
            border-left-color: #007bff;
        }
        .step-content {
            display: none;
        }
        .step.active .step-content {
            display: block;
        }
    </style>
</head>
<body>
    <div class="step-navigation">
        <div class="step active">Step 1</div>
        <div class="step">Step 2</div>
        <div class="step">Step 3</div>
    </div>
    <div class="step-content active">Content for Step 1</div>
    <div class="step-content">Content for Step 2</div>
    <div class="step-content">Content for Step 3</div>

    <script>
        const steps = document.querySelectorAll('.step');
        steps.forEach((step, index) => {
            step.addEventListener('click', () => {
                steps.forEach(s => s.classList.remove('active'));
                step.classList.add('active');
                document.querySelectorAll('.step-content').forEach(content => content.style.display = 'none');
                document.querySelectorAll('.step-content')[index].style.display = 'block';
            });
        });
    </script>
</body>
</html>