1: The Oval circle and the rect rectangular VML oval and rect can respectively draw the circle and the rectangle, because the preparation methods, principles, and attributes of the two labels are basically the same, so I put them together to talk about the 3D output instances of oval and rect <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 "/>
As shown in the example, oval and rect have no proprietary attributes except the common attributes of VML images. Position: absolute of CSS, Which is output on webpage in vector3d form. Z-index:; defines 3D height, left:; top :; the positions on the left and top of the webpage, width: 100; Height: 50 are defined respectively. The width and height of the image are described as PX and 50 PX respectively. Fillcolor, strokeweight, and stroked control the background color, Border width, and border. The "F" value of stroked = "F" represents the short form of "false" of the Boolean variable type, indicating that no border is used, otherwise, if it is stroked = "T" or stroked = "true", the image has a border. True is the default value of the image, indicating that the 2D output instance of the border oval and rect is used <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 table </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>
From the example, it is not difficult to see that VML is formatted and output in the same order as the traditional HTML Tag. When it comes to HTML line feed tags such as <p> <br>, it will start with another line. In addition, VML images can be nested in the HTML Tag created container (in this example, the container is a table. Because the position: absolute; is not defined for VML graphics, it will be output in the default 2D format like HTML. It is not hard to see how good the compatibility between VML and HTML is, however, after all, the VML vector2d design has a narrow application scope and can only serve as a supporting role of HTML. This section only provides a VML vector2d demonstration, so we will focus on the graphic design of VML vector3d in the future. You may not be able to see the highlights of the VML vector3d graphic design and how to apply it, but now you are only learning VML tagging and in-depth. When you have learned the basic knowledge of VML tagging, I will teach you how to make practical use of it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
