zoukankan      html  css  js  c++  java
  • VML编程之oval圆rect矩型《VML极道教程》原著:沐缘华

    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;100;height:100;" fillcolor="yellow"/>
    <v:rect style="POSITION:absolute;Z-INDEX:1;LEFT:320px;TOP:150px;100;height:100;"/>
    <v:rect style="POSITION:absolute;Z-INDEX:2;LEFT:260px;TOP:230px;100;height:50;" strokeweight="2px"/>
    <v:oval style="POSITION:absolute;Z-INDEX:3;LEFT:290px;TOP:250px;50;height:100;" fillcolor="red" stroked="f"/>
    从例子中可以看出,oval、rect除了VML图形的通用属性外,没有专有属性。CSS的POSITION:absolute;使其以Vector3D形式在网页输出,z-index:;定义3D高度,left:;top:;则分别定义距离网页左、上方的位置,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="100;height:100;" fillcolor="yellow"/>
    <v:rect style="100;height:100;"/><p>
    <v:rect style="100;height:50;" strokeweight="2px"/><br>
    <v:oval style="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="100;height:100;" fillcolor="red" stroked="f"/></td>
    <td><v:oval style="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标记这些基础知识,以后我会慢慢教你如何精彩的实际应用。
  • 相关阅读:
    Web存储
    JavaScript模块化
    jQuery挖源码——事件绑定
    观察者模式——JavaScript
    Node.js之网络小爬虫
    ECMAScript的严格模式
    JavaScript和jQuery的事件
    认识Ajax
    Redis之intset数据结构
    Redis之Hash数据结构
  • 原文地址:https://www.cnblogs.com/GeneralXU/p/763208.html
Copyright © 2011-2022 走看看