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

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

“昵稱”本身最大的意義就在于個(gè)性化傳播，假如，我希望我所改變的昵稱能在第一時(shí)間讓我的好友收到，而好友卻因?yàn)椴幌胍驗(yàn)槲腋拿蟛徽J(rèn)識(shí)我了，逼不得已對(duì)我進(jìn)行了備注操作，那么我的愿望將無(wú)法達(dá)成，好友必須“查看資料”來(lái)被動(dòng)更新我的最新昵稱（好友并不知道我改過(guò)昵稱）！

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


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

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

<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>  返回首頁(yè)  </span><span   class  ="navtext_en">  Home  </span></a></li>  
          <li><a   href  ="#"><span>  注冊(cè)申請(qǐng)  </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>   

?

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

但是在xHTML中，CSS中沒(méi)有了這個(gè)就不知道如何是好，以下為解決方法：

css：

html：

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

IE中：
用height:1%
例：

非IE中：
用:after
例：

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

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

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

例一：

 CSS

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

HTML

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

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

例二：

CSS

HTML

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

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

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

         從這個(gè)例子，得以證明，ie對(duì)important的并不是不支持！

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

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

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

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

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

   在布局時(shí)，有時(shí)會(huì)遇到以下問(wèn)題：

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

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

      解決辦法很簡(jiǎn)單，給mainBox也加上一個(gè)  float: left 。