HTML+CSS实现审核流程步骤效果

效果图如下

每一个结点写一个div

body{
    margin: 10px;
    padding: 10px;
    background-color: #EEEEEE;
}

.progess-bar{
    with: 100%;
    height: 100px;
}

.ball{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin-left: 20px;
}

.progress{
    width: 2px;
    height: 80px;
    margin-left: 29px;
}

.detail{
    margin-left: 40px;
    float:left;
    font-size: 12px;
    color: #FF5722;
    position: relative;
    top: -20px;
    left: 5px;
}

.flow-detail{
    margin: 2px;
}

.active{
    background-color: #FF5722
}

.negative{
    background-color: #9F9F9F
}

html

    
    
        
        
        
    
    
    
        

            

            
            

                

                    创建流程
                
                

                    2017/6/14 下午5:07:44
                
            
            

            
        
        

            

            
            

                

                    信息提交完成
                
                

                    2017/6/14 下午6:08:44
                
            
            

            
        
    

转载于:https://www.cnblogs.com/umgsai/p/7019599.html