Đang chuẩn bị liên kết để tải về tài liệu:
HTML in 10 Steps or Less- P13

HTML in 10 Steps or Less- P13:Welcome to HTML in 10 Simple Steps or Less. Our mission in writing this book is to provide a quick and accessible way for you to learn Hypertext Markup Language — the lingua franca of the World Wide Web. We hope this book provides a resource that beginning and intermediate HTML coders can use to improve their Web development skills. It is also our hope that it fills multiple roles as both a teaching tool and a reference once you expand your skills. | 216 Part 9 Task jOO Creating Layers with Relative Positions Generally you use the span tag to apply an inline style to a small section of page content instead of defining a larger block-level element as you do with the div tag. By setting the position property to relative you place the content that falls between the opening and closing span tags in a location relative to its normal position within the flow of the document. note When specifying coordinates for layers you can assign both positive and negative values. In Listing 100-1 observe how the negative value locates the span to the left of the text s normal inline position. 1. Within the body section of your document insert an opening span tag. 2. To apply a name to the layer add an id attribute and set it equal to the name you want to give the layer. 3. To begin including inline style syntax add a style attribute. The value for this attribute will contain the various style declarations. 4. To specify an absolute position for the layer define a position property and supply a value of relative. Follow this declaration with a semicolon to continue adding to the style attribute value. 5. To specify the coordinates for the layer s position define left and top properties and supply pixel values for them. 6. To control a layer s stacking order define the z-index property and supply it a numeric value. 7. Insert the content you want displayed within the layer and close the layer with a span tag. Listing 100-1 shows a code example and Figure 100-1 shows the results in the browser. caution The id attribute gives an element its unique name. For that reason no two elements can have the same value assigned to this attribute. html head title Layered Content title head body h1 The Rain in Spain Stays span id plain style position relative left -167px top 40px Mainly in the Plain. span h1 body html Listing 100-1 Example of a relative span Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Cascading .