代碼沒有優化，只想表現方法與思路。

圖中顯示了QQ資料可以自主設置好友備注（標注“1”），一般情況下用于幫助用戶能更快更容易的將列表中的好友和潛意識中的某個特定的人相關聯。設置后，無論對方怎么改昵稱，自己好友列表中的名字都不會變（標注“2“），由此解決了一些用戶經常不知道好友是誰的問題。但同時也帶來了另一個問題：

“昵稱”本身最大的意義就在于個性化傳播，假如，我希望我所改變的昵稱能在第一時間讓我的好友收到，而好友卻因為不想因為我改名后不認識我了，逼不得已對我進行了備注操作，那么我的愿望將無法達成，好友必須“查看資料”來被動更新我的最新昵稱（好友并不知道我改過昵稱）！

個人建議是，在好友列表中仍然顯示好友的個性昵稱，而當用戶需要了解此人時，再點擊資料，主動獲取此人的備注（如果已經添加），這不僅符合傳統意義對“備注”的定義，同時也保權了部分用戶的個性化展示需求。


踏踏實實做人，勤勤懇懇做事，我的技術博客，時隔一年，繼續更新！

是在藍色理想上面回答一個問題時設計的。個人覺得難度主要在于兼容ＩＥ與ＦＦ兩個瀏覽器方面！

<style>  
#nav ul  {  
    list-style  :  none  ;  
      }  
#nav li  {  
    float  :  left  ;  
    margin  :  0 10px  ;  
      }  
#nav a  {  
    text-decoration  :  none  ;  
    display  :  block  ;  
    width  :  60px  ;  
    border-left  :  5px solid #ccc  ;  
    padding-left  :  3px  ;  
    raven_on  :  expression(onmouseover=function(){this.all.tags("span")[1].style.color="rgb(0,106,161)"  ;   }  );
    raven_off:expression(onmouseout=function()  {  this.all.tags("span")[1].style.color="#999";  }  );
}
#nav a:hover  {  
    border-left  :  5px solid red  ;  
}  
#nav span  {  
    display  :  block  ;  
    font-size  :  12px  ;  
    color  :  #000  ;  
}  
#nav .navtext_en  {  
    font-family  :  Verdana  ;  
    font-size  :  10px  ;  
    font-weight  :  bold  ;  
    line-height  :  10px  ;  
    color  :  #999  ;  
}  
#nav a:hover [class="navtext_en"]  {  
    color  :  rgb(0,106,161)  ;  
}  
</style>  


<div   id  ="nav">   
      <ul>  
          <li><a   href  ="#"><span>  返回首頁  </span><span   class  ="navtext_en">  Home  </span></a></li>  
          <li><a   href  ="#"><span>  注冊申請  </span><span   class  ="navtext_en">  Reg  </span></a></li>  
          <li><a   href  ="#"><span>  最新日志  </span><span   class  ="navtext_en">  Read  </span></a></li>  
          <li><a   href  ="#"><span>  博客列表  </span><span   class  ="navtext_en">  Insider  </span></a></li>  
          <li><a   href  ="#"><span>  可選模板  </span><span   class  ="navtext_en">  Template  </span></a></li>  
      </ul>  
</div>   

?