HTML5 and CSS3 design modes

[Html]
I. background Design Model
<Style type = "text/css">
Div {background: # f00 url ("images/heading2.jpg") no-repeat; width: 250px; height: 76px ;}
</Style>
<H1> Background Image (Background design mode) <Div> </div>
 
Ii. Absolute positioning Design Model
<Style type = "text/css">
*. Positioned {position: relative ;}
*. Absolute {position: absolute; top: 10px; left: 10px ;}
</Style>
<H1> Absolute (Absolute positioning design mode) <Div class = "positioned">
<Span class = "absolute"> Sized Absolute </span>
</Div>
<Style type = "text/css">
*. Positioned {border: 1px solid red; height: 100px; background-color: # ffee00 ;}
*. Absolute {border: 4px solid green; background-color: white ;}
</Style>
 
Iii. Text replacement design mode
<Style type = "text/css">
# H2 {position: relative; width: 250px; height: 76px; overflow: hidden ;}
# H2 span {position: absolute; width: 250px; height: 76px; top: 0; left: 0; background: # ff0 url ("images/heading2.jpg ") no-repeat ;}
</Style>
<H1> Text Replacement (Text Replacement design mode) <H2 id = "h2"> heading 2 <span>  
Iv. left-side attention Design Model
<Style type = "text/css">
*. Left-marginal {position: relative; margin-left: 200px ;}
*. Marginal-heading {position: absolute; top: 0; left:-200px; margin: 0 ;}
</Style>
<H1> Left Marginal (Left Bypass design mode) <Div class = "left-marginal">
<H2 class = "marginal-heading"> Heading You want to excerpt an element and move it into the left again.
</Div>

5. side-by-side image sinking Design Mode
<Style type = "text/css">
*. Indent {position: relative; margin-left: 120px ;}
*. Graphic-dropcap {position: absolute; width: 120px; height: 90px; left:-120px; top: 0 ;}
*. Graphic-dropcap span {position: absolute; width: 120px; height: 90px; margin: 0; top: 0; left: 0; background: url (images/m.jpg) no-repeat ;}
</Style>
<H1> Marginal Graphic Dropcap <P class = "indent">
<Span class = "graphic-dropcap"> M <span> </span>
Arginal Graphic Dropcap. the letter M has been covered by the dropcap is image. screen readers read the text and visual users see the image. if the browser cannot display the dropcap image, the text becomes visible.
</P>