zoukankan      html  css  js  c++  java
  • 用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的人对此感觉到神秘。

    <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
        
    <title>无标题页</title>
        
    <style>
    v\:*
    {behavior:url(#default#VML);}
    o\:*
    {behavior:url(#default#VML);}
    </style>
        
    <style>
    .startLine
    {
    position
    :relative;border:2;
    Z-INDEX
    :3011;LEFT:170px;POSITION:absolute;TOP:80px;
    }


    </style>
    </head>
    <body>
        
        
    <v:rect id="vml1" style="z-index: 1; left: 50;  120; position: absolute;
            top: 50; height: 60"
     fillcolor="white" strokecolor="black" strokeweight="3px">
            
    <table border="0" width="110" align="center" style="font-size:9pt;">
                
                
    <tr><td ><img src=t_web.gif border="0">流程开始</td></tr>
                
    <tr><td >申请人</td></tr>
                    
            
    </table>    
            
    </v:rect>    
       
    <v:line class="startLine" strokeweight="3px" from="0,0" to="100,0">
            
    <v:stroke endarrow="Classic" startarrow="Oval" />
        
    </v:line>            
                   
         
    <v:rect id="vml2" style="z-index: 1; left: 270;  120; position: absolute;
            top: 50; height: 60"
     fillcolor="white" strokecolor="black" strokeweight="3px">
            
    <table border="0" width="110" align="center" style="font-size:9pt;" >
                
                
    <tr><td  ><img src=t_web.gif border="0">部门领导审批</td></tr>
                
    <tr><td >部门经理</td></tr>
                    
            
    </table>    
            
    </v:rect>               
                
          
    <v:line style="position:relative;border:2;Z-INDEX:3011;LEFT:390px;POSITION:absolute;TOP:80px;" strokeweight="3px" from="0,0" to="100,0">
            
    <v:stroke endarrow="Classic"  />
        
    </v:line>         
           
        
        
        
    <v:rect id="vml3" style="z-index: 1; left: 490;  120; position: absolute;
            top: 50; height: 60"
     fillcolor="white" strokecolor="black" strokeweight="3px">
            
    <table border="0" width="110" align="center" style="font-size:9pt;" >
                
                
    <tr><td  ><img src=t_web.gif border="0">总经理审批</td></tr>
                
    <tr><td ><href="#" >总经理</a></td></tr>
                    
            
    </table>    
            
    </v:rect>               
                
          
    <v:line style="position:relative;border:2;Z-INDEX:3011;LEFT:610px;POSITION:absolute;TOP:80px;" strokeweight="3px" from="0,0" to="100,0">
            
    <v:stroke endarrow="Classic"  />
        
    </v:line>   
        
        
    <v:rect id="vml4" style="z-index: 1; left: 710;  120; position: absolute;
            top: 50; height: 60"
     fillcolor="white" strokecolor="black" strokeweight="3px">
            
    <table border="0" width="110" align="center" style="font-size:9pt;" >
                
                
    <tr><td  ><img src=t_web.gif border="0">归档</td></tr>
                
    <tr><td >归档员</td></tr>
            
    </table>    
        
    </v:rect> 
        
        
    </body>
    </html>
  • 相关阅读:
    一步步学习SPD2010--第六章节--处理数据源(4)--连接RSS Feed服务器端脚本
    一步步学习SPD2010--第六章节--处理数据源(3)--连接一个RSS Feed XML文件
    一步步学习SPD2010--第五章节--处理数据视图(10)--关键点
    一步步学习SPD2010--第六章节--处理数据源
    一步步学习SPD2010--第六章节--处理数据源(1)--使用数据源
    一步步学习SPD2010--第六章节--处理数据源(2)--处理XML数据
    一步步学习SPD2010--第五章节--处理数据视图(7)--使用公式栏目
    一步步学习SPD2010--第五章节--处理数据视图(8)--处理XPath表达式
    《python深度学习》笔记---5.4-1、卷积网络可视化-可视化中间激活
    《python深度学习》笔记---5.3-4、猫狗分类(使用预训练网络-微调模型)
  • 原文地址:https://www.cnblogs.com/anson/p/395280.html
Copyright © 2011-2022 走看看