CSS:导航栏三角箭头
用CSS实现导航流程图的样式。可根据自己的需求进行修改，代码精略的写了一下。
注：场景一和场景二在分辨率比较低的情况下会有一个1px的缝隙不太优雅，自行处理。有个方法是直接在每个外面包一个DIV，用动态样式设置底色。
场景一、实现效果图的导航栏
代码部分：
/** 组件：步骤条样式 */
const StepModel = (list: any) => {return (<><div className={styles.step}>{list.map((item: any) => {return (<divclassName={`${styles.stepMenu} ${item.success ? styles.successText : styles.defaultText} ${item.status ? styles.stepMenuActive : ''}`}>{item.success ? (<><div className={`${styles.icon} ${styles.iconSuccess}`}><img src={require(`@/assets/imgs/success.png`)} alt="" /></div></>) : (<><imgclassName={styles.icon}src={require(`@/assets/imgs/${item.activeIcon ? item.activeIcon : item.icon}.png`)}alt=""/></>)}{item.name}</div>);})}</div></>);
};/** 组件样式 */
.step {width: 100%;height: 32px;margin-top: 8px;font-size: 12px;font-weight: 400;display: flex;justify-content: space-between;filter: drop-shadow(-1px 1px 9px rgba(8, 38, 55, 0.1));.successText {color: #222222;}.defaultText {color: #788295;}.stepMenu {padding: 0px 10px 0 30px;line-height: 32px;background: white;display: flex;align-items: center;position: relative;flex-basis: calc((100%) / 5);.icon {width: 16px;height: 16px;margin-right: 8px;}.iconSuccess {background: #00b864;border-radius: 50%;display: flex;align-items: center;justify-content: center;}}/** 箭头样式 */.stepMenu:after {content: '';display: block;position: absolute;right: -11px;top: 5px;z-index: 10;border-left: 15px solid white;border-top: 7px solid white;border-right: 7px solid transparent;border-bottom: 15px solid transparent;transform: rotate(135deg);border-top-left-radius: 6px;filter: drop-shadow(-3px -4px 2px rgba(8, 38, 55, 0.1));}/** 选中样式 */.stepMenuActive {color: #fff;background: linear-gradient(to right, #60c9fc, #296be8);font-weight: 700;}/** 选中样式：箭头 */.stepMenuActive:after {border-left: 16px solid #296be8;border-top: 7px solid #296be8;border-right: 7px solid transparent;border-bottom: 16px solid transparent;}/** first 样式加圆角 */.stepMenu:first-child {border-radius: 4px 0 0 4px;padding-left: 18px;}/** last 样式加圆角 */.stepMenu:last-child {border-radius: 0px 4px 4px 0px;padding-right: 18px;}.stepMenu:last-child:after {display: none;}
}场景二：实现效果图
效果图：
代码：直接引入的在线JQ
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>body {padding: 50px 20px 0 20px;}.step {width: 100%;height: 32px;margin-top: 8px;font-size: 12px;font-weight: 400;display: flex;justify-content: space-around;}.step > div {padding: 0px 10px 0 30px;line-height: 32px;background: #dceefe;display: inline-block;color: #1e9fff /*#50abe4*/;position: relative;width: 16%;}.step div:after {content: "";display: block;border-top: 16px solid transparent;border-bottom: 16px solid transparent;border-left: 17px solid #dceefe;position: absolute;right: -17px;top: 0;}.step div:after {content: "";display: block;border-top: 16px solid transparent;border-bottom: 16px solid transparent;border-left: 17px solid #dceefe;position: absolute;right: -17px;top: 0;z-index: 10;}.step div:before {content: "";display: block;border-top: 16px solid #dceefe;border-bottom: 16px solid #dceefe;border-left: 17px solid #fff;position: absolute;left: 0px;top: 0;}.step div:first-child {border-radius: 4px 0 0 4px;padding-left: 18px;}.step div:last-child {border-radius: 0px 4px 4px 0px;padding-right: 18px;}.step div:first-child:before {display: none;}.step div:last-child:after {display: none;}.step div.active {background: #1e9fff;color: #fff;}.step div.active:after {border-left-color: #1e9fff;}.step div.active:before {border-top: 16px solid #1e9fff;border-bottom: 16px solid #1e9fff;}</style></head><body><div class="step"><div class="active">第一步</div><div>第二步</div><div>第三步</div><div>第四步</div><div>第五步</div></div><script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script><script type="text/javascript">$(function () {gotoStep(2);});function gotoStep(step) {$(".step div").removeClass("active"); // 移除所有 div 的 active 类$(".step div").eq(step - 1).addClass("active"); // 给指定索引的 div 添加 active 类}</script></body>
</html>
相关文章：
CSS:导航栏三角箭头
用CSS实现导航流程图的样式。可根据自己的需求进行修改，代码精略的写了一下。 注：场景一和场景二在分辨率比较低的情况下会有一个1px的缝隙不太优雅，自行处理。有个方法是直接在每个外面包一个DIV，用动态样式设置底色。 场景一、…...
onlyoffice Command service(命令服务)使用示例
一、说明 文档在这里：https://api.onlyoffice.com/docs/docs-api/additional-api/command-service/ 命令服务提供有几个简单的接口封装。也提供了前端和后端同时操作文档的可能。 二、正文 命令服务地址：https://documentserver/coauthoring/Com…...
QSS 设置bug
问题描述： 在QWidget上add 一个QLabel，但是死活不生效 原因： c 主程序如下： QWidget* LOGO new QWidget(logo_wnd);LOGO->setFixedSize(logo_width, 41);LOGO->setObjectName("TittltLogo");QVBoxLayout* tit…...
交换排序——快速排序
交换排序——快速排序 7.7 交换排序——快速排序快速排序概念c语言的库函数qsort快速排序框架quickSort 7.7 交换排序——快速排序 快速排序概念 快速排序是Hoare于1962年提出的一种二叉树结构的交换排序方法（下文简称快排），其基本思想为&a…...
nodejs入门（1）：nodejs的前后端分离
一、引言 我关注nodejs还是从前几年做了的一个电力大数据展示系统开始的，当然，我肯定是很多年的计算机基础的，万变不离其宗。 现在web网站都流行所谓的前后端结构，不知不觉我也开始受到这个影响，以前都是前端直接操作…...
笔记｜M芯片MAC (arm64) docker上使用 export / import / commit 构建amd64镜像
很简单的起因，我的东西最终需要跑在amd64上，但是因为mac的架构师arm64，所以直接构建好的代码是没办法跨平台运行的。直接在arm64上pull下来的docker镜像也都是arm64架构。 检查镜像架构： docker inspect 8135f475e221 | grep Arc…...
gorm框架
连接 需要下载mysql的驱动 go get gorm.io/driver/mysql go get gorm.io/gorm 约定 主键：GORM 使用一个名为ID 的字段作为每个模型的默认主键。表名：默认情况下，GORM 将结构体名称转换为 snake_case 并为表名加上复数形式。 例如…...
免费送源码：Java+Springboot+MySQL Springboot多租户博客网站的设计 计算机毕业设计原创定制
Springboot多租户博客网站的设计 摘 要 博客网站是当今网络的热点，博客技术的出现使得每个人可以零成本、零维护地创建自己的网络媒体，Blog站点所形成的网状结构促成了不同于以往社区的Blog文化，Blog技术缔造了“博客”文化。本文课题研究的“…...
【ASR技术】WhisperX安装使用
介绍 WhisperX 是一个开源的自动语音识别（ASR）项目，由 m-bain 开发。该项目基于 OpenAI 的 Whisper 模型，通过引入批量推理、强制音素对齐和语音活动检测等技术。提供快速自动语音识别（large-v2 为 70 倍实时…...
【计算机网络】协议定制
一、结构化数据传输流程 这里涉及协议定制、序列化/反序列化的知识 对于序列化和反序列化，有现成的解决方案：①json ②probuff ③xml 二、理解发送接收函数 我们调用的所有发送/接收函数，根本就不是把数据发送到网络中！本质都是…...
【SQL】mysql常用命令
为方便查询，特整理MySQL常用命令。 约定：$后为Shell环境命令，>后为MySQL命令。 1 常用命令 第一步，连接数据库。 $ mysql -u root -p # 进入MySQL bin目录后执行，回车后输入密码连接。# 常用参数&…...
阿里云引领智算集群网络架构的新一轮变革
阿里云引领智算集群网络架构的新一轮变革 云布道师 11 月 8 日~ 10 日在江苏张家港召开的 CCF ChinaNet（即中国网络大会）上，众多院士、教授和业界技术领袖齐聚一堂，畅谈网络未来的发展方向，聚焦智算集群网络的创新变…...
几何合理的分片段感知的3D分子生成 FragGen - 评测
FragGen 来源于 2024 年 3 月 25 日 预印本的文章，文章题目是 Deep Geometry Handling and Fragment-wise Molecular 3D Graph Generation， 作者是 Odin Zhang，侯廷军，浙江大学药学院。FragGen 是一个基于分子片段的 3D 分子生成模…...
Python爬虫下载新闻，Flask展现新闻（2）
上篇讲了用Python从新闻网站上下载新闻，本篇讲用Flask展现新闻。关于Flask安装网上好多教程，不赘述。下面主要讲 HTML-Flask-数据 的关系。 简洁版 如图，页面简单，主要显示新闻标题。 分页，使用最简单的分页技术&…...
监控易监测对象及指标之：全面监控华为FusionInsight服务
随着大数据技术的广泛应用，华为FusionInsight以其卓越的性能和稳定性，成为了众多企业处理和分析海量数据的首选平台。然而，为了确保FusionInsight服务的持续稳定运行，对其进行全面监控至关重要。本文基于监控易工具，对…...
SQL面试题——蚂蚁SQL面试题 会话分组问题
会话分组问题 这里的分组不是简单的分组，而是会话的分组。 比如说，进入一个网站以后，可以连续的点击很多个页面，后台会记录用户的行为日志； 如果T日上午连续点击几个页面后退出了网站，直到第二天的下午才再次进入网站，单单从时间线上来看，昨天退出的那条日志跟今天进…...
nfs服务器--RHCE
一，简介 NFS（Network File System，网络文件系统）是FreeBSD支持的文件系统中的一种，它允许网络中的计 算机（不同的计算机、不同的操作系统）之间通过TCP/IP网络共享资源，主要在unix系…...
React--》如何高效管理前端环境变量：开发与生产环境配置详解
在前端开发中，如何让项目在不同环境下表现得更为灵活与高效，是每个开发者必须面对的挑战，从开发阶段的调试到生产环境的优化，环境变量配置无疑是其中的关键。 env配置文件：通常用于管理项目的环境变量，环境…...
Javascript高级—函数柯西化
函数柯西化（经典面试题） // 实现一个add方法，使计算结果能够满足如下预期： add(1)(2)(3) 6; add(1, 2, 3)(4) 10; add(1)(2)(3)(4)(5) 15;function add() {// 第一次执行时，定义一个数组专门用来存储所有的参数var…...
Sql进阶:字段中包含CSV,如何通过Sql解析CSV成多行多列?
Sql进阶 一、问题描述二、解决思路<一>、拆成多行<二>、拆成多列 三、代码实现 一、问题描述 Oracle数据库中某个字段value是CLOB类型,存的是csv格式的数据,如下所示 classnovalue1name,age,sex,… ‘李世民’,20,‘M’,…’ ‘李治’,18,‘M’,… ‘武则天’,16…...
linux之调度管理(5)-实时调度器
一、概述 在Linux内核中，实时进程总是比普通进程的优先级要高，实时进程的调度是由Real Time Scheduler(RT调度器)来管理，而普通进程由CFS调度器来管理。 实时进程支持的调度策略为：SCHED_FIFO和SCHED_RR。 SCHED_FIFOÿ…...
mybatis-plus: mapper-locations: “classpath*:/mapper/**/*.xml“配置！！！解释
和mybatis一样的道理！！！！如果不指定这个配置，通常要求 XML 映射文件和 Mapper 接口的包名和结构相同！！！！ 如果没有配置 mapper-locations，通常文件结构应遵循…...
nacos-operator在k8s集群上部署nacos-server2.4.3版本踩坑实录
文章目录 操作步骤1. 拉取仓库代码2. 安装nacos-operator3. 安装nacos-server 坑点一坑点二nacos-ui页面访问同一集群环境下微服务连接nacos地址配置待办参考文档 操作步骤 1. 拉取仓库代码 （这一步主要用到代码中的相关yml文件，稍加修改用于部署容器&…...
面试篇-项目管理
⼀、构建管理 项目为什么选择Maven构建? 选择Maven进行项目构建有以下几个主要原因： 1. 依赖管理：Maven 提供了强大的依赖管理功能，可以自动下载项目所需的第三方库和依赖，并且可以管理这些依赖的版本、范围等信息。这简化了项…...
数仓建设之Oracle常见语法学习
1. 字符串截取 select substr(AAA-BBB, 1, instr(AAA-BBB, -, -1) - 1) 值 from dual; --AAA select substr(AAA-BBB, instr(AAA-BBB, -, -1) 1) 值 from dual; --BBB2. 帆软报表有参数SQL select a.agency_code, a.agency_name, a.agency_typefrom dw.dim_ta_subred_agency…...
物联网智能技术的深入探讨与案例分析
✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...
python语言基础-5 进阶语法-5.2 装饰器-5.2.2 简单装饰器
声明：本内容非盈利性质，也不支持任何组织或个人将其用作盈利用途。本内容来源于参考书或网站，会尽量附上原文链接，并鼓励大家看原文。侵删。 5.2.2 简单装饰器 装饰器的形式就是一个闭包，下面是一个简单的定义并使用…...
TransFormer--解码器：带掩码的多头注意力层
TransFormer--解码器：带掩码的多头注意力层 以英法翻译任务为例，假设训练数据集样本如下表所示。 原句目标翻译I am goodJe vais bienGood morningBonjourThank you very muchMerci beaucoup 上表所示的数据集由两部分组成：原句和目标句。在…...
【ArcGIS微课1000例】0130：图层组详解与使用
文章目录 一、图层组概述二、创建图层组三、在图层组中管理图层四、对话框中图层组的列表一、图层组概述 图层组包含其他图层。图层组有助于对地图中相关类型的图层进行组织，并且可用于定义高级绘制选项。例如，假设在地图上有两个图层分别用于表示铁路和高速公路。您可将这些…...
Linux中配置ntp服务
NTP：是Network Time Protocol的缩写又 称网络时间协议，是用来使计算机时间同步化的一种协议，用来同步网络中各主机的时 间，在linux系统中早期使用ntp来实现，后来使用chrony来实现。Chrony 应用本身已经有 几年了&#…...
外贸营销型网站建设多少钱/百度关键词工具在哪里
【小白从小学Python、C、Java】 【Python-计算机等级考试二级】 【Python-数据分析】 Python字典中根据键读取值并删除该键值对 pop() 选择题 以下python代码依次输出的结果是什么? x {"a" : 1, "b" : 2} y x.pop("a") print(x,x) print(y…...
广西建设工程质量检测试验协会网站/湖南网站制作公司
<body> <div class"fd_0"> <div class"fd_1"> <table> <tr> <td> <p>博看文思是三星移动全球三大核心开发商之一（亚洲唯一一家）；也是法国电信（Ora…...
网站建设公制度/海口seo快速排名优化
写在前面日复一日的生活、日复一日的工作，时间久了，可能会有些厌恶，仿佛每天清晨起就在盼着黄昏来临，但每一天又是那样的漫长，有时候真的觉得度日如年四个字是那么中肯，所以现代社会才会有那么多的人想要放…...
做传奇网站报毒怎么处理/网络营销课程培训
1. 前言Kobject是Linux设备模型的基础，也是设备模型中最难理解的一部分(可参考Documentation/kobject.txt的表述)。因此有必要先把它分析清楚。2. 基本概念由“Linux设备模型(1)_基本概念”可知，Linux设备模型的核心是使用Bus、Class、Device、Driver四个…...
wordpress全站关闭评论/下拉框关键词软件
1、RequestMapping RequestMapping 既可以用在类级别，也可以用在方法级别，当它定义在类级别的时候，标明该控制器所处理的请求都将被映射到这个路径下。另外，RequestMapping中可以使用method属性，如果指定了method属性…...
做 爱 网站视频短片/网站设计需要什么
P25-前端基础-CSS盒子模型_内边框 1.概述 内边距（padding） 内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上。 盒子的可见框的大小，由内容区 内边距 和 边框共同决定，所以在计算盒子大小时，需要…...