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

html-css015

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

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

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

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

如果是我的话, 我会用li控制img,文字也包含在li里只是用span控制文字,设置span display属性为block, 它就会定位在img的下面

像这样:

<ul>

<li>

<img src="..." />

<span>这里图片1</span>

</li>

<li>

<img src="..." />

<span>这里图片2</span>

</li>

.....

</ul>

对了, li要浮动才能横向

如果css不会写的话,我们可以私下交流下.