zoukankan      html  css  js  c++  java
  • 无图无定位新版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);
  • 相关阅读:
    Linux下Tomcat服务器-maven项目部署
    数据库设计感悟
    数据库设计规范
    从零到一: 代码调试
    Java泛型与反射的综合应用
    Eclipse中,tomcat插件方式启动项目
    集合查询表--Map
    集合线性表--List之LinkedList(队列与栈)
    集合线性表--List之ArrayList
    Java中的日期操作
  • 原文地址:https://www.cnblogs.com/zhishaofei/p/4447216.html
Copyright © 2011-2022 走看看