Proficient in CSS and HTML design patterns chapter 1 (easily deal with CSS)

Proficient in CSS and HTML design patterns chapter 1 (easily deal with CSS)
Proficient in CSS and HTML design patterns chapter 2 (HTML design patterns)
Proficient in CSS and HTML design patterns Chapter 3 (CSS selector and inheritance)
Proficient in CSS and HTML design patterns chapter 4 (CSS selection and inheritance)
Proficient in CSS and HTML design patterns chapter 6 (Box Model attributes)
Proficient in CSS and HTML design patterns chapter 8 (Box Model attributes)
9. proficient in CSS and HTML design patterns (positioning: Advanced)
Proficient in chapter 10 of CSS and HTML design patterns (divided content)
Proficient in CSS and HTML design patterns chapter 2 (alignment content)

Proficient in CSS and HTML design patterns chapter 1 (easily deal with CSS)

I. HTML element Classification Note: red indicates unfamiliar 

Block Elements:

HTML, Div, MAP, DT, form HR, body h1-h6DL, dd

P, BLOCKQUOTE (the referenced Statement)

Pre (pre-defined, reserved space, line feed width font is often used to present the computerCode)

Table Elements

Table TD th tbody

Thead tfoot

Inline ElementNote: The width attribute does not work for inline elements.

StrongCiteZhang San) EM (emphasizingZhang San) Var (James); Dfn (James); Code (James); KBD (James); SMP ( James) ; Ins (Zhang San); Del (indicates deletedZhang San)

Sub (zhangsan); SUP (zhangsan); abbr (UN inSome browsersThe title is displayed after the cursor is placed. Note 1: currently, Firefox, ie, Google, and roaming test support this attribute (abbr)

<Em>	Define the text as emphasized content.
<Strong>	Define text as toneStronger.
<Dfn>	Define a project.
<Code>	Define the computer code text.
<SAMP>	Define sample text.
<KBD>	Define the keyboard text. It indicates that the text is typed from the keyboard. It is often used in computer-related documents or manuals.
<Var>	Define variables. You can use this label with the <PRE> and <code> labels.
<Cite>	Define references. You can use this label to define references, such as titles of books or magazines.

List Element

UlOl DL

Example 1

When text is replaced by an image, text can be displayed if the image is not loaded.Text replacement

Replace heading2 with text

Not DisplayedDisplay

 

Code

< HTML xmlns = " Http://www.w3.org/1999/xhtml " >
< Head runat = " Server " >
< Title > Text replacement </ Title >
< Style Type = " Text/CSS " >

# H2 {
Position: relative;
Border: solid 1px;
Width: 250px;
Height: 76px;
Overflow: hidden;
}
# H2 Span
{
Position: absolute;
Border: solid 1px;
Width: 250px;
Height: 76px;
Left: 0 ;
Top: 0 ;


}
</ Style >
< Script Type = " Text/JavaScript " Language = " Javascript " >
Function viewimage (){
VaR select1 = Document. getelementbyid ( " Select1 " );
VaR Index = Select1.selectedindex;
VaR slvalue = Select1.options [Index]. value;
If (Slvalue = " No " ){
Document. getelementbyid ( " H2 " ). Childnodes [ 1 ]. Style. backgroundimage = " URL ('') " ;
}
Else {
Document. getelementbyid ( " H2 " ). Childnodes [ 1 ]. Style. backgroundimage = " URL (\ " Images / Heading2.jpg \ " ) " ;
}

}
</ Script >
</ Head >
< Body style = " Margin: 0; padding: 0 " >
< Form ID = " Form1 " Runat = " Server " >
< H1 Style = " Border: solid 1px " >
Text replacement </ H1 >
< H2 ID = " H2 "   > Title 2 < Span > </ Span > </ H2 >
< Select ID = " Select1 " Onchange = " Viewimage () " > < Option value = " No " > Not Displayed </ Option > < Option value = " Yes "   > Display </ Option > </ Select >
</ Form >
</ Body >
</ Html >

 

 

 

Example 2

Uppercase letters are displayed as images.

Letter sinking

MAgin. The first letter is an image and has been written down. If the first letter is not displayed, the letter is displayed!

Code

  < Style Type = " Text/CSS " >
. Pmagin_left
{
Position: relative;
Margin - Left: 110px;
}
. Imageleft
{
Height: 90px;
Width: 110px;
Position: absolute;
Left: 0 ;
Top: 0 ;
Background - Image: URL ( " ../Images/m.jpg " );
}
. Letter
{
Height: 90px;
Width: 110px;
Position: absolute;
Left: - 110px;
}
</ Style >

< H1 >
Letter sinking </ H1 >
< P Class = " Pmagin_left " >
< Span Class = " Letter " > M < Span Class = " Imageleft " > </ Span > </ Span > Agin, the first letter of 11 is an image and has been written down. If the first letter is not displayed, the letter is displayed!
</ P >

 

 

Example 3

 The priority of the stacked style (error correction:Import -- important)