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

?

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>發(fā)展</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)">創(chuàng)業(yè)</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;}

　關(guān)于縱向時間軸，當(dāng)然我們也會遇到將線放在中間的情況，大同小異，沒有差別~

轉(zhuǎn)載于:https://www.cnblogs.com/xiaofeixiang/p/5036154.html

總結(jié)

以上是生活随笔為你收集整理的CSS- 横向和纵向时间轴的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。