css客齊集社區頭像顯示效果

2019-11-21 01:43:48

字體：大中小

來源：轉載

供稿：網友

代碼說明:

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

<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>
...........
以下這段定義了網頁的基本內容和鏈接的樣式;

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里邊的內容要居中顯示; margin:0 auto; 這句是為了實現FIREFOX居中顯示的;

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

#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標簽里的內容;

#zishu_test li span{display:none;}
以下這行就是定義鼠標移上去的效果; 主要是顯示SPAN里的內容; 和定義SPAN內容的位置; 注意;這樣去定義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;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>zishu.cn test</title> <style> 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;} #zishu_test li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none } #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;} #zishu_test li span{display:none;} #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; }  * 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;}  </style> </head> <body> <div   class="iwvjtn8m0"   id="zishu_test">   <ul>     <li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>64d / 47 hits</span><img src="https://www.jb51.net/articleimg/2008/04/5611/10000009.jpg">pixu</a></li>     <li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>24d / 35 hits</span><img src="https://www.jb51.net/articleimg/2008/04/5611/294343.jpg">秀才</a></li>     <li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>66d / 87 hits</span><img src="https://www.jb51.net/articleimg/2008/04/5611/10000010.jpg">透露</a></li>     <li><a ><span>40d / 34 hits</span><img src="https://www.jb51.net/articleimg/2008/04/5611/11709126.jpg">LIVID</a></li>     <li><a ><span>47d / 56 hits</span><img src="https://www.jb51.net/articleimg/2008/04/5611/10000002.jpg">老孟</a></li>     <li><a ><span>42d / 36hits</span><img src="https://www.jb51.net/articleimg/2008/04/5611/11695932.jpg">小玉</a></li>     <li><a ><span>63d / 67 hits</span><img src="https://www.jb51.net/articleimg/2008/04/5611/10000025.jpg">pixu</a></li>   </ul> </div>  <p style="clear:both;">源貼地址為<a  target="_blank">http://www.zishu.cn/blogview.asp?logID=553</a></p> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript鍵盤事件全面控制腳本代碼

下一篇：javascript動畫效果打開/關閉層