当前位置：首页 > news >正文

衡水移动网站建设报价seo关键词排名优化的方法

news 2025/8/8 13:37:30

衡水移动网站建设报价,seo关键词排名优化的方法,wordpress自定义站点,建设银行网站支付流程前言步骤条是一种用于引导用户按照特定流程完成任务的导航条，在各种分步表单交互场景中广泛应用。例如：在HIS系统-门诊医生站中的接诊场景中，我们就可以使用步骤条来实现。她的执行步骤分别是：门诊病历>遗嘱录入>完成接诊…

前言

步骤条是一种用于引导用户按照特定流程完成任务的导航条，在各种分步表单交互场景中广泛应用。例如：在HIS系统-门诊医生站中的接诊场景中，我们就可以使用步骤条来实现。她的执行步骤分别是：门诊病历=>遗嘱录入=>完成接诊。
在这里插入图片描述

我们发现，步骤条通常由编号、名称和引导线三个基本要素组成。接下来，我们来根据这三个基本要素来进行实现

确定结构

对于步骤条这种呈现顺序的列表结构，在HTML标签选择上，使用ul或ol标签可以让语义更加清晰。

<ol class="steps"><li>注册</li><li>域认证</li><li>身份校验</li><li class="active">风险等级评估</li><li>开通账号</li>
</ol>

样式

.steps {display: flex;/* 按水平均匀分布，行首行尾两端靠齐 */justify-content: space-between;margin: 0;padding: 0;/* 定义CSS计数器 */counter-reset: order;list-style: none;--normal-color: #666;--active-color: #5082f5;
}.steps>li {counter-increment: order;/* 弹性宽度（根据其内容来调整） */flex: auto;/* 内联块级弹性伸缩盒子 */display: inline-flex;align-items: center;color: var(--active-color)
}.steps>li::before {content: counter(order);width: 1.4em;line-height: 1.4em;margin-right: 0.5em;vertical-align: middle;text-align: center;border-radius: 50%;border: 1px solid;/* 布局宽度不够时禁止收缩 */flex-shrink: 0;
}.steps>li:not(:last-child)::after {content: '';/* width: 60px; *//* 让引导线和文本垂直居中 *//* vertical-align: middle; *//* 占满 li 中的剩余宽度 */flex: 1;margin: 0 1em;/* 不指定颜色，则自动继承自身color或父级color */border-bottom: 1px solid;opacity: .6;
}.steps>li:last-child {flex: none;
}
/* "已完成"和“进行中”的样式定义 */.steps>.active {color: var(--active-color)
}.steps>.active::before {color: #fff;background: var(--active-color);border-color: var(--active-color);
}.steps>.active::after,
.steps>.active~li {/* “进行中”后面的引导线按普通色显示 */color: var(--normal-color);
}

交互

const listItems = document.querySelectorAll(".steps li")
listItems.forEach(li => {li.addEventListener("click", () => {listItems.forEach(smalLi => {smalLi.classList.remove('active')})li.classList.toggle("active")})
})