css 如何绘制一个流程图呢?


摘要:
下文讲述使用css代码绘制流程图的方法分享,如下所示:

 
实现思路:
    1.使用css绘制一个div
	2.然后绘制一个width=1px的div作为线条,
	3.依次定位即可实现流程图的绘制,如下例所示:

例:

 <style>

 
#container {
    width:580px;
    font-family:verdana,sans-serif;
    font-size:11px;
    text-align:center;
    
}
#container a {
    display:block;
    color:#000;
    text-decoration:none;
    background-color:#f6f6ff;
}
#container a:hover {
    color:#900;
    background-color:#f6f6ff;
}
#no1 {
    width:190px;
    line-height:60px;
    border:1px solid #000;
    margin:auto;
}
#no1 a {
    height:60px;
}
#line1 {
    font-size:0;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin:auto;
}
  
</style>


<p>
 maomao365.com <br />
 审批流程绘制方法
</p>
<hr />
<div id="container">

<div id="no1"><a href="#">开始</a></div>
<div id="line1"></div>
<div id="no1"><a href="#">第二个审批人</a></div>
<div id="line1"></div>
<div id="no1"><a href="#">第三个审批人</a></div>
<div id="line1"></div>
<div id="no1"><a href="#">第四个审批人</a></div>

</div>
css绘制流程图的示例分享

css绘制流程图的示例分享