使用css实现时间轴

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

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

打赏支持