[分享]CSS制作自适应时间轴展示

基本每个网站都会有自己的历史展示,例如重要事迹,年份纪要等等,一般都是通过时间轴来进行展示。分享一个时间轴的制作代码,全部通过css来实现,后期也可以增加动画效果,让交互效果更好。

代码如下:





纯css自适应高度时间线



  • 2018-03-08 17:22
    2018
    [ver 1.0]

    千呼万唤始出来

  • 2018-03-08 17:23
    [ver 1.1]

    最是那一低头的温柔,恰是海棠花不胜凉风的娇羞~

  • 2018-04-24 17:03
    [重要版本更新]

    1.集成了管理权权限
    2.加入专栏功能
    3.日志加入图片,优化显示效果

  • 2018-07-03 10:59
    [注册用户取得成就]

    1.融资300万
    2.商城注册用户达到20万
    3.累计成交单量50万,均单数额200元

  • 2018-03-08 17:22
    2019
    [ver 1.0]

    千呼万唤始出来,犹抱琵琶半遮面

  • 2018-03-08 17:23
    [ver 1.1]

    最是那一低头的温柔,恰是海棠花不胜凉风的娇羞~

  • 2018-04-24 17:03
    [重要版本更新]

    1.集成了管理权权限;
    2.加入专栏功能;
    3.日志加入图片,优化显示效果

  • 2018-03-08 17:22
    2020
    [ver 1.0]

    千呼万唤始出来

  • 2018-03-08 17:23
    [ver 1.1]

    最是那一低头的温柔,恰是海棠花不胜凉风的娇羞~

  • 2018-04-24 17:03
    [重要版本更新]

    1.集成了管理权权限
    2.加入专栏功能
    3.日志加入图片,优化显示效果

  • 2018-07-03 10:59
    [注册用户取得成就]

    1.融资300万
    2.商城注册用户达到20万
    3.累计成交单量50万,均单数额200元

  • 通过代码可以看到,css的设置并不多,在使用的时候主要注意HTML结构。

    总的结构是ul>li,而给li添加了line-activ类名则是设置年份的圆点,其他则是该年份中的内容;在每个li中,通过div.list-out来承载内容,其中里面又分为两部分:div.list-time为设置事件发生时间,div.list-content为事件主要内容。

    效果如下图所示:


    [分享]CSS制作自适应时间轴展示_第1张图片
    时间轴展示

    你可能感兴趣的:([分享]CSS制作自适应时间轴展示)