当前位置: 首页 > article >正文

html流程图

 要创建一个HTML流程图,你可以使用HTML、CSS,不过,对于简单的流程图,你也可以直接使用HTML和CSS来手动布局。下面是一个使用纯HTML和CSS创建简单流程图的示例:

 效果图

html 

<!DOCTYPE html>
<html>
<head>
    <link href="draw.css" rel="stylesheet" />
    <script src="draw.js" type="text/javascript"></script>
</head>
<body>
    <div class="diamond" style="top:100px;left: 100px;">
        <span class="diamond-text">开始</span>
    </div>

    <!-- 下箭头 -->
    <div class="arrow-down" style="top:195px;left:140px;">
        <span></span>
    </div>

    <div class="rectangle" style="top:275px;left: 100px;">
        <span class="rectangle-text">步骤一</span>
    </div>

    <div class="arrow-down" style="top:325px;left:140px;">
        <span></span>
    </div>

    <div class="rectangle" style="top:405px;left: 100px;">
        <span class="rectangle-text">步骤二</span>
    </div>

    <div class="arrow-down" style="top:455px;left:140px;">
        <span></span>
    </div>

    <div class="diamond" style="top:550px;left: 100px;">
        <span class="diamond-text">分叉节点</span>
    </div>

    <div>
        <div class="arrow-down" style="top:645px;left:140px;">
            <span></span>
        </div>

        <div class="rectangle" style="top:725px;left: 100px;">
            <span class="rectangle-text">步骤三</span>
        </div>

    </div>

    <div>
        <div class="arrow-horizontal-down" style="top:590px;left:205px;">
            <div></div>
            <span></span>
        </div>

        <div class="rectangle" style="top:725px;left: 220px;">
            <span class="rectangle-text">步骤四</span>
        </div>
        
        <div class="rectangle" style="top:725px;left: 330px;">
            <span class="rectangle-text">步骤5</span>
        </div>
    </div>
    <div>
        <div class="arrow-horizontal-down" style="top:590px;left:345px;">
            <div></div>
            <span></span>
        </div>

        <div class="rectangle" style="top:725px;left: 480px;">
            <span class="rectangle-text">步骤6</span>
        </div>
    </div>
    <div>
        <div class="arrow-horizontal-down" style="top:590px;left:485px;">
            <div></div>
            <span></span>
        </div>

        <div class="rectangle" style="top:725px;left: 620px;">
            <span class="rectangle-text">步骤7</span>
        </div>
    </div>
    <div class="arrow-down" style="top:775px;left:140px;">
        <span></span>
    </div>
    <div class="diamond" style="top:870px;left: 100px;">
        <span class="diamond-text">分叉节点</span>
    </div>
    <div class="arrow-down" style="top:965px;left:140px;">
        <span></span>
    </div>

  
    </div>
</body>
</html>

css

/* 椭圆 */
.ellipse {
    width: 100px;
    height: 50px;
    background-color: #6495ED;
    border-radius: 100px;
    text-align: center;
    position: absolute;
  }
  
  
  /* 菱形,长宽91.28 */
  .diamond {
    width: 80px;
    height: 80px;
    color: aliceblue;
    transform: rotate(45deg);
    background-color: rgb(249, 169, 100);
    position: absolute;
  }
   
  .diamond-text{
    width: 60px;
    margin-top: 10px;
    display: inline-block;
    transform: rotate(-45deg);
    text-align: center;
  }
  
  /* 长方形 */
  .rectangle{
    width: 92px;
    height: 50px;
    border: 1px;
    line-height: 50px;
    color: aliceblue;
    border-color: black;
    background-color: rgb(61, 64, 146);
    text-align: center;
    position: absolute;
  }
  
  /* 向下箭头 */
  .arrow-down {
    width: 2px;
    height: 80px;
    background-color: black;
    position: absolute;
  }
  
  .arrow-down span {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid black;
    position: relative;
    top:81px;left:-4px;
  }
  
  /* 折线箭头 */
  .arrow-horizontal-down {
    width: 180px;
    height: 2px;
    background-color: black;
    position: absolute;
    z-index: -1;
  }
  

  
  /* 横线 */
  .horizontal-line{
    width: 100px;
    height: 2px;
    background-color: black;
    position: absolute;
    z-index: -1;
  }
  

这个示例创建了一个简单的流程图,包括开始、执行步骤、检查条件、根据条件分支以及结束。流程图使用CSS进行样式设置,包括步骤框和箭头。


http://www.kler.cn/a/576207.html

相关文章:

  • RabbitTemplate类介绍、应用场景和示例代码
  • 在使用 router-link 进行路由跳转时,A页面跳转到A页面,资源要重新加载吗
  • 物联网-铁路局“管理工区一张图”实现方案
  • xxx **5. 物理安全** 详细解读
  • mybatis报错org/apache/commons/lang3/tuple/Pair] with root cause
  • React基础之Redux
  • wx122基于ssm+vue+uniapp的食堂线上预约点餐系统小程序
  • 【Python机器学习】1.7. 逻辑回归理论(进阶):多维度(因子)逻辑回归问题、决策边界、交叉熵损失函数、最小化损失函数
  • 26-小迪安全-模块引用,mvc框架,渲染,数据联动0-rce安全
  • go切片定义和初始化
  • VUE2表单检验及提示的消除
  • 迷你世界脚本自定义UI接口:Customui
  • dify中使用NL2SQL
  • 更新Vim使其支持系统剪切板
  • 探秘沃尔什-哈达玛变换(WHT)原理
  • 【蓝桥杯】每天一题,理解逻辑(3/90)【Leetcode 快乐数】
  • 初识Qt · 信号与槽 · 基础知识
  • K8s 1.27.1 实战系列(四)验证集群及应用部署测试
  • Redis 中配置账号密码是通过设置 `requirepass` 参数来实现
  • 解决VMWare无法打开虚拟机——内部错误