用HTML+CSS+JS如何 动态绘制 网络拓扑图?

html-css025

用HTML+CSS+JS如何 动态绘制 网络拓扑图?,第1张

1.各个应用系统、服务器信息及系统直接的调用都录入到数据库中

2.前端拓扑图、或系统调用关系图的展示UI可以通过一些选项从数据库中捞出数据，然后在UI上动态绘制出关系图来

3.如HTML5 Canvas或基于HTML5 Canvas的JTopo、SVG都可以很好的绘制出这种图来。

这个是DIV用的比较多，第一个MAIN,是第一级，main.m或main.m1,m2,m3是main的第二级，main.m.pcenter是第三级。第一级修改的包含了第二级和，以此类推。

可以用z-index控制，具体步骤如下：

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<body>标签中，输入html代码：

<img style="position: absolutetop:0z-index: 1" src="image.jpg" />

<img style="position: absolutetop:0" src="small2.png" />

3、浏览器运行index.html页面，此时大图因为z-index更大而被设置到更上面的图层了。