• css步骤条

    html 代码以及样式

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>css步骤条title>
    6.     <style>
    7.         .steps {
    8.             display: flex;
    9.             justify-content: space-between;
    10.             padding: 0;
    11.             margin: 20px 10px;
    12.             list-style: none;
    13.             counter-reset: order; /* 定义css 计时器 */
    14.             --normal-color: #666;
    15.             --active-color: #06e;
    16.         }
    17.  
    18.         .steps li {
    19.             counter-increment: order; /* 选择器增量 */
    20.             color: var(--active-color); /* 定义变量，默认都是高亮颜色 */
    21.         }
    22.  
    23.         .steps li::before {
    24.             content: counter(order); /* 使用计数器的数字作为内容 */
    25.             display: inline-block;
    26.             width: 1.4em;
    27.             margin-right: 0.5em;
    28.             text-align: center;
    29.             border-radius: 50%;
    30.             border: 1px solid; /* 这里故意不设置颜色，将来使用继承的颜色 */
    31.             flex-shrink: 0; /* 行内伪元素，实现计数器 */
    32.         }
    33.  
    34.         /* 步骤项引导线 */
    35.         .steps li {
    36.             flex: auto; /* 弹性宽度（根据内容调整） */
    37.             display: flex;
    38.             align-items: center;
    39.         }
    40.  
    41.         .steps li:not(:last-child)::after {
    42.             content: '';
    43.             flex: 1; /* 内部在开启flex自适应 */
    44.             margin: 0 1em;
    45.             border-bottom: 1px solid;
    46.             opacity: 0.6;
    47.         }
    48.  
    49.         .steps li:last-child {
    50.             flex: none; /* 最后一项，没必要等分宽度 */
    51.         }
    52.  
    53.         .steps .active::before {
    54.             /* 设计激活时数字样式 */
    55.             color: #ffffff;
    56.             background: var(--active-color);
    57.             border-color: var(--active-color);
    58.         }
    59.  
    60.         .steps .active::after,
    61.         .steps .active ~ li {
    62.             /* 后面的线和step设置成黑色 */
    63.             color: var(--normal-color);
    64.         }
    65.  
    66.     style>
    67. head>
    68. <body>
    69.  
    70. <ol class="steps">
    71.     <li>注册li>
    72.     <li class="active">域认证li>
    73.     <li>身份校验li>
    74.     <li>开通账号li>
    75. ol>
    76. body>
    77. html>

  • 相关阅读:
    java游戏制作-拼图游戏
    JDBC工具类
    GBase 8a MPP存储过程参考-2
    linux驱动开发--day1（驱动、内核模块及相关命令、内核模块传参）
    java泛型入门篇
    听听ChatGPT对IT行业的发展和就业前景的看法
    lambda 自定义收集器
    微服务架构的数据设计模式
    层次分析法（matlab实现）
    android studio项目实例-基于Uniapp+SSM实现的Android安全网购平台
  • 原文地址：https://blog.csdn.net/qq_35350009/article/details/134005494