• 无图无定位新版css步骤条兼容ie6+


    <ul class="ui-step list-unstyled">
                <li class="step-item"><b class="arrow-space"></b><b class="arrow-bg"></b>填写账户名</li>
                <li class="step-item current"><b class="arrow-space"></b><b class="arrow-bg"></b>验证身份</li>
                <li class="step-item"><b class="arrow-space"></b><b class="arrow-bg"></b>设置新密码</li>
                <li class="step-item">完成</li>
            </ul>
    less:
    .ui-step(@num){
        .ui-step{
            position: relative;
            overflow: hidden;
            margin: 20px;
            .step-item{
                // position: relative;
                float: left;
                zoom: 1;
                width: percentage(1/@num);
                *width: percentage(1/@num) - 0.0416666%;
                height: 30px;
                text-align: center;
                line-height: 30px;
                background-color: #e5e5e5;
                b{
                    float: right;
                    position: relative;
                    overflow: hidden;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    _border-style: dotted dotted dotted solid;
                    border-color: #ccc transparent transparent transparent;
                    border-width: 15px;
                }
                .arrow-space{
                    border-width: 20px;
                    margin: -5px -35px -5px 0;
                    border-color: transparent transparent transparent #fff;
                }
                .arrow-bg{
                    right: -30px;
                    margin-left: -30px;
                    border-color: transparent transparent transparent #e5e5e5;
    
                }
                &:first-child{
                    border-radius: 3px 0 0 3px;
                }
                &:last-child{
                    border-radius: 0 3px 3px 0;
                }
            }
            .current{
                z-index: 1;
                background-color: Orange;
                color: #fff;
                .arrow-space{
                    _border-style: solid;
                    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #fff;
                }
                .arrow-bg{
                    border-color: transparent transparent transparent Orange;
                }
            }
        }
    
    }
    
    .ui-step(4);
  • 相关阅读:
    使用Anaconda安装TensorFlow
    更新pip源/anaconda源
    PHP 中 config.m4 的探索
    有趣的智力题
    工作中MySql的了解到的小技巧
    一篇关于PHP性能的文章
    eslasticsearch操作集锦
    curl 命令详解~~
    Nginx 调优经验记录
    Elasticsearch安装使用
  • 原文地址:https://www.cnblogs.com/zhishaofei/p/4447216.html
Copyright © 2020-2023  润新知