css步骤条
html 代码以及样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css步骤条</title><style>.steps {display: flex;justify-content: space-between;padding: 0;margin: 20px 10px;list-style: none;counter-reset: order; /* 定义css 计时器 */--normal-color: #666;--active-color: #06e;}.steps li {counter-increment: order; /* 选择器增量 */color: var(--active-color); /* 定义变量,默认都是高亮颜色 */}.steps li::before {content: counter(order); /* 使用计数器的数字作为内容 */display: inline-block;width: 1.4em;margin-right: 0.5em;text-align: center;border-radius: 50%;border: 1px solid; /* 这里故意不设置颜色,将来使用继承的颜色 */flex-shrink: 0; /* 行内伪元素,实现计数器 */}/* 步骤项引导线 */.steps li {flex: auto; /* 弹性宽度(根据内容调整) */display: flex;align-items: center;}.steps li:not(:last-child)::after {content: '';flex: 1; /* 内部在开启flex自适应 */margin: 0 1em;border-bottom: 1px solid;opacity: 0.6;}.steps li:last-child {flex: none; /* 最后一项,没必要等分宽度 */}.steps .active::before {/* 设计激活时数字样式 */color: #ffffff;background: var(--active-color);border-color: var(--active-color);}.steps .active::after,.steps .active ~ li {/* 后面的线和step设置成黑色 */color: var(--normal-color);}</style>
</head>
<body><ol class="steps"><li>注册</li><li class="active">域认证</li><li>身份校验</li><li>开通账号</li>
</ol>
</body>
</html>
相关文章:

css步骤条
html 代码以及样式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>css步骤条</title><style>.steps {display: flex;justify-content: space-between;padding: 0;margin: 20px 10px;lis…...
[Hive] 常见函数
文章目录 字符串函数数值函数随机函数日期和时间函数字符串转时间 聚合函数数组函数结构体函数数组函数映射函数 map正则处理JSON 字符串函数 CONCAT(string1, string2, …):将多个字符串连接成一个字符串。 LENGTH(string):返回字符串的长度。 LOWER…...

Mac用NTFS文件夹读写NTFS硬盘 NTFS能复制多大的文件
Mac作为一款备受欢迎的计算机操作系统,具备了许多令人惊叹的功能和特性。然而,对于一些Mac用户来说,使用NTFS格式的硬盘可能存在一些疑问。他们可能想知道Mac是否能够读写NTFS格式的硬盘,以及NTFS格式的硬盘是否有文件大小的限制。…...

【unity3D】Scroll Rect组件—制作下滑列表
💗 未来的游戏开发程序媛,现在的努力学习菜鸡 💦本专栏是我关于游戏开发的学习笔记 🈶本篇是unity的Scroll Rect组件 Scroll Rect组件 基础知识详细说明案例演示——制作一个简单的下滑框扩展 介绍:Scroll Rect组件是用…...

网络扫描与网络监听
前言:前文给大家介绍了网络安全相关方面的基础知识体系,以及什么是黑客,本篇文章笔者就给大家带来“黑客攻击五部曲”中的网络扫描和网络监听 目录 黑客攻击五部曲 网络扫描 按扫描策略分类 按照扫描方式分类 被动式策略 系统用户扫描 …...
Codeforces Round 904 (Div. 2) C
C. Medium Design 思路:我们设最大值所在的下标为 x x x,最小值所在的下标为 y y y,那么我们考虑一段区间对于答案的贡献: 若一段区间覆盖了 x x x,但没有覆盖 y y y,那么这段区间需要选择 若一段区间覆盖了 y y y,但没有覆盖 x…...

DBeaver连接数据库报错:Public Key Retrieval is not allowed 的解决方案
写在前面: DBeaver是一款免费的数据库管理工具,安装也是傻瓜式一键安装,比较推荐。 DBeaver官网(加载有点慢,耐心等待):DBeaver Community | Free Universal Database Tool 报错详情ÿ…...
DeepFace【部署 04】轻量级人脸识别和面部属性分析框架deepface使用Docker部署CPU+GPU两个版本及cuDNN安装
使用Docker部署CPUGPU 1.CPU2.GPU3.cuDNN安装3.1 Prerequisites3.2 下载Linux版本cuDNN3.3 安装 1.CPU 本说明基于DeepFace的Docker镜像文件deepface_image.tar进行说明。 # 1.导入镜像 docker load -i deepface_image.tar# 2.创建模型文件夹【并将下载好的模型文件上传】 mk…...
程序生活 - 减肥小记
文章目录 缘起健康就好了吗?关于外在和物质生活难与易 我的减肥生活一些细节轻断食戒糖、油炸、重口味睡眠改变社交方式用运动化解压力不喝牛奶 缘起 2017年的一次腿受伤,让我从一个怎么都吃不胖的人,变成了一个实实在在的胖子。 如果你从来…...

深度学习_4_实战_直线最优解
梯度 实战 代码: # %matplotlib inline import random import torch import matplotlib.pyplot as plt # from d21 import torch as d21def synthetic_data(w, b, num_examples):"""生成 Y XW b 噪声。"""X torch.normal(0,…...
《视觉SLAM十四讲》公式推导(三)
文章目录 CH3-8 证明旋转后的四元数虚部为零,实部为罗德里格斯公式结果 CH4 李群与李代数CH4-1 SO(3) 上的指数映射CH4-2 SE(3) 上的指数映射CH4-3 李代数求导对极几何:本质矩阵奇异值分解矩阵内积和迹 CH3-8 证明旋转后的四元数虚部为零,实部…...
pnpm、npm、yarn的区别
pnpm、npm、yarn是三种不同的包管理器,它们之间有一些区别。 安装速度:pnpm的安装速度比npm和yarn快,因为它使用了只下载必需的模块,而不是下载整个依赖树。此外,pnpm还可以并行下载模块,从而进一步提高下…...

搞定蓝牙——第四章(GATT协议)
搞定蓝牙——第四章(GATT协议) 原理介绍层次结构server和client端Attribute ESP32代码 文章下面用的英文表示: server和client:服务端和客户端 char.:characteristic缩写,特征 Attribute:属性 ATT:Attribut…...

Go语言入门心法(十四): Go操作Redis实战
Go语言入门心法(一): 基础语法 Go语言入门心法(二): 结构体 Go语言入门心法(三): 接口 Go语言入门心法(四): 异常体系 Go语言入门心法(五): 函数 Go语言入门心法(六): HTTP面向客户端|服务端编程 Go语言入门心法(七): 并发与通道 Go语言入门心法(八): mysql驱动安装报错o…...
Java学习笔记(三)
前言 这个主要就是想记录一个点,就是二维数组保存的元素就是一维数组的地址,这个概念大家都知道了,那么接下来就是我最近写程序发生的一个事情了。 随机打乱一个一维数组 这个程序我相信大家都是会写的,通过randomArr来随机打乱…...
Flutter笔记:GetX模块中不使用 Get.put 怎么办
Flutter笔记 GetX模块中不使用 Get.put 怎么办 作者:李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 :291148484163.com 本文地址:https://blog.csdn.net/qq_28550263/article/details/13400672…...
2023前端面试整理
1. 介绍一下最近参与的项目,负责那些业务,在开发过程中遇到过问题吗?最后是咋样处理的? 之前负责过大小十几个项目,负责过浙里办的整套上架流程,负责过数据大屏统计,后台管理系统文书生成表单生成等,浙政钉…...

文化融合:TikTok如何弥合跨文化差异
随着全球化的加速和数字媒体的崛起,社交媒体平台已经成为连接世界各地人们的纽带。其中,TikTok作为一个引领者,正在以惊人的速度消除跨文化差异,促进文化融合,使人们更加了解和尊重不同背景和传统。 本文将深入探讨Ti…...
asp.net core获取config和env
配置文件的读取和使用 //读取配置文件直接使用 var configModel configuration.GetSection("DataBaseConfig").Get<DataBaseConfigModel>(); //读取配置文件注入到IOC中 services.Configure<AssemblyConfig>(configuration.GetSection("AssemblyC…...

Git不常用命令(持续更新)
今日鸡汤:当你最满足的时候,通常也最孤独;当你最愤慨的时候,通常也最可怜。 此博文会列出一些平时不常用,但是能提高效率的git命令,后续会出IDEA对应的操作步骤 快看看你是不是都用过... 分支(…...

UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...

STM32HAL库USART源代码解析及应用
STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时,没有加载所有类库。插件运行过程中用到某个类库,会从CAD的安装目录找,找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库,就用插件程序加载进…...