欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css客齊集社區(qū)頭像顯示效果

 更新時間：2008年06月07日 22:44:57   作者：  
這個例子,首先是把SPAN里的內(nèi)容用display:none;干掉,就是不顯示; 然后在A:HOVER時,再把SPAN里的內(nèi)容display:block; 就是顯示出來;同時定義一下SPAN的位置; 其它代碼很簡單,但有人說看不太懂;我就簡單說一下;
代碼說明:

這段中,定義了一個大的塊DIV; 并給了他一個ID; 下邊分別有LI,A,SPAN,IMG四個標簽; 這樣我們就可以在CSS中設(shè)置這四個標簽來實現(xiàn)我們想要的效果;

<div id="zishu_test">
  <ul>
    <li><a href="64d'>http://www.zishu.cn/blogview.asp?logID=553"><span>64d / 47 hits</span><img src="pixu/upload/20080607224454669.jpg">pixu</a></li>
...........
以下這段定義了網(wǎng)頁的基本內(nèi)容和鏈接的樣式;

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;}
以下這行定義了列表橫向顯示,每個LI占14%的寬度;14%是由100%除以7塊等于的; 而且LI里邊的內(nèi)容要居中顯示; margin:0 auto; 這句是為了實現(xiàn)FIREFOX居中顯示的;

#zishu_test li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none }
以下這行統(tǒng)一定義了一下A標簽;邊框,寬度,背景等; 其實這時候已經(jīng)有邊框了,只不過和背景色一樣;你看不到; 如果你把網(wǎng)頁的背景色改一下; 你就會看到效果了;

#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}
以下定義了圖片,給圖片邊上加了留白效果;和邊框效果;

#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;}
以下這行就是定義鼠標移上去的效果; 主要是顯示SPAN里的內(nèi)容; 和定義SPAN內(nèi)容的位置; 注意;這樣去定義SPAN的位置會在不同的瀏覽器中有不同的效果的;所以才有了后邊那兩行代碼;另外注意的是;這里只定義了SPAN;

#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; } 
以下這兩行是為了在不同瀏覽器中看到的效果一樣而寫的;主要是為IE6和IE7寫的; 有人問為什么不把IMPORTANT寫在上一行中? 你試一試再想一想就知道了; 我用這樣的辦法去改變IE6和IE7;我也不知道怎么樣;因為我實在沒有想到更好的辦法;

* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */ 
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/ 
最后這行就簡單了;只是改變邊框的色,給人的感覺就是鼠標移上去有變化了;

#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;} 

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

相關(guān)文章

  • Javascript 數(shù)組去重的方法（四種）詳解及實例代碼

    Javascript 數(shù)組去重的方法（四種）詳解及實例代碼

    這篇文章主要介紹了Javascript 數(shù)組去重的方法（四種）詳解及實例代碼的相關(guān)資料,這里對四種去重方法進行了詳細介紹，并附代碼實例，需要的朋友可以參考下
    2016-11-11
  • js通過location.search來獲取頁面?zhèn)鱽淼膮?shù)

    js通過location.search來獲取頁面?zhèn)鱽淼膮?shù)

    js獲取通過window.location.search來獲取頁面?zhèn)鱽淼膮?shù)，經(jīng)測試可用，大家可以學習下
    2014-09-09
  • element-ui組件輸入框之放大鏡搜索圖標問題

    element-ui組件輸入框之放大鏡搜索圖標問題

    這篇文章主要介紹了element-ui組件輸入框之放大鏡(搜索圖標)的相關(guān)知識,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-11-11
  • js神秘的電報密碼 哈弗曼編碼實現(xiàn)

    js神秘的電報密碼 哈弗曼編碼實現(xiàn)

    這篇文章主要介紹了js神秘的電報密碼 哈弗曼編碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-09-09
  • 淺析Js中的單引號與雙引號問題

    淺析Js中的單引號與雙引號問題

    本文是對Js中單引號與雙引號的使用進行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2013-11-11
  • Javascript實現(xiàn)數(shù)組中的元素上下移動

    Javascript實現(xiàn)數(shù)組中的元素上下移動

    這篇文章主要給大家介紹了Javascript實現(xiàn)數(shù)組中的元素上下移動的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
    2017-04-04
  • JavaScript訪問樣式表代碼

    JavaScript訪問樣式表代碼

    在web頁面中，我們經(jīng)常需要通過修改樣式（style）來達到更好的用戶體驗，需要的朋友可以參考下。
    2010-10-10
  • JavaScript獲取數(shù)據(jù)類型的方法詳解

    JavaScript獲取數(shù)據(jù)類型的方法詳解

    這篇文章給大家介紹了JavaScript獲取數(shù)據(jù)類型的方法,文中所介紹的所有知識點、代碼示例以及提供的解決方案,均不考慮?IE?瀏覽器,僅支持最新版本的?Chrome、Firefox、Edge?和?Safari?瀏覽器,需要的朋友可以參考下
    2024-02-02
  • cocos2dx骨骼動畫Armature源碼剖析(二)

    cocos2dx骨骼動畫Armature源碼剖析(二)

    本篇主要給大家介紹cocos2dx骨骼動畫Armature源碼剖析之flash中數(shù)據(jù)與xml中數(shù)據(jù)關(guān)系，需要的朋友一起來學習吧
    2015-09-09
  • 了解Javascript中函數(shù)作為對象的魅力

    了解Javascript中函數(shù)作為對象的魅力

    這篇文章主要介紹了了解Javascript中函數(shù)作為對象的魅力,javascript中函數(shù)可以有屬性，可以有方法， 可以享有所有對象所擁有的特性。并且最重要的，她還可以直接被調(diào)用,需要的朋友可以參考下
    2019-06-06

最新評論