CSS實(shí)例：kijiji社區(qū)頭像CSS效果_DIV+CSS實(shí)例
      
編輯Tag賺U幣
      


      教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!
      


      


						當(dāng)年看到LIVID的作的效果不錯(cuò)，寫學(xué)著寫了一個(gè)。但布局和他的不一樣，CSS也是重寫的。
      當(dāng)時(shí)的那個(gè)例子請(qǐng)看這里：客齊集社區(qū)頭像顯示的一個(gè)效果  ：


      寫完那個(gè)后，有人說(shuō)看不太明白是什么意思，今天正好有空，就簡(jiǎn)單說(shuō)一下這個(gè)效果的CSS。
      先看一下這個(gè)效果！

       代碼調(diào)試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運(yùn)行查看效果 ]

      首先看一下布局：

      示例代碼 [www.wf0088.com]
      <div id="zishu_test">
        <ul>
          <li><a href=""><span>64d / 47 hits</span><img src="http://p1.mb5u.com/divcss/10000009.jpg">pixu</a></li>
          <li><a href=""><span>24d / 35 hits</span><img src="http://p1.mb5u.com/divcss/294343.jpg">秀才</a></li>
          <li><a href=""><span>66d / 87 hits</span><img src="http://p1.mb5u.com/divcss/10000010.jpg">透露</a></li>
          <li><a href=""><span>40d / 34 hits</span><img src="http://p1.mb5u.com/divcss/11709126.jpg">LIVID</a></li>
          <li><a href=""><span>47d / 56 hits</span><img src="http://p1.mb5u.com/divcss/10000002.jpg">老孟</a></li>
          <li><a href=""><span>42d / 36hits</span><img src="http://p1.mb5u.com/divcss/11695932.jpg">小玉</a></li>
          <li><a href=""><span>63d / 67 hits</span><img src="http://p1.mb5u.com/divcss/10000025.jpg">pixu</a></li>
        </ul>
      </div>

      這個(gè)布局中的DIV可以不用加，因?yàn)槔镞叺臉?biāo)簽已經(jīng)足夠多了，完全可以用CSS控制每一處了。
      布完局了，先看一下現(xiàn)在的效果：

       代碼調(diào)試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運(yùn)行查看效果 ]

      上邊的代碼中是沒有加CSS是的效果，什么也沒有，就一個(gè)有序列表！
      下面，我們開始加CSS。

      示例代碼 [www.wf0088.com]
      //第一行設(shè)制一下BODY，定義全局，文字大小為12PX,行間隙是正常的1.8倍。文字居中，其它的沒有什么大用，我就說(shuō)一下主要的。
      body{ font-size:12px; line-height:1.8; font-family:Verdana, "宋體", Arial,Sans; text-align:center; background:#FFF; color:#666; margin:50px; padding:0; list-style:none; }
      //以下兩行是定義一下鏈接文字和背景色彩和下劃等。
      a:link,a:visited{color:#000099; text-decoration: underline;}
      a:hover,a:active{color:#000;text-decoration: none;}

      這會(huì)加了以上三行CSS先看一下效果：

       代碼調(diào)試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運(yùn)行查看效果 ]

      接下來(lái)，我們開始把LI的屬性干掉，然后再橫向排列一下。用以下代碼：

      示例代碼 [www.wf0088.com]
      //用list-style,margin,padding把LI的一些本身的屬性都干掉。然后再用float:left讓他們左對(duì)齊，這樣就實(shí)現(xiàn)在了橫向排列，這里定義的寬度為14%;是因?yàn)橐还灿衅邆�(gè)頭像，7乘以14%是98%; 基本上就算是一百了。
      #zishu_test li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none }

      以下是這時(shí)的效果：

       代碼調(diào)試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運(yùn)行查看效果 ]

      這是你會(huì)看到二行文字和國(guó)片在同一行上，還亂七八糟的。
      所以我們讓IMG以塊級(jí)元素顯示，這樣，就可以分成三行了。 另外，因?yàn)槭髽?biāo)沒有移到頭像上時(shí)SPAN里邊的內(nèi)容是不可見的。所以這里我們也把SPAN里邊的內(nèi)容隱藏一下；

      示例代碼 [www.wf0088.com]
      //讓圖像以塊級(jí)元素顯示，長(zhǎng)和寬都寫死了。加了一個(gè)1PX的邊框，用PADDING讓這個(gè)邊框離圖像3PX的像素。
      #zishu_test li img{ width:75px; height:75px; display:block; text-align:center; margin:auto; background:#FFF; padding:3px; border:1px solid #D8A18B;}
      //把SPAN里的內(nèi)容隱藏
      #zishu_test li span{display:none;}

      這里基本應(yīng)該有個(gè)大概的樣子出來(lái)了。看下邊的效果；

       代碼調(diào)試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運(yùn)行查看效果 ]

      但是這時(shí)是沒有鼠標(biāo)移上去出現(xiàn)SPAN的效果；所以我們用下邊的代碼加一下；

      示例代碼 [www.wf0088.com]
      這一行是定義鼠標(biāo)移上去后SPAN的效果；這里我用的絕對(duì)定位，但用了絕對(duì)定位后，SPAN的內(nèi)容就會(huì)把圖片給遮住；所以我又加了一句margin-top:10px;意思是把SPAN的內(nèi)容向上移動(dòng)10PX；用display:block定義一下以塊級(jí)元素顯示；其它的不說(shuō)了；
      #zishu_test li a:hover span{ margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; background:#FA9000; width:100px; color:#FFF; position:absolute; }
      //以下這行是定義A里邊內(nèi)容的效果；有了個(gè)邊框，但是白色，所以你看不到，又加了個(gè)背景色也是白的，你也看不到。你可以試著改成別的色，看一下效果；
      #zishu_test li a{border-right:1px solid #fff;border-bottom:1px solid #fff; width:100px; height:110px; background:#fff;display:block; padding-top:10px; margin:auto}
      //以下這行是定義鼠標(biāo)移上去后A里邊內(nèi)容的效果；給邊框改一個(gè)色，改了個(gè)背景色等；
      #zishu_test li a:hover{ border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; width:100px; height:110px; background:#F5F5F5;display:block; padding-top:10px;} 

      以下是這時(shí)的效果，基本全部完事了。

       代碼調(diào)試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運(yùn)行查看效果 ]

      但這時(shí)，你會(huì)發(fā)現(xiàn)，在IE6和IE7以及FIREFOX中的SPAN的的位置都不一樣；由于IE7不熟悉important;所以用下邊兩行代碼分別為IE6和IE7分別設(shè)置一下；

      示例代碼 [www.wf0088.com]
      //以下兩行代碼分別只有IE6和IE7才能熟悉；別的不認(rèn)
      * html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */ 
      * html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/ 

      好了，全部的就完了，其實(shí)一點(diǎn)也不難；但可能是新手還不熟吧； 

       代碼調(diào)試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運(yùn)行查看效果 ]

      我語(yǔ)言表達(dá)能力不行，可能有些地方一些新手還是看不太明白；那。。。那。。。我也沒有辦法；你多試幾下就明白了；
      另外；這樣的代碼還能優(yōu)化一點(diǎn)；但我沒有優(yōu)化；因?yàn)橐恍﹥?yōu)化過的；別人更不好理解了；
      再另外；這里邊的錯(cuò)別字一定相當(dāng)多；我沒有沒有檢查；有錯(cuò)字或讀不通的地方；你就多猜一下吧；
      本文作者：zishu




      

      



      


      來(lái)源：無(wú)憂整理//所屬分類：DIV+CSS實(shí)例/更新時(shí)間：2007-04-26


      

      



      


      



      相關(guān)DIV+CSS實(shí)例：