如何使用只使用HTML和CSS的流程图图

html-css04

如何使用只使用HTML和CSS的流程图图,第1张

给个思路吧,一共分两层,外层div是一个时间和任务的二维坐标系,里层div是gantt图,整个gantt图大概有三个对象,一个bar是任务计划时间,一个progress是当前完成百分比,还有一个是date日期对象。bar和progress的值都从数据库来或者是传入的json数据,bar和progress的颜色不同,两者重叠表示一个任务的进度。date限定起始时间和结束时间。其他的一些添加子任务删除任务就不说了。

可以用CSS写,但可能要繁重点, 也可以用JS写,比较简单.

估计你没什么基础吧,还是比较简单的.

大概思想,在每一个点用LI,或者span等,标签写出来,再用onmove动作. 至于下面的安钮就更容易了, 直接onclick全部就行