用CSS实现时间轴总结

diaotuo1467

于 2018-09-03 20:21:00 发布

阅读量751

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cuichenli/p/9580670.html

版权

本文介绍了如何使用CSS创建时间轴，包括HTML结构设计、时间轴及内容框的CSS样式设置，以及根据内容调整左右布局的方法。通过伪元素创建时间点和箭头，实现了美观的时间轴效果。虽然原文章提到了JavaScript交互，但本文主要侧重于CSS实现。

摘要由CSDN通过智能技术生成

总结：大体而言是用ul结构实现，每个li元素设定一个before伪元素，作为时间轴上的圆球，在每一个li元素中新建一个div元素作为时间轴的内容。每一个div结构中设定一个after伪元素，用来作为指向时间轴的箭头。由于内容会分散在时间轴的两旁，故还应该根据nth-child()来进行相应的设置。

内容原创为此网站，我只是总结一下我这个过程。

HTML结构

<div class="timeline">
    <ul>
        <li>
            <div>
                 2002 
                 2002
            </div>
        </li>
        <li>
            <div>
                2005
            </div>
        </li>
    </ul>
</div>