使用方式

<link rel="stylesheet" href="/components/style/timeline.css" type="text/css" />

<ul class="st_timeline">
    <li class="st_timeline_item">
        <div class="st_timeline_item_tail"></div>
        <div class="st_timeline_item_node is_active"></div>
        <div class="st_timeline_item_wrapper">
            <div>内容1</div>
            <div>2018-04-11</div>
        </div>
    </li>
    <li class="st_timeline_item">
        <div class="st_timeline_item_tail"></div>
        <div class="st_timeline_item_node"></div>
        <div class="st_timeline_item_wrapper">
            <div>内容2</div>
            <div>2018-04-10</div>
        </div>
    </li>
</ul>
<ul class="st_timeline">
    <li class="st_timeline_item">
        <div class="st_timeline_item_tail"></div>
        <div class="st_timeline_item_node is_active"></div>
        <div class="st_timeline_item_wrapper">
            <div class="st_timeline_item_timestamp is_top">2018-04-11</div>
            <div class="st_card" shadow="always">
                <div class="st_card_body">
                    <h4>标题</h4>
                    <p>内容</p>
                </div>
            </div>
        </div>
    </li>
    <li class="st_timeline_item">
        <div class="st_timeline_item_tail"></div>
        <div class="st_timeline_item_node"></div>
        <div class="st_timeline_item_wrapper">
            <div class="st_card" shadow="hover">
                <div class="st_card_body">
                    <h4>标题</h4>
                    <p>内容</p>
                </div>
            </div>
            <div class="st_timeline_item_timestamp is_bottom">2018-04-10</div>
        </div>
    </li>
</ul>