VML教程

1 例子

content='text/html;charset=gb2312'>

第一个VML实例（2个OVAL圆形，1个roundrect圆矩形）：

style='width:100;height:150'/>

style=\"position:absolute;z-index:2;left:300;top:100;width:100;height:150\">

style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>包含内容

2 VML标记特有通用属性

属性名 strokeweight strokecolor stroked fillcolor filled print coordsize coordorigin wrapcoords

默认值 0.75pt=1px black true white true true 1000,1000 0 0 null

值类型/范围 number color boolean color boolean boolean Vector2D Vector2D string

用途

描述图形的边框粗度 描述图形的边框颜色 描述图形是否使用边框 描述图形的背景颜色 描述图形是否使用背景 描述图形是否允许被打印机打印 暗示图形与容器空间的大小比例

coordinate at top-left corner of element outline to use for tight text wrapping

3 VML标记支持的HTML通用属性

属性名 id class style title href target

contentEditable dir disabled

默认值 值类型/范围 null null null null null _self false ltr false

string classname CSS string string string

_self/_blank/_top boolean ltr/rtl boolean

用途

定义元素的标识索引(多用于DHTML编程) 定义元素使用的CSS样式类 描述图形的CSS样式表

定义图形的提示标题(鼠标靠近后的帮助提示) 定义图形链接的URL地址 定义图形以何种形式打开链接 描述图形内容是否允许用户编辑 描述图形内容以哪种方向输出 描述图形能够响应用户事件触发

4 VML标记支持的CSS通用属性

属性名 width height position left top z-index cursor zoom clip border display overflow color font-size filter rotation flip

可用值/可用值范围 0-9999 0-9999

static absolute fixed relative 0-9999 0-9999 0-9999

auto crosshair hand move help wait text…… 0-99

rect(上 右 下 左) 0-99 style color

block none inline list-item visible auto hidden scroll colorstring 0-999

xray flipv fliph invert alpha(opacity=num) (0-9999)%360 x y

用途 描述宽度 描述高度 描述如何定位输出 描述距离页面位置左 描述距离页面位置上 描述3D位置 描述鼠标形状 描述缩放比例 描述裁剪对象 描述边框 描述显示或隐藏 描述滚动条 描述文本内容颜色 描述文本内容字号 描述滤镜效果 描述旋转度 描述反转或颠倒图形

例子

style='position:absolute;left:50;top:150;width:200;height:100;cursor:crosshair;z-index:5000'/>

style='position:absolute;left:150;top:250;width:200;height:100;cursor:move;rotation:60;z-index:2000'/>

style='position:absolute;left:400;top:150;width:200;height:100;cursor:help;rotation:120;zoom:2.5;color:red'>已经被缩放2.5倍

5 RoundRect小试牛刀

例子：

style=\"POSITION:absolute;Z-INDEX:1;LEFT:100;WIDTH:70;TOP:100;HEIGHT:30;text-align:center;padding-top:8\" strokecolor=\"black\"

strokeweight=\"1px\" arcsize=\"0.2\" href=\"http://www.microsoft.com\" title=\"单击访问微软网站\" target=\"window1\">微软

style=\"POSITION:absolute;Z-INDEX:1;LEFT:170;WIDTH:70;TOP:100;HEIGHT:30;text-align:center;padding-top:8\" strokecolor=\"black\"

strokeweight=\"1px\" arcsize=\"0.2\" href=\"http://www.google.com\" title=\"单击访问google网站\" target=\"window1\">google

style=\"POSITION:absolute;Z-INDEX:5;LEFT:80;WIDTH:400;TOP:126;HEIGHT:250;text-align:center;padding-top:12\" strokecolor=\"black\"

strokeweight=\"1px\" arcsize=\"0.06\">