CSS Keqiji 커뮤니티 아바타 표시 effect_javascript 기술

코드 설명:

이 단락에서는 대규모 블록 DIV가 정의되고 아래에 LI, A, SPAN 및 IMG라는 4개의 태그가 제공됩니다. CSS 이 네 가지 태그는

>http://www.zishu.cn /blogview.asp?logID=553">64d / 47회 조회수 pixu
.....
다음 단락에서는 웹페이지의 기본 콘텐츠와 링크 스타일을 정의합니다.

body{font -size:12px:font- family:Verdana, "宋体", text-align:center; color:#666; padding:0; 목록 -style:none; a:visited{color:#000099; text-꾸밈: underline;}
a:hover,a:active{color:#000;text-꾸밈: 없음 ;}
다음 줄은 가로 표시를 정의합니다. 각 LI는 너비의 14%를 차지하며 100%를 7개 블록으로 나눈 것과 같습니다. 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 width:100px; height:110px; :block; padding-top:10px; margin:auto}
다음은 이미지 가장자리에 공백 효과와 테두리 효과를 추가하여 이미지를 정의합니다. width:75px; height:75px ; display:block; text-align:center; background:#FFF; padding:3px; border:1px solid #D8A18B;}
다음 줄은 내용을 숨기기 위한 것입니다.

#zishu_test lispan{display:none;}
다음 줄은 주로 SPAN에서 콘텐츠를 표시하기 위해 마우스를 움직이는 효과를 정의합니다. SPAN 콘텐츠의 위치, 이러한 방식으로 SPAN의 위치를 ​​정의하면 브라우저마다 효과가 달라집니다. 따라서 여기에는 SPAN만 정의되어 있습니다.
#zishu_test li a:hoverspan{ margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; :#FFF; position:absolute; }
다음 두 줄은 다른 브라우저에서 볼 수 있는 효과가 동일하도록 작성되었습니다. 주로 IE6과 IE7에 대해 작성되었습니다. 시도해 보고 생각해보면 알게 될 것입니다. ; 저는 이 방법을 사용하여 IE6과 IE7을 변경합니다. 더 나은 방법이 생각나지 않기 때문입니다. zishu_test li a:hover 범위 {margin-left:- 8px } /* IE6 */
* html #zishu_test li a:hover 범위 {margin-left:-8px }/* IE7*/
마지막 줄은 간단합니다. 테두리 색상만 변경하면 마우스가 위로 움직일 때 변화가 있는 것처럼 보입니다.

#zishu_test li a:hover{ border-right:1px solid #D8A18B; 테두리 하단:1px 솔리드 #D8A18B; 너비:100px; 높이:110px ; 배경:#F5F5F5;디스플레이:블록 상단:10px;}







zishu.cn 테스트

body{ 글꼴 크기:12px; 줄 높이:Verdana, "宋体", Arial,Sans; 배경:#FFF; 여백: 0; 목록 스타일:없음 } a:link,a:visited{color:#000099; 텍스트 장식: 밑줄;} a:hover,a:active{color:#000;text-장식: 없음;} #zishu_test li{ float:left; 너비:14%; text-align:center; 여백:0 목록 스타일:없음 } #zishu_test li a{border-right:1px solid #fff;border-bottom:1px width:100px; height:110px; 배경:#fff;padding-top:10px; #zishu_test li img{ 너비:75px; 높이:75px; 텍스트-정렬:중앙; 여백:#FFF; 테두리:1px #zishu_test 리 스팬{display:none;}#zishu_test li a:hover 범위{ margin-top:-10px;display:block; 테두리 하단:1px 솔리드 #666; 테두리 오른쪽:1px 솔리드 #666; 배경:#FA9000; 너비:100px; 색상:#FFF; 위치:절대; } * html #zishu_test li a:hover 범위 {margin-left:-8px; } /* IE6 */ * html #zishu_test li a:hover 범위 {margin-left:-8px; }/* IE7*/ #zishu_test li a:hover{ border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; 너비:100px; 높이:110px; 배경:#F5F5F5;디스플레이:블록; 패딩 상단:10px;} <div id="zishu_test"> <ul> <li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>64d / 47히트</span><img src="/static/imghwm/default1.png" data-src="/articleimg/2008/04/5611/10000009.jpg" class="lazy" alt="CSS Keqiji 커뮤니티 아바타 표시 effect_javascript 기술" >pixu</a></li> <li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>24일 / 35회 조회</span><img src="/static/imghwm/default1.png" data-src="/articleimg/2008/04/5611/294343.jpg" class="lazy" alt="CSS Keqiji 커뮤니티 아바타 표시 effect_javascript 기술" >秀才</a></li> <li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>66일 / 87회</span><img src="/static/imghwm/default1.png" data-src="/articleimg/2008/04/5611/10000010.jpg" class="lazy" alt="CSS Keqiji 커뮤니티 아바타 표시 effect_javascript 기술" >透露</a></li> <li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>40일 / 34히트</span><img src="/static/imghwm/default1.png" data-src="/articleimg/2008/04/5611/11709126.jpg" class="lazy" alt="CSS Keqiji 커뮤니티 아바타 표시 effect_javascript 기술" >LIVID</a></li> <li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>47일 / 56히트</span><img src="/static/imghwm/default1.png" data-src="/articleimg/2008/04/5611/10000002.jpg" class="lazy" alt="CSS Keqiji 커뮤니티 아바타 표시 effect_javascript 기술" >老孟</a></li> <li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>42일 / 36회</span><img src="/static/imghwm/default1.png" data-src="/articleimg/2008/04/5611/11695932.jpg" class="lazy" alt="CSS Keqiji 커뮤니티 아바타 표시 effect_javascript 기술" >小玉</a></li> <li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>63일 / 조회수 67</span><img src="/static/imghwm/default1.png" data-src="/articleimg/2008/04/5611/10000025.jpg" class="lazy" alt="CSS Keqiji 커뮤니티 아바타 표시 effect_javascript 기술" >pixu</a></li> </ul> </div> <p style="clear:both;">源贴地址为<a href="http://www.zishu.cn/blogview.asp?logID=553" target="_blank">http://www.zishu.cn/blogview.asp?logID=553</a></p>