VML极道教程(四) oval圆rect矩型

本系列文章导航

VML极道教程(一) VML介绍

VML极道教程(二) VML入门

VML极道教程(三) 标记实战与line线

VML极道教程(四) oval圆rect矩型

VML极道教程(五) RoundRect圆矩型

VML极道教程(六) image图片

VML极道教程(七) polyline多边型

VML极道教程(八) shape多边型.shapetype模版.shape与curve曲线

VML极道教程(九) background背景

VML极道教程(十) group集合容器.vmlframe图形引用

VML极道教程(十一) 2级标记stroke边框,shadow阴影

VML极道教程(十二) VML编程大结局

oval圆rect矩型

1:oval圆与rect矩型
        VML的oval和rect分别可以绘制圆形与矩形,由于这两个标记的编写方法、原理、属性基本一致,所以我把他们放在一起讲 oval、rect的3D输出实例
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="POSITION:absolute;Z-INDEX:1;LEFT:200px;TOP:150px;width:100;height:100;" fillcolor="yellow"/>
<v:rect style="POSITION:absolute;Z-INDEX:1;LEFT:320px;TOP:150px;width:100;height:100;"/>
<v:rect style="POSITION:absolute;Z-INDEX:2;LEFT:260px;TOP:230px;width:100;height:50;" strokeweight="2px"/>
<v:oval style="POSITION:absolute;Z-INDEX:3;LEFT:290px;TOP:250px;width:50;height:100;" fillcolor="red" stroked="f"/>

        从例子中可以看出,oval、rect除了VML图形的通用属性外,没有专有属性。CSS的POSITION:absolute;使其以Vector3D形式在网页输出,z-index:;定义3D高度,left:;top:;则分别定义距离网页左、上方的位置,width:100;height:50;则分别描述图形的宽度为100px和高度为50px。fillcolor、strokeweight、stroked则分别控制背景颜色、边框粗度、有无边框。其中stroked="f"的“f"值即代表boolean变量类型的false的简写形式,表示不使用边框,否则为stroked="t"或stroked="true"则代表图形有边框。true是图形的默认值,表示使用边框
oval、rect的2D输出实例
<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="width:100;height:100;" fillcolor="yellow"/>
<v:rect style="width:100;height:100;"/><p>
<v:rect style="width:100;height:50;" strokeweight="2px"/><br>
<v:oval style="width:50;height:100;" fillcolor="red" stroked="f"/><br>
 
<table border=1><tr><td colspan=2 align=center>HTML表格</td></tr>
<tr>
<td><v:oval style="width:100;height:100;" fillcolor="red" stroked="f"/></td>
<td><v:oval style="width:100;height:100;" filled="false" strokecolor='blue'></v:oval></td>
</tr>
</table>

        从例子不难看出,VML像传统HTML标记那样按照代码顺序一一排版、输出,碰到<p><br>等HTML换行标记就会另起一行。而且,HTML标记创建的容器(本例容器是表格)内可以将VML图形嵌套。VML图形因为没有定义POSITION:absolute;,所以就会以默认的2D形式跟HTML一样输出
这点不难看出VML与HTML之间的兼容性是多么的良好,不过VML Vector2D设计毕竟应用面比较狭窄、只能做HTML的配角。本章节只是提供一个VML Vector2D的演示,所以以后我们将主要讲VML Vector3D的图形设计。也许你现在看不出VML Vector3D图形设计的精彩、如何应用,但现在你只是在学习VML标记、深入。当你学会了VML标记这些基础知识,以后我会慢慢教你如何精彩的实际应用。

博文来源:http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763208.html

你可能感兴趣的:(html,vector,url,border,图形,behavior)