代碼沒有優(yōu)化，只想表現(xiàn)方法與思路。

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

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

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


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

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

<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>   

?

很多人在以往的頁面制作中用valign:bottom實現(xiàn)底部對齊。

但是在xHTML中，CSS中沒有了這個就不知道如何是好，以下為解決方法：

css：

html：

在xhtml排版中有個問題每個新人都要遇到，那就是一個div的float會影響到其父級元素hieght為值為0，對于ie和非ie，有以下兩種解決方法：

IE中：
用height:1%
例：

非IE中：
用:after
例：

      在剛剛的項目中發(fā)現(xiàn)一個問題，當(dāng)<LI>的margin-top設(shè)為0時（其實默認(rèn)情況下就是0），ie6、FF、opera這三個瀏覽器都正常執(zhí)行，但唯有ie5的<li>上下之間仍有空隙，放大之后量出空隙的高度為2PX的，幾翻折騰后，用以下代碼解決：

我想這應(yīng)該是ie5的BUG！

      很多人，包括很多網(wǎng)站（我所見過的所有網(wǎng)站，包括國內(nèi)著名的‘網(wǎng)頁設(shè)計師’網(wǎng)站），都說important是不被IE所支持和認(rèn)識的，可是真的是這樣嗎？看了下邊的兩個例子，也許你會改變一些看法！

例一：

 CSS

#box {
     color:red !important;
     color:blue;
 }

HTML

<div id="Box"> 在不同的瀏覽器下，這行字的色應(yīng)該不同！</div>

          這個例子應(yīng)該是大家經(jīng)常見到的important的用法了，在IE環(huán)境下，這行字是藍色，在firefox下，為紅色，其用法不再多說了，看下一個例子。

例二：

CSS

HTML

 
         例二中，CSS代碼第一行設(shè)定了box里面所有div中字體色為紅色，第二行和第三行都用class重新定義了自身div的字體色為藍色，不同的是，第二行末使用important，而第三行使用了！

         默認(rèn)情況下，class的優(yōu)先級小于id，所以，第二行中即使用class重定義了自身樣式，也無法生效，所以繼承父級屬性，這行字還是紅色！

         但是，第三行中，用了important提升優(yōu)先級（或看成強制重定義），所以這里的css得以生效，這行字變?yōu)榱怂{色！

         從這個例子，得以證明，ie對important的并不是不支持！

            那么為什么很多人都說ie不認(rèn)識它呢？我想應(yīng)該是大家實戰(zhàn)中可能都沒有遇到例子中的情況： 當(dāng)你想提升class的優(yōu)先級時怎么辦？

           也就是說大家可能都忽略了它的這一作用，只了解在命名為同一個元素的CSS代碼塊中，用它來提升排列順序相對靠前的代碼的優(yōu)先級（例一）！

        通過上邊兩個例子，得以總結(jié)：

        important對 一個良好（或者是標(biāo)準(zhǔn)）的瀏覽器來說，不僅僅是從順序上提升代碼的優(yōu)先級，還可以用來提升class的優(yōu)先級（比如firefox），但是從IE對前者的不支持可以看出，這只是IE的一大BUG，而不能說它“不認(rèn)識、不支持”！

         然而，不管怎么樣，IE的這一大BUG幫助我們解決了很多兼容性問題，這顯然不是件壞事！
         

   在布局時，有時會遇到以下問題：

<div id="mainBox">
      <div id="leftbox"></div>
      </div id="rightbox"></div>
</div>

         一個大的DIV（代碼中的“mainBox”）里，嵌套兩個小Div，其中第一個float:left，第二個float:right，結(jié)果發(fā)現(xiàn)，原來大的DIV的背景色沒有了，其實是內(nèi)容為空所致，因為內(nèi)部的這兩個小div都浮動到了MainBox的上層（z-index）。

      解決辦法很簡單，給mainBox也加上一個  float: left 。