进度条代码:
<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='arrow_1'>
</td>
<td id="step_2">
<p>
Verify your identity
</p>
</td>
<td id='arrow_2'>
</td>
<td id="step_3">
<p>
Reset your password
</p>
</td>
<td id='arrow_3'>
</td>
</tr>
</table>
</tr>
</table>
主要是设置每个页面的CSS
第一步: 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>
第二步: 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>
第三步: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>