zoukankan      html  css  js  c++  java
  • 纯css步骤条编写

    .steps {
            position: relative;
            margin-bottom: 30px;
            counter-reset: step;
            /*创建步骤数字计数器*/
    }
    /*步骤描述*/
    .steps li {
            list-style-type: none;
            font-size: 12px;
            text-align: center;
            width: 10%;      //如果一行想显示多个节点,修改这里的大小
            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: 75%;
            height: 3px;
            background-color: #019875;
            position: absolute;
            left: -33%;
            top: 13px;
            z-index: 0; 
            /*放置在数字后面*/
    }
    /*将当前/完成步骤之前的数字及连接线变绿*/
    .steps li.active:before,
    .steps li.active:after {
            background-color: #019875;
    }
    
    /*如果出现错误 那么成红色*/
    .steps li.error:before,
    .steps li.error:after {
            background-color: indianred;
    }
    /*将当前/完成步骤之后的数字及连接线变灰*/
    .steps li.wait:before,
    .steps li.wait:after{
            background-color: #777;
    }
    <ul class="steps">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="active">4</li>
        <li class="error">5</li>
        <li class="error">6</li>
        <li class="wait">7</li>
        <li class="wait">8</li>
        <li class="wait">9</li>
        <li class="wait">10</li>
    </ul>
  • 相关阅读:
    网络配置bridge
    ng-zorro等组件默认样式的修改
    正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?
    ||与&&的返回值
    JS判断对象是否存在的10种方法总结
    undefined与null的区别
    前端页面布局中水平、垂直居中问题
    MAMP VirtualHost 无效 配置踩坑
    问题锦选
    Windows相关要点记录
  • 原文地址:https://www.cnblogs.com/lipengze/p/13968183.html
Copyright © 2011-2022 走看看