css写一个步骤条

不羁的_龙卷风
2,906 阅读3分钟
  • 效果图

  • 代码如下
<!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>
avatar
文章
阅读
粉丝