横向时间轴

制作页面UI，需要添加一个流程图，采用时间轴的样子制作。

css部分：

<style>
        .sidebar {
            margin: 0 auto;
        }
        .sidebar .active .inner{
            background-color:#0be;
        }

        .bg-div {
            width: 846px;
            border-top: 1px solid #0be;
            margin-top: 122px;
            margin-left: 50px;
            position: absolute;
            z-index: 1;
        }

        .sidebar ul {
            position: relative;
            z-index: 10;
            -moz-border-radius: 30px;
            -webkit-border-radius: 30px;
            border-radius: 30px;
            display: block;
        }
        .sidebar ul li:hover .inner{
            background-color:#0be;
        }

        .sidebar li {
            font-size: 14px;
            line-height: 50px;
            list-style-type: none;
            float: left;
            padding-top: 30px;
            width: 140px;
            position: relative;
            margin-top: 65px;
        }

            .sidebar li.active .inner {
                background: #0be;
            }

        .sidebar .inner {
            display: block;
            height: 9px;
            width: 9px;
            border: 1px solid #0be;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }

        .sidebar .point {
            vertical-align: middle;
            background: #fff;
            display: inline-block;
            padding: 4px;
            height: 9px;
            width: 9px;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
        }

        .txt_class {
            position: absolute;
            width: 100%;
            left: 0;
            top: -20px;
            font-weight: bold;
            font-size: 16px;
            cursor:pointer;
        }
    </style>

　　html部分：

<div class="sidebar">
        <div class="bg-div"></div>
        <ul>
            <li class="active">
                <span class="point">
                    <span class="inner"></span>
                </span>
                <a class="txt_class" val="0">转账付款</a>
            </li>
            <li>
                <span class="point">
                    <span class="inner"></span>
                </span>
                <a class="txt_class" val="1">转账付款</a>
            </li>
            <li>
                <span class="point">
                    <span class="inner"></span>
                </span>
                <a class="txt_class" val="2">转账付款</a>
            </li>
            <li>
                <span class="point">
                    <span class="inner"></span>
                </span>
                <a class="txt_class" val="3">转账付款</a>
            </li>
            <li>
                <span class="point">
                    <span class="inner"></span>
                </span>
                <a class="txt_class" val="4">转账付款</a>
            </li>
            <li>
                <span class="point">
                    <span class="inner"></span>
                </span>
                <a class="txt_class" val="5">转账付款</a>
            </li>
            <li>
                <span class="point">
                    <span class="inner"></span>
                </span>
                <a class="txt_class" val="6">转账付款</a>
            </li>
        </ul>
    </div>

　　最终的效果图：

转载于:https://www.cnblogs.com/myparadiseworld/p/6625584.html