CSS-水平および垂直タイムライン_html/css_WEB-ITnose

タイムラインは、会社の発展情報を表示するために使用され、サービスプロセスでよく使用されます。タイムラインは、ユーザーが現在どの段階にいるのか、そして会社が何であるのかを段階的に示します。または、開発プロセスを表示するためにタイムラインを使用するのが特に好きです。水平方向と垂直方向のタイムラインを実装しただけなので、その効果を簡単に確認できます。

CSS スタイル:

    <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>

垂直タイムラインについては、もちろん、中央に行を置く状況にも遭遇しますが、同様で、違いはありません~