css写一个步骤条

ゞ浴缸里的玫瑰 2022-01-19 23:29 348阅读 0赞

*  效果图

*  代码如下

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>process-example</title>
        <style>
            /* reset.css */
            body {
                font-size: 12px !important;
                font-family: 'Microsoft Yahei', 'proxima-nova', helvetica, arial;
                -webkit-overflow-scrolling: touch;
            }
    
            input {
                -webkit-appearance: none;
                resize: none;
            }
    
            body,
            div,
            ul,
            li,
            ol,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            input,
            textarea,
            select,
            p,
            dl,
            dt,
            dd,
            a,
            img,
            button,
            form,
            table,
            th,
            tr,
            td,
            tbody,
            article,
            aside,
            details,
            figcaption,
            figure,
            footer,
            header,
            hgroup,
            menu,
            nav,
            section {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                padding: 0;
                margin: 0;
            }
    
            h1,
            h2,
            h3,
            h4,
            h5 {
                font-style: normal;
                font-weight: normal;
            }
    
            img {
                border: 0;
                display: block;
                border: 0;
            }
    
            .clearfix:after {
                content: '';
                display: block;
                visibility: hidden;
                height: 0;
                clear: both;
            }
    
            .clearfix {
                zoom: 1;
            }
    
            a {
                text-decoration: none;
                color: #969696;
            }
    
            a:hover {
                color: #fed503;
                text-decoration: none;
            }
    
            ul,
            ol {
                list-style: none;
            }
    
            a {
                outline: none;
            }
    
            /* 去掉 input 右边上下箭头 */
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none !important;
                margin: 0;
            }
    
            input:-webkit-autofill {
                -webkit-box-shadow: 0 0 0px 1000px white inset !important;
            }
    
            /* 项目样式 */
            .process-status-new {
                width: 100%;
                background-color: #fff;
                height: 46px;
                padding-top: 24px;
            }
    
            .process-status-new ul {
                margin: 0 36px;
                border-top: 1px solid #e5e5e5;
                height: 45px;
                position: relative;
            }
    
            .process-status-new ul li {
                position: absolute;
                float: left;
                width: 33.3%;
                top: -12px;
            }
    
            .process-status-new ul .p-gjj {
                left: 0;
            }
    
            .process-status-new ul .p-basic {
                left: 33.3%;
            }
    
            .process-status-new ul .p-edu {
                left: 66.6%;
            }
    
            .process-status-new ul .p-ok {
                left: 100%;
            }
    
            .process-status-new .p-n-2 .p-gjj span.l,
            .process-status-new .p-n-3 .p-gjj span.l,
            .process-status-new .p-n-4 .p-gjj span.l {
                display: block;
            }
    
            .process-status-new ul li span.l {
                position: absolute;
                left: 0;
                top: 11px;
                width: 100%;
                z-index: 1;
                display: none;
                height: 1px;
                background-color: #439df8;
            }
    
            .process-status-new ul li .box {
                width: 88px;
                position: relative;
                margin-left: -44px;
                z-index: 2;
            }
    
            .process-status-new ul li .box .icon span {
                width: 17px;
                height: 17px;
                border: 2px solid #e5e5e5;
                display: block;
                border-radius: 100%;
                background-position: center;
                background-repeat: no-repeat;
            }
    
            .process-status-new .p-n-2 .p-gjj .icon span,
            .process-status-new .p-n-3 .p-gjj .icon span,
            .process-status-new .p-n-4 .p-gjj .icon span {
                background-image: url(http://r.51gjj.com/image/static/20160518-bank-icon-cur2.png);
                background-size: 12px 12px;
                background-color: #ffffff;
                border: 2px solid #439df8;
            }
    
            .process-status-new ul li .box .icon {
                width: 21px;
                height: 21px;
                padding: 1px;
                background-color: #fff;
                margin: 0 auto;
            }
    
            .process-status-new .p-n-2 .p-gjj p,
            .process-status-new .p-n-3 .p-gjj p,
            .process-status-new .p-n-4 .p-gjj p {
                color: #439df8;
            }
    
            .process-status-new ul li .box p {
                color: #b9b9b9;
                font-size: 12px;
                padding-top: 6px;
                line-height: 18px;
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div class="process-status-new">
            <ul class="p-n-2">
                <li class="p-gjj"> <span class="l"></span>
                    <div class="box">
                        <div class="icon"><span></span></div>
                        <p>步骤一</p>
                    </div>
                </li>
                <li class="p-basic"> <span class="l"></span>
                    <div class="box">
                        <div class="icon"><span></span></div>
                        <p>步骤二</p>
                    </div>
                </li>
                <li class="p-edu"> <span class="l"></span>
                    <div class="box">
                        <div class="icon"><span></span></div>
                        <p>步骤三</p>
                    </div>
                </li>
                <li class="p-ok">
                    <div class="box">
                        <div class="icon"><span></span></div>
                        <p>步骤四</p>
                    </div>
                </li>
            </ul>
        </div>
    </body>
    </html>
    
    复制代码