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);
  • 相关阅读:
    20180813 mysql 手动整理
    20180811 mysql 整理
    20180810 mysql
    20180808 第一阶段项目展示
    20180807 接近第一阶段项目完成 心里话
    20180730 轮播 (加定时器 鼠标移入停止 移除继续轮播 点击小图标换大图片)
    20180730 表格的删除 增加 编辑内容
    10.10日PHP MAC
    10.09日PHP MAC
    数据库类的封装
  • 原文地址:https://www.cnblogs.com/zhishaofei/p/4447216.html
Copyright © 2011-2022 走看看