1:VML标记VML是通过XML标记来描述矢量图形的,所以必须遵循一定规则,请看下面的几种标记写法1:图形不包含内容,可以直接使用/>号结束<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval fillcolor='red' style='100;height:150'/>
2:或者使用</名域名:标记名>的形式表示VML图形描述标记的结束 <HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval fillcolor='red' style='100;height:150'></v:oval>
2:VML标记通用属性说明和HTML标记的通用属性(如:id、name、class、title、style)等一样,VML标记也有自己的通用属性、支持HTML的通用属性、支持CSS的样式定义。通过这些属性,我们可以修饰VML图形(如线、圆形)的形状、大小、颜色、内容、边框,以及定义鼠标样式、编程用的ID索引、提示标题等等3:VML标记特有的通用属性(非HTML、CSS所有) - 参考表VML特有通用属性使用范例: <HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval strokeweight='5' strokecolor='red' fillcolor=yellow style='100;height:150'></v:oval>
<v:oval stroked=false fillcolor=yellow style='100;height:150'/>
属性名 | 默认值 | 值类型/范围 | 用途 |
strokeweight | 0.75pt=1px | number | 描述图形的边框粗度 |
strokecolor | black | color | 描述图形的边框颜色 |
stroked | true | boolean | 描述图形是否使用边框 |
fillcolor | white | color | 描述图形的背景颜色 |
filled | true | boolean | 描述图形是否使用背景 |
true | boolean | 描述图形是否允许被打印机打印 | |
coordsize | 1000,1000 | Vector2D | 暗示图形与容器空间的大小比例 |
coordorigin | 0 0 | Vector2D | coordinate at top-left corner of element |
wrapcoords | null | string | outline to use for tight text wrapping |
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval href='http://www.microsoft.com' title='提示标题' target='_blank' fillcolor=red style='100;height:150'/>
<v:oval href='http://www.microsoft.com' title='提示标题' target='_blank' fillcolor=red style='100;height:150'/>
属性名 | 默认值 | 值类型/范围 | 用途 |
id | null | string | 定义元素的标识索引(多用于DHTML编程) |
class | null | classname | 定义元素使用的CSS样式类 |
style | null | CSS string | 描述图形的CSS样式表 |
title | null | string | 定义图形的提示标题(鼠标靠近后的帮助提示) |
href | null | string | 定义图形链接的URL地址 |
target | _self | _self/_blank/_top | 定义图形以何种形式打开链接 |
contentEditable | false | boolean | 描述图形内容是否允许用户编辑 |
dir | ltr | ltr/rtl | 描述图形内容以哪种方向输出 |
disabled | false | boolean | 描述图形能够响应用户事件触发 |
<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval fillcolor="rgb(255,0,0)" style='position:absolute;left:50;top:150;200;height:100;cursor:crosshair;z-index:5000'/>
<v:oval fillcolor="#0000ff" style='position:absolute;left:150;top:250;200;height:100;cursor:move;rotation:60;z-index:2000'/>
<v:rect fillcolor="green" style='position:absolute;left:400;top:150;200;height:100;cursor:help;rotation:120;zoom:2.5;color:red'>已经被缩放2.5倍</v:rect>
<v:oval fillcolor="rgb(255,0,0)" style='position:absolute;left:50;top:150;200;height:100;cursor:crosshair;z-index:5000'/>
<v:oval fillcolor="#0000ff" style='position:absolute;left:150;top:250;200;height:100;cursor:move;rotation:60;z-index:2000'/>
<v:rect fillcolor="green" style='position:absolute;left:400;top:150;200;height:100;cursor:help;rotation:120;zoom:2.5;color:red'>已经被缩放2.5倍</v:rect>
属性名 | 可用值/可用值范围 | 用途 |
width | 0-9999 | 描述宽度 |
height | 0-9999 | 描述高度 |
position | static absolute fixed relative | 描述如何定位输出 |
left | 0-9999 | 描述距离页面位置左 |
top | 0-9999 | 描述距离页面位置上 |
z-index | 0-9999 | 描述3D位置 |
cursor | auto crosshair hand move help wait text…… | 描述鼠标形状 |
zoom | 0-99 | 描述缩放比例 |
clip | rect(上 右 下 左) | 描述裁剪对象 |
border | 0-99 style color | 描述边框 |
display | block none inline list-item | 描述显示或隐藏 |
overflow | visible auto hidden scroll | 描述滚动条 |
color | colorstring | 描述文本内容颜色 |
font-size | 0-999 | 描述文本内容字号 |
filter | xray flipv fliph invert alpha(opacity=num) | 描述滤镜效果 |
rotation | (0-9999)%360 | 描述旋转度 |
flip | x y | 描述反转或颠倒图形 |
…… | …… | …… |