用VML实现画流程图!

今天看了一下VML的一些简单的教程,于是就拿VML来画画流程图。
感觉还像个样吧,呵呵 :)

就用了两个最基本的元素,
一是线,
<v:line style="position:relative;border:2" strokeweight="3px" from="0,0" to="100,0" >
</v:line>
二是框。
<v:rect id=vml10 style="Z-INDEX:1;LEFT:377;WIDTH:500;POSITION:absolute;TOP:188;HEIGHT:60" fillcolor="white" strokecolor="black" strokeweight="3px">
</v:rect>
有很多人问我要源代码,我现在就把它帖出来吧。
其实很简单的,可能没有接触过VML的人对此感觉到神秘。

None.gif<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
None.gif
<head>
None.gif    
<title>无标题页</title>
ExpandedBlockStart.gifContractedBlock.gif    
<style>dot.gif
ExpandedSubBlockStart.gifContractedSubBlock.gifv\:*
{dot.gif}{behavior:url(#default#VML);}
ExpandedSubBlockStart.gifContractedSubBlock.gifo\:*
{dot.gif}{behavior:url(#default#VML);}
None.gif
</style>
ExpandedBlockStart.gifContractedBlock.gif    
<style>dot.gif
InBlock.gif.startLine
ExpandedSubBlockStart.gifContractedSubBlock.gif
{dot.gif}{
InBlock.gifposition
:relative;border:2;
InBlock.gifZ-INDEX
:3011;LEFT:170px;POSITION:absolute;TOP:80px;
ExpandedSubBlockEnd.gif
}

ExpandedBlockEnd.gif
None.gif
</style>
None.gif
</head>
None.gif
<body>
None.gif    
None.gif    
<v:rect id="vml1" style="z-index: 1; left: 50; width: 120; position: absolute;
None.gif        top: 50; height: 60"
 fillcolor="white" strokecolor="black" strokeweight="3px">
None.gif        
<table border="0" width="110" align="center" style="font-size:9pt;">
None.gif            
None.gif            
<tr><td ><img src=t_web.gif border="0">流程开始</td></tr>
None.gif            
<tr><td >申请人</td></tr>
None.gif                
None.gif        
</table>    
None.gif        
</v:rect>    
None.gif   
<v:line class="startLine" strokeweight="3px" from="0,0" to="100,0">
None.gif        
<v:stroke endarrow="Classic" startarrow="Oval" />
None.gif    
</v:line>            
None.gif               
None.gif     
<v:rect id="vml2" style="z-index: 1; left: 270; width: 120; position: absolute;
None.gif        top: 50; height: 60"
 fillcolor="white" strokecolor="black" strokeweight="3px">
None.gif        
<table border="0" width="110" align="center" style="font-size:9pt;" >
None.gif            
None.gif            
<tr><td  ><img src=t_web.gif border="0">部门领导审批</td></tr>
None.gif            
<tr><td >部门经理</td></tr>
None.gif                
None.gif        
</table>    
None.gif        
</v:rect>               
None.gif            
None.gif      
<v:line style="position:relative;border:2;Z-INDEX:3011;LEFT:390px;POSITION:absolute;TOP:80px;" strokeweight="3px" from="0,0" to="100,0">
None.gif        
<v:stroke endarrow="Classic"  />
None.gif    
</v:line>         
None.gif       
None.gif    
None.gif    
None.gif    
<v:rect id="vml3" style="z-index: 1; left: 490; width: 120; position: absolute;
None.gif        top: 50; height: 60"
 fillcolor="white" strokecolor="black" strokeweight="3px">
None.gif        
<table border="0" width="110" align="center" style="font-size:9pt;" >
None.gif            
None.gif            
<tr><td  ><img src=t_web.gif border="0">总经理审批</td></tr>
None.gif            
<tr><td ><href="#" >总经理</a></td></tr>
None.gif                
None.gif        
</table>    
None.gif        
</v:rect>               
None.gif            
None.gif      
<v:line style="position:relative;border:2;Z-INDEX:3011;LEFT:610px;POSITION:absolute;TOP:80px;" strokeweight="3px" from="0,0" to="100,0">
None.gif        
<v:stroke endarrow="Classic"  />
None.gif    
</v:line>   
None.gif    
None.gif    
<v:rect id="vml4" style="z-index: 1; left: 710; width: 120; position: absolute;
None.gif        top: 50; height: 60"
 fillcolor="white" strokecolor="black" strokeweight="3px">
None.gif        
<table border="0" width="110" align="center" style="font-size:9pt;" >
None.gif            
None.gif            
<tr><td  ><img src=t_web.gif border="0">归档</td></tr>
None.gif            
<tr><td >归档员</td></tr>
None.gif        
</table>    
None.gif    
</v:rect> 
None.gif    
None.gif    
None.gif
</body>
None.gif
</html>
None.gif

转载于:https://www.cnblogs.com/anson/archive/2006/05/09/395280.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值