1: Mark practice and line-preface starting from this chapter, I will start with the simplest VML labels, step by step ....... Every time you learn to use a VML tag, your VML technology will have a huge leap. I will not explain the syntax and how to draw the mark. I will only give you some examples of the Mark abstraction, give comprehensive examples of the inherent attributes of the mark, all values of the inherent attributes, explain the role of attributes and attribute values. Even if you are given a sword, how you use it depends on your skill. 2: Line Mark, XYZ coordinate, and unit concept Line Mark can create a straight line between one XY Junction Point and the other XY Junction Point on the webpage, we will take the line as the first entry level for marking VML, and describe the related coordinates and basic unit knowledge in detail (the requirement is that you understand the coordinate system and unit concept, and you are not required to memorize it, it is a clear understanding of the concept of a simple 3D coordinate system, the concept of a unit is confused) for example: at the left side of the page (left1) = 233px, top of the page (top1) = 150px (this is the 1st XY Junction Point), and creates a line with the left1 100pt offset and the top1 94.5pt offset <HTML xmlns: V> <style> V \: * {behavior: URL (# default # VML) ;}</style> <body>
<V: Line Style = "Z-INDEX: 5; left: 233px; position: absolute; top: 150px" from = "" To = "100pt, 94.5pt"/>
From the source code, it is not difficult to find out that this line is defined as vector3d (x left, y top, z-index) by CSS (style = "Here is the place where CSS styles are written) structure, where left: 233px determines the absolute position of the line left, top: 150px determines the absolute position of the line, Z-index: 5 determines the 3D height of the line, while to = "100pt, 94.5pt" determines the VML unit for left1 offset and top1 94.5pt offset, you may ask Pt in px and 94.5pt of 233px. What does it mean and how long does it mean? In fact, 233px is 233 screen pixels, which is the smallest and most accurate unit. I recommend you use this unit. 94.5pt is equivalent to (94.5*1.25 = 118.125px). It is not difficult to calculate that PT is greater than PX by 1 in 4, that is, 75pt = 100px. The default unit of CSS is PX (left: 233px; left: 233; the same effect is not added), and the default unit of VML is PX (to = "100pt, 94.5pt "written as to =" 100, 94.5 "is different, the latter will use PX computing, which is naturally shorter than the former). We recommend the latter for future development, when the remaining force and unit are precise, the Z-index of CSS defines the 3D height of the image, there is no concept of PX and PT, but the concept of pure number. The default value of Z-index is 0, which is a flat page like HTML. The larger the Z-index value of a graph, the larger the Z-index value will overwrite and hide the graph with a smaller Z-index value than the value of the graph. This is the 3D height. The position:; of CSS determines how the image is output. We use absolute (absolute positioning), that is, output the image in the form of vector3d (XYZ. If the position value is null or static, the image will be output sequentially in the traditional 2D plane form. Of course, left: 233px; top: 150px; Z-index: 5. These settings do not work at all. If VML can only be used in this way, there will be no value. For example, at left1 = 200px and top1 = 150px on the webpage, create a line with the left1-100px offset and the top1 50 offset <HTML xmlns: V> <style> V \: * {behavior: URL (# default # VML) ;}</style> <body>
<V: Line Style = "Z-INDEX: 5; left: 200; position: absolute; top: 150" to = "-"/>
You will find that the line is shifted to-100px (negative number supported) to the left and 50px to the top. Now, you can modify left: 200;, top: 150;, to = "-, 50" by yourself. In practice, you can deepen your understanding of VML draw lines, in example 1, the line has a property from = "0, 0", but not in example 2. In fact, from is the proprietary attribute of the line, and its role is to control the X and Y offsets of the first intersection point (left: 233px; top: 150px; In example 1, we have defined it as 0, 0, that is, the XY of the first handover point is not offset (this mark is not very useful in 3D structure development, so we only need to know little about it, because left :; top:; can replace it more accurately), otherwise you can try to change from = "0, 0" in Example 1 to another value 3: you may ask again if you want to add a general attribute to the line. Can this line be green and rough? The answer is yes, of course. We will use the general VML attributes we mentioned earlier. Here we repeat it to deepen your understanding of general attributes. The example is as follows <HTML xmlns: v> <style> V \: * {behavior: URL (# default # VML);} </style> <body>
<V: Line Style = "Z-INDEX: 5; left: 200; position: absolute; top: 200" to = "" strokecolor = "green" strokeweight = "3px"/>
4: First, you know that the VML graphic effects processing class is marked as a sub-mark. You will ask, can the border be a dotted line? Can it be an arrow? And so on. The answer is "OK"-you can use the second-level mark "sub-mark. It's just that you haven't mastered the circle, arc, curve, rectangle, and circle, the "sub-mark" is equivalent to a complex set of "General attributes" that can process borders, fills, and dimensions of any VML graphics (line, circle, rectangle, etc. This will be explained in the subsequent sections after you learn the VML drawing markup. We will give you a demonstration of the "submark" first, and you are not required to master it now, you only need to know how to draw lines with line in this chapter, and then learn from one chapter after another. <HTML xmlns: V> <style> V \: * {behavior: URL (# default # VML) ;}</style> <body>
<V: Line Style = "Z-INDEX: 6; left: 125; position: absolute; top: 275" to = "" strokecolor = "green" strokeweight = "10px"/>
<! -- The following is the line after being modified with the sub-mark stroke (Border Processing mark) -->
<V: Line Style = "Z-INDEX: 5; left: 200; position: absolute; top: 200" to = "0,150" strokecolor = "red" strokeweight = "10px">
<V: stroke dashstyle = "symbol DOT" endarrow = 'classic '/>
</V: Line>
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
