CSS- 橫向和縱向時間軸

時間軸在展示公司發展信息，服務流程中用的比較多，常見的注冊登錄有的是通過引導，一步一步的來完成，上面會通過時間軸告訴用戶當前在哪一步，公司在關於我們或者發展流程的時候也特別喜歡用時間軸來展示，簡單的實現了一下橫向和縱向時間軸，可以簡單的看下一下實現的效果:

Html代碼:

<div class="container">
    <p>原文地址:http://www.cnblogs.com/xiaofeixiang/</p>
    <ul class="time-horizontal">
        <li><b></b>成立</li>
        <li><b></b>合作</li>
        <li><b></b>發展</li>
        <li><b></b>共贏</li>
    </ul>
</div>
<div class="container">
    <ul class="time-vertical">
        <li><b></b><span>1</span><a href="javascript:void(0)">keso</a></li>
        <li><b></b><span>2</span><a href="javascript:void(0)">FlyElephant</a></li>
        <li><b></b><span>3</span><a href="javascript:void(0)">博客園</a></li>
        <li><b></b><span>4</span><a href="javascript:void(0)">創業</a></li>
    </ul>
</div>

 

CSS樣式:

/*橫向時間軸*/
.time-horizontal {
    list-style-type: none;
    border-top: 1px solid #707070;
    max-width: 800px;
    padding: 0px;
    margin: 0px;
}
 
.time-horizontal li {
    float: left;
    position: relative;
    text-align: center;
    width: 25%;
    padding-top: 10px;
}
 
.time-horizontal li b:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 47%;
    width: 12px;
    height: 12px;
    border: 2px solid #4c4c4c;
    border-radius: 8px;
    background: #4c4c4c;
}
/*縱向時間軸*/
.time-vertical {
    list-style-type: none;
    border-left: 1px solid #707070;
    padding: 0px;
    height: 400px;
}
 
.time-vertical li {
    height: 100px;
    position: relative;
}
 
.time-vertical li a {
    display: inline-block;
    margin-left: 20px;
    margin-top: 15px;
    text-decoration: none;
    color: #000;
}
 
.time-vertical li b:before {
    content: '';
    position: absolute;
    top: 15px;
    left: -12px;
    width: 18px;
    height: 18px;
    border: 2px solid #98FB98;
    border-radius: 10px;
    background: #98FB98;
}
 
.time-vertical li span {
    position: absolute;
    color: #fff;
    top: 18px;
    left: -6px;
}

----------------------------------------------------------------

來源：博客園

作者：FlyElephant

出處：http://www.cnblogs.com/xiaofeixiang