本文将使用css来实现一个左右交叉布局的时间轴，效果如下：
使用的都是一些常用的css，代码如下：
<!DOCTYPE> <html> <head> <title>vue demo</title> <script src="js/jquery-3.2.1.js"></script> <style> .lv-time-section{ font-size:0; width:100%; } .lv-time-left, .lv-time-right{ display:inline-block; width:calc(50% - 1px); height:100px; } .lv-time-left{ border-right:2px solid #949494; } .lv-time-time, .lv-time-container{ font-size:16px; } .lv-time-container{ background-color:#949494; border-radius:5px; } .lv-time-content{ padding:5px; } .lv-time-left .lv-time-container, .lv-time-left .lv-time-time, .lv-time-left .lv-time-container .lv-time-content{ float:right; } .lv-time-right .lv-time-container, .lv-time-right .lv-time-time, .lv-time-right .lv-time-container .lv-time-content{ float:left; } .lv-time-left .lv-time-time:after{ content:""; display:inline-block; height:10px; width:10px; border-radius:5px; background-color:#949494; margin-right:-6px; } .lv-time-right .lv-time-time:before{ content:""; display:inline-block; height:10px; width:10px; border-radius:5px; background-color:#949494; margin-left:-6px; } .lv-time-container{ border:1px solid #949494; } .lv-time-left .lv-time-container{ margin-right:15px; text-align:right; } .lv-time-right .lv-time-container{ float:left; margin-left:15px; padding-right:10px; text-align:left; } .lv-time-left .lv-time-container:after{ content:""; display:block; float:right; border-top:5px solid transparent; border-left:10px solid #949494; border-bottom:5px solid transparent; margin-right:-100%; margin-top:5px; } .lv-time-right .lv-time-container:before{ content:""; display:block; float:left; border-top:5px solid transparent; border-right:10px solid #949494; border-bottom:5px solid transparent; margin-left:-11px; margin-top:5px; } </style> </head> <body> <div class="lv-time-section"> <div class="lv-time-left"> <div class="lv-time-time"> 2018-05-13 </div> </div> <div class="lv-time-right"> <div class="lv-time-container"> <div class="lv-time-content"> 开篇-springboot环境搭建 </div> </div> </div> </div> <div class="lv-time-section"> <div class="lv-time-left"> <div class="lv-time-container"> <div class="lv-time-content"> 引入springmvc </div> </div> </div> <div class="lv-time-right"> <div class="lv-time-time"> 2018-05-14 </div> </div> </div> <div class="lv-time-section"> <div class="lv-time-left"> <div class="lv-time-time"> 2018-05-15 </div> </div> <div class="lv-time-right"> <div class="lv-time-container"> <div class="lv-time-content"> 添加多个控制器 </div> </div> </div> </div> <div class="lv-time-section"> <div class="lv-time-left"> <div class="lv-time-container"> <div class="lv-time-content"> 添加后台管理页面 </div> </div> </div> <div class="lv-time-right"> <div class="lv-time-time"> 2018-05-16 </div> </div> </div> <div class="lv-time-section"> <div class="lv-time-left"> <div class="lv-time-time"> 2018-05-17 </div> </div> <div class="lv-time-right"> <div class="lv-time-container"> <div class="lv-time-content"> 添加权限管理模块 </div> </div> </div> </div> <div class="lv-time-section"> <div class="lv-time-left"> <div class="lv-time-container"> <div class="lv-time-content"> 使用ueditor添加文章 </div> </div> </div> <div class="lv-time-right"> <div class="lv-time-time"> 2018-05-18 </div> </div> </div> <div class="lv-time-section"> <div class="lv-time-left"> <div class="lv-time-time"> 2018-05-19 </div> </div> <div class="lv-time-right"> <div class="lv-time-container"> <div class="lv-time-content"> 前端文章分页功能实现 </div> </div> </div> </div> <div class="lv-time-section"> <div class="lv-time-left"> <div class="lv-time-container"> <div class="lv-time-content"> 将博客部署到tomcat上 </div> </div> </div> <div class="lv-time-right"> <div class="lv-time-time"> 2018-05-20 </div> </div> </div> </body> </html>
实现上是这样考虑的，时间轴的每一小节都是一个独立的节点，这样每个小结就对应一个lv-time-section节点，而为了实现左右交叉布局，所以这儿定义了一个lv-time-left和lv-time-right，这样将时间和内容分别交叉放入各自的left和right div中，也就达到了交叉的效果。而中间的时间线则是通过给lv-time-left添加有边框来实现的；圆点是通过给lv-time-time添加after和before伪类来实现的，然后通过lv-time-time在那个div下面设置圆点的位置即可。而lv-time-content的尖号也是通过这种方式实现的。
这样的展示效果显得有层次感，我这儿是为了展示文章列表的，所以在结合下拉刷新的功能的话，相比于分页会更有用户体验效果。希望本文对你有所帮助。