css实现简单的步骤条

深碍√TFBOYSˉ_ 2022-12-11 02:24 108阅读 0赞

效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70][]

html部分：

<ul class="steps">
        <li>第一步 我的信息</li>
        <li>第二步 填写地址</li>
        <li>第三步 确认信息</li>
        <li class="active">第四步 完成提交</li>
    </ul>

css部分：

.steps {
      position: relative;
      margin-bottom: 30px;
      counter-reset: step;  /*创建步骤数字计数器*/
    }
    /*步骤描述*/
    .steps li {
      list-style-type: none;
      font-size: 12px;
      text-align: center;
      width: 25%;
      position: relative;
      float: left;
    }
     
    /*步骤数字*/
    .steps li:before {
      display: block;
      content: counter(step); /*设定计数器内容*/
      counter-increment: step;  /*计数器值递增*/
      width: 32px;
      height: 32px;
      background-color: #019875;
      line-height: 32px;
      border-radius: 32px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      font-weight: 700;
      margin: 0 auto 8px auto;
    }
     
    /*连接线*/
    .steps li ~ li:after {
      content: '';
      width: 100%;
      height: 2px;
      background-color: #019875;
      position: absolute;
      left: -50%;
      top: 15px;
      z-index: -1; /*放置在数字后面*/
    }
     
    /*将当前/完成步骤之前的数字及连接线变绿*/
    .steps li.active:before,
    .steps li.active:after {
      background-color: #019875;
    }
     
    /*将当前/完成步骤之后的数字及连接线变灰*/
    .steps li.active ~ li:before,
    .steps li.active ~ li:after {
      background-color: #777;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70]: /images/20221123/ae88033ef159433d9eea78b574e575b4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，108人围观）

还没有评论，来说两句吧...

相关阅读

相关步骤条纯css

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

阳光穿透心脏的1/2处/ 2023年07月19日 12:04/ 0 赞/ 77 阅读

相关 Css 实现渐变样条

效果如图所示 ![在这里插入图片描述][20210117201959578.png] 基本布局和样式 <view class="address-line">

谁借莪１个温暖的怀抱￠/ 2023年01月07日 12:22/ 0 赞/ 101 阅读

相关 css实现简单的步骤条

效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

深碍√TFBOYSˉ_/ 2022年12月11日 02:24/ 0 赞/ 109 阅读

相关 css clip实现多边形样式，步骤条

.step \{ width: 150px; height:30px; font-size: 0; float: left; background

朱雀/ 2022年11月30日 12:42/ 0 赞/ 118 阅读

相关 React实现步骤条引导

目录 1. 功能需求 2. 核心代码 3. 完整代码 4. 效果展示 1. 功能需求因项目需求要做一个类似于任务引导的功能，什么意思呢？

蔚落/ 2022年10月06日 00:59/ 0 赞/ 216 阅读

相关 css实现隐藏滚动条

css实现隐藏滚动条关键代码如下： //样式 .hide-bar{ width:100px; height:100px;

拼搏现实的明天。/ 2022年05月15日 04:12/ 0 赞/ 307 阅读

相关 css实现滚动条

<!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

系统管理员/ 2022年05月14日 10:18/ 0 赞/ 270 阅读

相关 css写一个步骤条

效果图代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv

ゞ浴缸里的玫瑰/ 2022年01月19日 23:29/ 0 赞/ 304 阅读

相关 webService 实现的简单步骤

1.jdk 1.6版本以上，且在jdk所在文件夹中包含 wsimport.exe 2.创建一个web peoject .设为服务端。创建一个带有main函数的类MyServ

本是古典何须时尚/ 2021年12月12日 22:59/ 0 赞/ 358 阅读

相关 CSS实现分页条

对于搜索引擎或电子商务网站，常常将信息分页显示，这样可以减少页面大小，进而提高页面的加载速度。分页显示后，就需要通过分页导航来告诉用户要浏览的信息量，方便用户快速跳过一些...

小灰灰/ 2020年04月29日 05:55/ 0 赞/ 1297 阅读