css 制作向导样式
使用 CSS 制作向导样式
向导样式（Wizard）通常用于多步骤表单或流程指示，以下是通过 CSS 实现的方法：
HTML 结构
基础结构包含步骤容器和步骤项，通常使用无序列表：
<div class="wizard">
<ul class="wizard-steps">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>基础样式
通过 Flex 布局实现水平排列，并添加连接线效果：
.wizard-steps {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
position: relative;
}
.wizard-steps li {
flex: 1;
text-align: center;
position: relative;
padding: 10px;
background: #f5f5f5;
}
.wizard-steps li:not(:last-child):after {
content: "";
position: absolute;
top: 50%;
right: -20px;
width: 40px;
height: 2px;
background: #ddd;
z-index: 1;
}
.wizard-steps li.active {
background: #4CAF50;
color: white;
}进阶样式
添加圆形编号和动画效果：
.wizard-steps li:before {
content: counter(step);
counter-increment: step;
display: block;
width: 30px;
height: 30px;
margin: 0 auto 5px;
line-height: 30px;
border-radius: 50%;
background: #ddd;
color: #333;
}
.wizard-steps li.active:before {
background: #fff;
color: #4CAF50;
}
.wizard-steps li.completed:after {
background: #4CAF50;
}响应式处理
在小屏幕设备上改为垂直布局：
@media (max-width: 600px) {
.wizard-steps {
flex-direction: column;
}
.wizard-steps li:after {
display: none;
}
}动态交互
通过 JavaScript 添加类名控制步骤状态：
document.querySelectorAll('.wizard-steps li').forEach(step => {
step.addEventListener('click', function() {
// 更新步骤状态逻辑
});
});关键点在于：
- 使用伪元素创建连接线
- 通过 Flex 布局实现均匀分布
- 使用 CSS 计数器自动生成步骤编号
- 响应式设计适应不同屏幕尺寸
- 状态类名（active/completed）控制视觉反馈
