CSS自己实现一个步骤条

前言

步骤条是一种用于引导用户按照特定流程完成任务的导航条,在各种分步表单交互场景中广泛应用。例如:在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")
    })
})

最终效果

在这里插入图片描述

知识点总结

  • flex容器的 justify-content: space-between; 可令子元素按显示方向均匀分布,两端分散对齐;
  • inline-flex: 盒子既能像flex容器那样轻松拿捏其子元素的布局,又能像行内块元素一样平易近人;
  • flex: number; 对于宽度(或高度)能占尽占;
  • flex: auto; 从自身实际情况出发应占尽占,共同富裕;
  • flex-shrink: 用来设置flex元素的可压榨基准,与它对应的是flex-basis,用来设置可膨胀基准

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/77621.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式】装饰器模式

装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其结构。这种类型的设计模式属于结构型模式&#xff0c;它是作为现有的类的一个包装。 装饰器模式通过将对象包装在装饰器类中&#xff0c;以便动态地修改其行为…

Gitlab CI/CD笔记-第二天-主机套接字进行构建并push镜像。

一、安装gitlab-runner 1.可以是linux也可以是docker的 2.本文说的是docker安装部署的。 二、直接上.gitlab-ci.yml stages: # List of stages for jobs, and their order of execution - build-image build-image-job: stage: build-image image: harbor.com:543/docke…

【Java转Go】快速上手学习笔记(三)之基础篇二

【Java转Go】快速上手学习笔记&#xff08;二&#xff09;之基础篇一 了解了基本语法、基本数据类型这些使用&#xff0c;接下来我们来讲数组、切片、值传递、引用传递、指针类型、函数、map、结构体。 目录 数组和切片值传递、引用传递指针类型defer延迟执行函数map结构体匿名…

【仿写框架之仿写Tomact】四、封装HttpRequest对象(属性映射http请求报文)、HttpResponse对象(属性映射http响应报文)

文章目录 1、创建HttpRequest对象2、创建HttpResponse对象 1、创建HttpRequest对象 HttpRequest对象中的属性与HTTP协议中的内容对应&#xff0c;用于后序servlet从request中获取请求中的参数。 参照http请求报文&#xff1a; import java.io.BufferedReader; import java…

2023年国赛数学建模思路 - 案例:最短时间生产计划安排

文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 最短时…

FreeModbus——介绍(二)

1.简介 freemodbus_百度百科 (baidu.com) &#xff1a;参考自百度百科&#xff0c;里面还有移植介绍&#xff0c;非常详细 1. FreeMODBUS是一个奥地利人写的Modbus协议。它是一个针对嵌入式应用的一个免费&#xff08;自由&#xff09;的通用MODBUS协议的移植。 2. FreeMOD…

【Linux】模拟实现linux的shell

#include <stdio.h> #include <unistd.h> #include <string.h> #include <stdlib.h> #include <sys/wait.h> #include <sys/types.h> #define NUM 1024 #define SIZE 32 #define SEP " " int main() {//保存输入后的字符串char …

夏威夷等全球多地深陷「末日狂烧」,关键时刻 AI 监测能否跑赢野火?

内容一览&#xff1a;当地时间 8 月 8 日&#xff0c;美国夏威夷州突发野火&#xff0c;当地居民和游客不得不跳入太平洋中躲避火势。截至 8 月 17 日&#xff0c;这场野火已经造成110 人死亡&#xff0c;超过 1000人失踪。与此同时&#xff0c;美国、加拿大、法国等地也正遭遇…

消息队列总结

前言 你用过消息队列么&#xff1f; 说说你们项目里是怎么用消息队列的&#xff1f; 我们有一个订单系统&#xff0c;订单系统会每次下一个新订单的时候&#xff0c;就会发送一条消息到ActiveMQ里面去&#xff0c;后台有一个库存系统&#xff0c;负责获取消息&#xff0c;然后…

实时会话简易版

1、数据存储 Redis缓存、pgsql数据库 2、存储使用 2.1、Redis缓存 1&#xff09;无序集合set&#xff1a;存储未读会话id 2&#xff09;list&#xff08;左进右出&#xff09;&#xff1a;存储会话未读消息 2.2、pgsql数据库 存储用户信息&#xff0c;存储会话id&#…

09 - 连续的多个commit整理成1个

查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;GIT常用场景- 目录 文章目录 将连续的多个commit整理成1个 将连续的多个commit整理成1个 将anranxiaohunzhang和xianglongshibazhang合并起来&#xff08;将anranxiaohunzhang合并到降龙十八掌上&#xff0c;生成新…

【校招VIP】java语言考点之ConcurrentHashMap1.7和1.8

考点介绍&#xff1a; ConcurrentHashMap是JAVA校招面试的热门考点&#xff0c;主要集中在1.7和1.8的底层结构和相关的性能提高。 理解这个考点要从map本身的并发问题出发&#xff0c;再到hashTable的低性能并发安全&#xff0c;引申到ConcurrentHashMap的分块处理。同时要理解…

R语言实现计算净重新分类指数(NRI)和综合判别改善指数(IDI)

两个模型比较&#xff0c;与第一个模型相比&#xff0c;NRI&#xff08;重新分对的 - 重新分错的&#xff09;/总人数。IDI&#xff08;新模型患者平均预测概率-旧模型患者平均预测概率&#xff09;-&#xff08;新模型非患者平均预测概率-旧模型非患者平均预测概率&#xff09…

nginx代理请求到内网不同服务器

需求&#xff1a;之前用的是frp做的内网穿透&#xff0c;但是每次电脑断电重启&#xff0c;路由或者端口会冲突&#xff0c;现在使用汉土云盒替换frp。 需要把公网ip映射到任意一台内网服务器上&#xff0c;然后在这台内网服务器上用Nginx做代理即可访问内网其它服务器&#xf…

如何使用CSS实现一个渐变背景效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现渐变背景效果⭐ 线性渐变&#xff08;Linear Gradient&#xff09;⭐ 径向渐变&#xff08;Radial Gradient&#xff09;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订…

微服务实战项目-学成在线-项目优化(redis缓存优化)

微服务实战项目-学成在线-项目优化(redis缓存优化) 1 优化需求 视频播放页面用户未登录也可以访问&#xff0c;当用户观看试学课程时需要请求服务端查询数据&#xff0c;接口如下&#xff1a; 1、根据课程id查询课程信息。 2、根据文件id查询视频信息。 这些接口在用户未认…

W6100-EVB-PICO 做UDP Server进行数据回环测试(七)

前言 前面我们用W6100-EVB-PICO 开发板在TCP Client和TCP Server模式下&#xff0c;分别进行数据回环测试&#xff0c;本章我们将用开发板在UDP Server模式下进行数据回环测试。 UDP是什么&#xff1f;什么是UDP Server&#xff1f;能干什么&#xff1f; UDP (User Dataqram P…

带你了解—使用内网穿透,公网远程访问本地硬盘文件

文章目录 前言1. 下载cpolar和Everything软件3. 设定http服务器端口4. 进入cpolar的设置5. 生成公网连到本地内网穿透数据隧道 总结 前言 随着云概念的流行&#xff0c;不少企业采用云存储技术来保存办公文件&#xff0c;同时&#xff0c;很多个人用户也感受到云存储带来的便利…

打造专属照片分享平台:快速上手Piwigo网页搭建

文章目录 通过cpolar分享本地电脑上有趣的照片&#xff1a;部署piwigo网页前言1.Piwigo2. 使用phpstudy网页运行3. 创建网站4. 开始安装Piwogo 总结 &#x1f340;小结&#x1f340; &#x1f389;博客主页&#xff1a;小智_x0___0x_ &#x1f389;欢迎关注&#xff1a;&#x…

我国农机自动驾驶系统需求日益增长,北斗系统赋能精准农业

中国现代农业的发展&#xff0c;离不开智能化、自动化设备&#xff0c;迫切需要自动驾驶系统与农用机械的密切结合。自动驾驶农机不仅能够缓解劳动力短缺问题&#xff0c;提升劳作生产效率&#xff0c;同时还能对农业进行智慧化升级&#xff0c;成为解决当下农业痛点的有效手段…