tutorial / directive

step.html 1.85 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <title>无标题</title>
        <link rel="stylesheet" href="http://cdn.xiniunet.com/css/bootstrap/3.2.0/css/bootstrap.css">
        <link rel="stylesheet" href="../dist/base.css" >

    </head>
    <body>
        <div class="clearfix xn-width auto">
            <div>================================步骤条====================================</div>
            <div class="xn-step-bar clearfix" style="margin-top: 20px;">
                <div class="step-item f-left step-start step-now">确认手机号</div>
                <div class="step-item f-left step-process"><label class="triangle"></label>重置密码</div>
                <div class="step-item f-left step-end"><label class="triangle"></label>完成</div>
            </div>
            <div class="xn-step-bar clearfix" style="margin-top: 20px;">
                <div class="step-item f-left step-start step-pass">确认手机号</div>
                <div class="step-item f-left step-process step-now"><label class="triangle"></label>重置密码</div>
                <div class="step-item f-left step-end"><label class="triangle"></label>完成</div>
            </div>
            <div class="xn-step-bar clearfix" style="margin-top: 20px;">
                <div style="width: 24%;" class="step-item f-left step-start step-pass">确认手机号</div>
                <div style="width: 24%;" class="step-item f-left step-process step-pass"><label class="triangle"></label>重置密码</div>
                <div style="width: 24%;" class="step-item f-left step-process step-pass"><label class="triangle"></label>重置密码</div>
                <div style="width: 24%;" class="step-item f-left step-end step-now"><label class="triangle"></label>完成</div>
            </div>
        </div>
    </body>
</html>