Progress navigation bar (like Yahoo! password retrieval)

Progress bar code:

<Table width = "800" cellpadding = "0" cellspacing = "0" border = "0"
Id = "progressbar">
<Tr valign = "center">
<TD id = "step_0">
<P>
Your progress
</P>
</TD>
<TD id = "Steps">
<Table width = "100%" cellpadding = "0" cellspacing = "0" border = "0">
<Tr valign = "center">
<TD id = "step_1">
<P>
What did you forget?
</P>
</TD>
<TD id = 'row _ 1'>
& Nbsp;
</TD>
<TD id = "step_2">
<P>
Verify your identity
</P>
</TD>
<TD id = 'row _ 2'>
& Nbsp;
</TD>
<TD id = "step_3">
<P>
Reset your password
</P>
</TD>
<TD id = 'row _ 3'>
& Nbsp;
</TD>
</Tr>
</Table>
</Tr>
</Table>

 

It mainly sets the CSS of each page.

Step 1: What did you forget?

<Style type = "text/CSS">
# Progressbar {
Padding-bottom: 0.5em;
Border: 1px solid # 6666cc;
}
# Progressbar P {
Font-weight: bold;
Padding-top: 2px;
Padding-Right: 0;
Padding-bottom: 2px;
Padding-left: 0;
Text-align: center;
}
# Steps {
Padding: 2px;
Background-color: white;
}
# Step_0 {
Padding: 2px 0.5em 2px 0;
}
# Step_1 {
Text-align: center;
Background-color: # 6666cc;
Color: # FFF;
}
# Step_1 P {
Padding-top: 2px;
Padding-Right: 0;
Padding-bottom: 2px;
Padding-left: 5px;
}
# Step_2 {
Text-align: center;
Background-color: # ccccff;
Color: # FFF;
}
# Step_3 {
Text-align: center;
Background-color: # ccccff;
Color: # FFF;
}
# Arrow_1 {
Background: # ccccff URL (https://s.yimg.com/lq/ I /reg/ar_progress_sprite.png)-2333px 50%;
Width: 30px;
}
# Arrow_2 {
Background: # ccccff URL (https://s.yimg.com/lq/ I /reg/ar_progress_sprite.png)-3110px 50%;
Width: 30px;
}
# Arrow_3 {
Background: # ccccff URL (https://s.yimg.com/lq/ I /reg/ar_progress_sprite.png)-795px 50%;
Width: 20px;
}
</Style>

 

Step 2: verify your identity

<Style type = "text/CSS">
# Progressbar {
Padding-bottom: 0.5em;
Border: 1px solid # 6666cc;
}
# Progressbar P {
Font-weight: bold;
Padding: 2px 0;
Text-align: center;
}
# Steps {
Padding: 2px;
Background-color: white;
}
# Step_0 {
Padding: 2px 0.5em 2px 0;
}
# Step_1 {
Text-align: center;
Background: # cccccc;
Color: # FFF;
}
# Step_2 {
Text-align: center;
Background: # 6666cc;
Color: # FFF;
}
# Step_2 P {
Padding: 2px 0 2px 0;
}
# Step_3 {
Text-align: center;
Background: # ccccff;
Color: # FFF;
}
# Arrow_1 {
Background: # cccccc URL (https://s.yimg.com/lq/ I /reg/ar_progress_sprite.png)-3890px 50%;
Width: 30px;
}
# Arrow_2 {
Background: # 6666cc URL (https://s.yimg.com/lq/ I /reg/ar_progress_sprite.png)-2333px 50%;
Width: 30px;
}
# Arrow_3 {
Background: # ccccff URL (https://s.yimg.com/lq/ I /reg/ar_progress_sprite.png)-792px 50%;
Width: 20px;
}
</Style>

 

Step 3: reset your password

<Style type = "text/CSS">
# Progressbar {
Padding-bottom: 0.5em;
Border: 1px solid # 6666cc;
}
# Progressbar P {
Font-weight: bold;
Padding: 2px 0;
Text-align: center;
}
# Steps {
Padding: 2px;
Background-color: white;
}
# Step_0 {
Padding: 2px 0.5em 2px 0;
}
# Step_1 {
Background: # cccccc;
Color: # FFF;
}
# Step_2 {
Background: # cccccc;
Color: # FFF;
}
# Step_3 {
Background: # 6666cc;
Color: # FFF;
}
# Step_3 P {
Padding: 2px 0 2px 0;
}
# Arrow_1 {
Background: # cccccc URL (https://s.yimg.com/lq/ I /reg/ar_progress_sprite.png)-1550px 50%;
Width: 30px;
}
# Arrow_2 {
Background: # cccccc URL (https://s.yimg.com/lq/ I /reg/ar_progress_sprite.png)-3890px 50%;
Width: 30px;
}
# Arrow_3 {
Background: # 6666cc URL (https://s.yimg.com/lq/ I /reg/ar_progress_sprite.png) No-repeat-35px 50%;
Width: 20px;
}
</Style>