Dorea.js框架介绍：纯CSS写出优雅好看的时间线/时间轴（左右垂直展示）

在准备搭建博客，准备写一个心情的功能模块，以时间线的形式展现出来（有的人称为时间轴），发现Layer的提供的时间线挺好看的。速递地址：layui。但不是很符合本人自己的心意，想要一种左右左右展示的风格，于是模仿layer写了一个左右左右展示的时间线/时间轴。

思路：固定宽度的盒子，li只占50%，利用浮动，奇数在右侧，偶数在左侧。

直接贴码：

    

        

            

                
                

                    2018年07月27日
                    

                    《哆啦A梦》（日语：ドラえもん；英语：Doraemon；旧译叮当 / 小叮当）
                    是由日本漫画家藤本弘（笔名藤子·F·不二雄）和
                    安孙子素雄（笔名藤子不二雄A）共同创作的漫画作品，
                    1987年12月23日后，由于两位作者打算各自创作漫画，
                    《哆啦A梦》系列的创作便完全由藤本弘负责。
                        
                    
                
            
            

                
                

                    2018年07月28日
                    

                        今天是7月28号
                        
我来自中华人民共和过
                        
咦咦咦，这个时间轴很漂亮啊
                        
超喜欢作者的文章
                        
关注一下作者的github吧。比心
                    
                
            
            

                
            
        
    

/* 时间线 */
.timeline{
    text-align: center;
    background-color: #fff;    
}
.timeline>ul{
    padding: 0;
    display: inline-block;
    width: 600px;
}
.timeline>ul>li{
    position: relative;
    width: 50%;
    min-height: 17px;
    list-style: none;
    clear: both;    
}
/* 偶数的li在右侧 */
.timeline>ul>li:nth-child(odd){
    float: right;
}
.timeline>ul>li:nth-child(odd)::before{
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 1px;
    height: 100%;
    background-color: #e6e6e6;
}
.timeline>ul>li:nth-child(odd) i{
    left: -8.5px;
}
.timeline>ul>li:nth-child(odd) div.timeline-content{
    padding-left: 30px;
}
/* 奇数的li在左侧 */
.timeline>ul>li:nth-child(even){
    float: left;
}
.timeline>ul>li:nth-child(even)::after{
    display: block;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    width: 1px;
    height: 100%;
    background-color: #e6e6e6;
}
.timeline>ul>li:nth-child(even) i{
    right: -8.5px;
}
.timeline>ul>li:nth-child(even) div.timeline-content{
    padding-right: 30px;
} 
.timeline>ul>li:nth-child(even) span{
    text-align: right;
}

/* 共同样式 */
.timeline>ul>li div.timeline-content{
    text-align: left;    
    box-sizing: border-box;
}   
.timeline>ul>li img{
    display: block;
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
}
.timeline>ul>li p{
    margin: 0;
    color: #555;
}
.timeline>ul>li span{
    margin-bottom: 13px;
    display: block;
    font-size: 15px;
    font-weight: 500;
}
.timeline>ul>li i{
    position: absolute;
    top: 1px;
    z-index: 10;
    width: 17px;
    height: 17px;
    line-height: 20px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #393D49;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}
/* 时间线 end*/

直接效果图：

有比较的轮子或者UI，本人写好后会直接放上GitHub的仓库。

谢谢各位支持，喜欢的朋友可以fork一下哦！

Github: https://github.com/zpChiu/dorea.git

文章原创，转摘请知悉本人。

比心。