CSS- 横向和纵向时间轴

 

/*横向时间轴*/
        .time-horizontal {
            list-style-type: none;
            border-top: 1px solid #707070;
            max-width: 800px;
            padding: 0px;
            margin: 0px;
        }

        .text-horizontal {
            list-style-type: none;
            max-width: 800px;
            padding: 0px;
            margin: 0px;
        }

            .text-horizontal li {
                float: left;
                position: relative;
                text-align: center;
                width: 33.33%;
            }


        .time-horizontal li {
            float: left;
            position: relative;
            text-align: center;
            width: 33.33%;
            padding-top: 10px;
        }

        .nomal b:before {
            content: '';
            position: absolute;
            top: -10px;
            left: 47%;
            width: 12px;
            height: 12px;
            border: 2px solid #4c4c4c;
            border-radius: 8px;
            background: #4c4c4c;
        }

        .ok b:before {
            content: '';
            position: absolute;
            top: -10px;
            left: 47%;
            width: 12px;
            height: 12px;
            border: 2px solid #0074E8;
            border-radius: 8px;
            background: #0074E8;
        }



        
活动进度
        

        

            

                
报名中
                
进行中
                
结束
            
            

        
        

            

            

                
报名中
                
进行中
                
结束
            
            

        
    

下面的是横向和纵向

    
原文地址:http://www.cnblogs.com/xiaofeixiang/
    

        
成立
        
合作
        
发展
        
共赢
    


    

        
1keso
        
2FlyElephant
        
3博客园
        
4创业
    



/*横向时间轴*/
.time-horizontal {
    list-style-type: none;
    border-top: 1px solid #707070;
    max-width: 800px;
    padding: 0px;
    margin: 0px;
}
 
.time-horizontal li {
    float: left;
    position: relative;
    text-align: center;
    width: 25%;
    padding-top: 10px;
}
 
.time-horizontal li b:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 47%;
    width: 12px;
    height: 12px;
    border: 2px solid #4c4c4c;
    border-radius: 8px;
    background: #4c4c4c;
}
/*纵向时间轴*/
.time-vertical {
    list-style-type: none;
    border-left: 1px solid #707070;
    padding: 0px;
    height: 400px;
}
 
.time-vertical li {
    height: 100px;
    position: relative;
}
 
.time-vertical li a {
    display: inline-block;
    margin-left: 20px;
    margin-top: 15px;
    text-decoration: none;
    color: #000;
}
 
.time-vertical li b:before {
    content: '';
    position: absolute;
    top: 15px;
    left: -12px;
    width: 18px;
    height: 18px;
    border: 2px solid #98FB98;
    border-radius: 10px;
    background: #98FB98;
}
 
.time-vertical li span {
    position: absolute;
    color: #fff;
    top: 18px;
    left: -6px;
}