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

css步骤条

news 2026/4/6 8:08:57

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…...

编程日记 2023/10/27 1:00:33

[Hive] 常见函数

文章目录 字符串函数数值函数随机函数日期和时间函数字符串转时间 聚合函数数组函数结构体函数数组函数映射函数 map正则处理JSON 字符串函数 CONCAT(string1, string2, …)&#xff1a;将多个字符串连接成一个字符串。 LENGTH(string)&#xff1a;返回字符串的长度。 LOWER…...

编程日记 2023/10/27 0:58:30

Mac用NTFS文件夹读写NTFS硬盘 NTFS能复制多大的文件

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

编程日记 2023/10/27 0:57:29

【unity3D】Scroll Rect组件—制作下滑列表

&#x1f497; 未来的游戏开发程序媛&#xff0c;现在的努力学习菜鸡 &#x1f4a6;本专栏是我关于游戏开发的学习笔记 &#x1f236;本篇是unity的Scroll Rect组件 Scroll Rect组件 基础知识详细说明案例演示——制作一个简单的下滑框扩展 介绍&#xff1a;Scroll Rect组件是用…...

编程日记 2023/10/27 0:56:28

网络扫描与网络监听

前言&#xff1a;前文给大家介绍了网络安全相关方面的基础知识体系&#xff0c;以及什么是黑客&#xff0c;本篇文章笔者就给大家带来“黑客攻击五部曲”中的网络扫描和网络监听 目录 黑客攻击五部曲 网络扫描 按扫描策略分类 按照扫描方式分类 被动式策略 系统用户扫描 …...

编程日记 2023/10/27 0:55:25

Codeforces Round 904 (Div. 2) C

C. Medium Design 思路&#xff1a;我们设最大值所在的下标为 x x x,最小值所在的下标为 y y y,那么我们考虑一段区间对于答案的贡献&#xff1a; 若一段区间覆盖了 x x x&#xff0c;但没有覆盖 y y y,那么这段区间需要选择 若一段区间覆盖了 y y y&#xff0c;但没有覆盖 x…...

编程日记 2023/10/27 0:54:24

DBeaver连接数据库报错：Public Key Retrieval is not allowed 的解决方案

写在前面&#xff1a; DBeaver是一款免费的数据库管理工具&#xff0c;安装也是傻瓜式一键安装&#xff0c;比较推荐。 DBeaver官网&#xff08;加载有点慢&#xff0c;耐心等待&#xff09;&#xff1a;DBeaver Community | Free Universal Database Tool 报错详情&#xff…...

编程日记 2023/10/27 0:52:23

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…...

编程日记 2023/10/27 0:51:21

程序生活 - 减肥小记

文章目录 缘起健康就好了吗&#xff1f;关于外在和物质生活难与易 我的减肥生活一些细节轻断食戒糖、油炸、重口味睡眠改变社交方式用运动化解压力不喝牛奶 缘起 2017年的一次腿受伤&#xff0c;让我从一个怎么都吃不胖的人&#xff0c;变成了一个实实在在的胖子。 如果你从来…...

编程日记 2023/10/27 0:50:20

深度学习_4_实战_直线最优解

梯度 实战 代码&#xff1a; # %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,…...

编程日记 2023/10/27 0:49:19

《视觉SLAM十四讲》公式推导（三）

文章目录 CH3-8 证明旋转后的四元数虚部为零&#xff0c;实部为罗德里格斯公式结果 CH4 李群与李代数CH4-1 SO(3) 上的指数映射CH4-2 SE(3) 上的指数映射CH4-3 李代数求导对极几何&#xff1a;本质矩阵奇异值分解矩阵内积和迹 CH3-8 证明旋转后的四元数虚部为零&#xff0c;实部…...

编程日记 2023/10/27 0:48:18

pnpm、npm、yarn的区别

pnpm、npm、yarn是三种不同的包管理器&#xff0c;它们之间有一些区别。 安装速度&#xff1a;pnpm的安装速度比npm和yarn快&#xff0c;因为它使用了只下载必需的模块&#xff0c;而不是下载整个依赖树。此外&#xff0c;pnpm还可以并行下载模块&#xff0c;从而进一步提高下…...

编程日记 2023/10/27 0:45:13

搞定蓝牙——第四章（GATT协议）

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

编程日记 2023/10/27 0:44:12

Go语言入门心法(十四): Go操作Redis实战

Go语言入门心法(一): 基础语法 Go语言入门心法(二): 结构体 Go语言入门心法(三): 接口 Go语言入门心法(四): 异常体系 Go语言入门心法(五): 函数 Go语言入门心法(六): HTTP面向客户端|服务端编程 Go语言入门心法(七): 并发与通道 Go语言入门心法(八): mysql驱动安装报错o…...

编程日记 2023/10/27 0:43:10

Java学习笔记（三）

前言 这个主要就是想记录一个点&#xff0c;就是二维数组保存的元素就是一维数组的地址&#xff0c;这个概念大家都知道了&#xff0c;那么接下来就是我最近写程序发生的一个事情了。 随机打乱一个一维数组 这个程序我相信大家都是会写的&#xff0c;通过randomArr来随机打乱…...

编程日记 2023/10/27 0:42:09

Flutter笔记：GetX模块中不使用 Get.put 怎么办

Flutter笔记 GetX模块中不使用 Get.put 怎么办 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/13400672…...

编程日记 2023/10/27 0:41:08

2023前端面试整理

1. 介绍一下最近参与的项目,负责那些业务,在开发过程中遇到过问题吗&#xff1f;最后是咋样处理的&#xff1f; 之前负责过大小十几个项目&#xff0c;负责过浙里办的整套上架流程&#xff0c;负责过数据大屏统计&#xff0c;后台管理系统文书生成表单生成等&#xff0c;浙政钉…...

编程日记 2023/10/27 0:40:07

文化融合：TikTok如何弥合跨文化差异

随着全球化的加速和数字媒体的崛起&#xff0c;社交媒体平台已经成为连接世界各地人们的纽带。其中&#xff0c;TikTok作为一个引领者&#xff0c;正在以惊人的速度消除跨文化差异&#xff0c;促进文化融合&#xff0c;使人们更加了解和尊重不同背景和传统。 本文将深入探讨Ti…...

编程日记 2023/10/27 0:39:06

asp.net core获取config和env

配置文件的读取和使用 //读取配置文件直接使用 var configModel configuration.GetSection("DataBaseConfig").Get<DataBaseConfigModel>(); //读取配置文件注入到IOC中 services.Configure<AssemblyConfig>(configuration.GetSection("AssemblyC…...

编程日记 2023/10/27 0:38:05

Git不常用命令(持续更新)

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

编程日记 2023/10/27 0:37:04

Hunyuan-MT-7B功能体验：少数民族语言翻译效果实测与对比

Hunyuan-MT-7B功能体验&#xff1a;少数民族语言翻译效果实测与对比 1. 引言&#xff1a;少数民族语言翻译的技术挑战 在全球化与数字化浪潮中&#xff0c;语言障碍始终是跨文化交流的重要壁垒。对于主流语言如英语、汉语等&#xff0c;机器翻译技术已相对成熟。然而&#xf…...

编程新知 2026/4/6 7:32:17

Face3D.ai Pro零基础入门：5分钟从照片到3D人脸，小白也能玩转

Face3D.ai Pro零基础入门&#xff1a;5分钟从照片到3D人脸&#xff0c;小白也能玩转 1. 引言&#xff1a;从照片到3D人脸的魔法 想象一下&#xff0c;用手机随手拍一张自拍&#xff0c;5分钟后就能得到一个可以360度旋转的3D人脸模型。这不是科幻电影里的场景&#xff0c;而是…...

编程新知 2026/4/6 7:12:01

千问3.5-2B开源可部署教程：基于CSDN GPU平台，5分钟完成图文理解服务上线

千问3.5-2B开源可部署教程&#xff1a;基于CSDN GPU平台&#xff0c;5分钟完成图文理解服务上线 1. 千问3.5-2B模型简介 千问3.5-2B是Qwen系列中的小型视觉语言模型&#xff0c;它能够同时理解图片内容和处理自然语言。这个模型特别适合需要快速搭建图文理解服务的场景&#…...

编程新知 2026/4/6 7:07:59

AI股票分析师daily_stock_analysis进阶技巧：定制你的专属分析模板

AI股票分析师daily_stock_analysis进阶技巧&#xff1a;定制你的专属分析模板 1. 为什么需要定制分析模板 当你第一次使用AI股票分析师daily_stock_analysis时&#xff0c;可能会被它开箱即用的分析能力所惊艳。但随着使用深入&#xff0c;你会发现通用模板有时无法完全满足你…...

编程新知 2026/4/6 6:29:03

Java学习——数据类型

目录 一、概述 二、基本数据类型 1、数值型 2、字符型 3、布尔型 三、引用数据类&#xff08;后期补充&#xff09; 1、类 2、接口 3、数组 4、枚举 5、注解 四、数据类型转换 1、概述 2、隐式转换&#xff08;自动类型转换&#xff09; 3、显式转换&#xff08…...

编程新知 2026/4/6 5:44:21

Unity游戏开发：Highlight Plus 8.0在URP渲染管线下的完整配置指南（含常见问题解决）

Unity游戏开发&#xff1a;Highlight Plus 8.0在URP渲染管线下的完整配置指南&#xff08;含常见问题解决&#xff09; 在Unity游戏开发中&#xff0c;模型高亮效果是提升交互体验的关键技术之一。Highlight Plus作为一款功能强大的高亮插件&#xff0c;能够为3D模型添加轮廓光…...

编程新知 2026/4/6 4:16:40

技术面试终极指南：10个反向面试技巧助你问对公司问题

技术面试终极指南&#xff1a;10个反向面试技巧助你问对公司问题 【免费下载链接】reverse-interview Questions to ask the company during your interview 项目地址: https://gitcode.com/gh_mirrors/re/reverse-interview 在技术面试中&#xff0c;反向面试&#xff…...

编程新知 2026/4/6 3:34:56

告别打印乱码与错位：手把手教你配置SAP Smartforms的CNSAPWIN打印机格式

告别打印乱码与错位&#xff1a;手把手教你配置SAP Smartforms的CNSAPWIN打印机格式 在SAP系统的日常使用中&#xff0c;打印问题是最令人头疼却又无法回避的挑战之一。想象一下&#xff0c;当你精心设计的发票Smartforms报表终于完成&#xff0c;却在打印时发现内容被截断、错…...

编程新知 2026/4/6 2:34:28

ADC类型解析与选型指南：从闪存到ΔΣ

1. ADC基础概念与核心原理在电子系统中&#xff0c;模拟信号到数字信号的转换&#xff08;ADC&#xff09;是实现物理世界与数字世界交互的关键桥梁。作为一名嵌入式开发者&#xff0c;我经常需要根据项目需求选择不同类型的ADC拓扑结构。让我们先拆解ADC的核心工作机制。ADC转…...

编程新知 2026/4/6 1:48:02

第三次学习C语言有感

我是一名大一学生&#xff0c;学习的专业是自动化&#xff0c;报专业时想着的是自动化可以走的方面是很广的&#xff0c;想着大学里面可以多多尝试不一样东西看自己对哪一样感兴趣。说实话&#xff0c;因为我对单片机感兴趣才驱使我学习C语言的&#xff0c;虽然嘴上说的是C语言…...

编程新知 2026/4/6 1:25:42