css客齊集社區(qū)頭像顯示效果
更新時(shí)間：2008年06月07日 22:44:57 作者：
這個(gè)例子,首先是把SPAN里的內(nèi)容用display:none;干掉,就是不顯示; 然后在A:HOVER時(shí),再把SPAN里的內(nèi)容display:block; 就是顯示出來;同時(shí)定義一下SPAN的位置;
其它代碼很簡單,但有人說看不太懂;我就簡單說一下;
代碼說明:
這段中,定義了一個(gè)大的塊DIV; 并給了他一個(gè)ID; 下邊分別有LI,A,SPAN,IMG四個(gè)標(biāo)簽; 這樣我們就可以在CSS中設(shè)置這四個(gè)標(biāo)簽來實(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;}
以下這行定義了列表橫向顯示,每個(gè)LI占14%的寬度;14%是由100%除以7塊等于的; 而且LI里邊的內(nèi)容要居中顯示; margin:0 auto; 這句是為了實(shí)現(xiàn)FIREFOX居中顯示的;
#zishu_test li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none }
以下這行統(tǒng)一定義了一下A標(biāo)簽;邊框,寬度,背景等; 其實(shí)這時(shí)候已經(jīng)有邊框了,只不過和背景色一樣;你看不到; 如果你把網(wǎng)頁的背景色改一下; 你就會(huì)看到效果了;
#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標(biāo)簽里的內(nèi)容;
#zishu_test li span{display:none;}
以下這行就是定義鼠標(biāo)移上去的效果; 主要是顯示SPAN里的內(nèi)容; 和定義SPAN內(nèi)容的位置; 注意;這樣去定義SPAN的位置會(huì)在不同的瀏覽器中有不同的效果的;所以才有了后邊那兩行代碼;另外注意的是;這里只定義了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;我也不知道怎么樣;因?yàn)槲覍?shí)在沒有想到更好的辦法;
* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/
最后這行就簡單了;只是改變邊框的色,給人的感覺就是鼠標(biāo)移上去有變化了;
#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í)行]
這段中,定義了一個(gè)大的塊DIV; 并給了他一個(gè)ID; 下邊分別有LI,A,SPAN,IMG四個(gè)標(biāo)簽; 這樣我們就可以在CSS中設(shè)置這四個(gè)標(biāo)簽來實(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;}
以下這行定義了列表橫向顯示,每個(gè)LI占14%的寬度;14%是由100%除以7塊等于的; 而且LI里邊的內(nèi)容要居中顯示; margin:0 auto; 這句是為了實(shí)現(xiàn)FIREFOX居中顯示的;
#zishu_test li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none }
以下這行統(tǒng)一定義了一下A標(biāo)簽;邊框,寬度,背景等; 其實(shí)這時(shí)候已經(jīng)有邊框了,只不過和背景色一樣;你看不到; 如果你把網(wǎng)頁的背景色改一下; 你就會(huì)看到效果了;
#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標(biāo)簽里的內(nèi)容;
#zishu_test li span{display:none;}
以下這行就是定義鼠標(biāo)移上去的效果; 主要是顯示SPAN里的內(nèi)容; 和定義SPAN內(nèi)容的位置; 注意;這樣去定義SPAN的位置會(huì)在不同的瀏覽器中有不同的效果的;所以才有了后邊那兩行代碼;另外注意的是;這里只定義了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;我也不知道怎么樣;因?yàn)槲覍?shí)在沒有想到更好的辦法;
* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/
最后這行就簡單了;只是改變邊框的色,給人的感覺就是鼠標(biāo)移上去有變化了;
#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)文章
js onmousewheel事件多次觸發(fā)問題解決方法
做一個(gè)首屏和第二屏之間滾動(dòng)鼠標(biāo)滾輪就可以整平切換的效果，遇到了很多問題，下面是問題解決方法2014-10-10
基于原生CSS+JS實(shí)現(xiàn)一個(gè)標(biāo)簽輸入框
在各種框架大行其道的氛圍下，有些原生的屬性和方法可能都不太關(guān)注了，這也不失為是一種損失。本文就將利用原生CSS+JS實(shí)現(xiàn)一個(gè)簡單的標(biāo)簽輸入框，感興趣的可以了解一下2022-04-04
這篇文章主要給大家介紹了關(guān)于WPS的JS宏操作方法總結(jié)的相關(guān)資料,WPS是一款常用的辦公軟件,其中的JS宏功能可以幫助用戶實(shí)現(xiàn)自動(dòng)化操作和批量處理等需求,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了小程序開發(fā)之模態(tài)框組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
html判斷當(dāng)前頁面是否在iframe中的實(shí)例
下面小編就為大家?guī)硪黄猦tml判斷當(dāng)前頁面是否在iframe中的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JScript的條件編譯...2007-05-05
javascript輕量級庫createjs使用Easel實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了javascript輕量級庫createjs使用Easel實(shí)現(xiàn)拖拽效果的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)輪播圖案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
兩個(gè)函數(shù)相互調(diào)用如何防止死循環(huán)
這篇文章主要介紹了兩個(gè)函數(shù)相互調(diào)用如何防止死循環(huán)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)公告上線滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01