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>
  • 相关阅读:
    JSP内置对象
    java 中list还有array的区别
    js动态修改界面碰见的疑惑
    购物多条件商品查询逻辑处理
    数据库信息备份
    关于毕设的一些小问题
    在<a></a>标签中正确调用javaScript脚本
    oracle实训0705经验
    第十五天学习进度--数列找规律算法(预测算法)(1)
    第十四天学习进度--相关系数和显著水平
  • 原文地址:https://www.cnblogs.com/lipengze/p/13968183.html
Copyright © 2011-2022 走看看