进度导航条（仿 雅虎 找回密码功能）

进度条代码:

<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'>
        &nbsp;
       </td>
       <td id="step_2">
        <p>
         Verify your identity
        </p>
       </td>
       <td id='arrow_2'>
        &nbsp;
       </td>
       <td id="step_3">
        <p>
         Reset your password
        </p>
       </td>
       <td id='arrow_3'>
        &nbsp;
       </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>