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

转载

于 2017-06-15 19:23:00 发布 · 3k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/umgsai/p/7019599.html

文章标签：

#前端 #javascript #ui #ViewUI

这篇博客展示了如何利用HTML和CSS技术实现一个审核流程的步骤效果，通过创建一系列的div元素来呈现流程节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下

每一个结点写一个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

<html>
    
    <head>
        <meta http-equiv="Content-Type" content=

最低0.47元/天解锁文章

200万优质内容无限畅学