감탄하게 만드는 CSS 효과_체험교류

작성자: eoe
1. Xunxunmimi
먼저 좋은 효과를 찾아야 합니다~ 복사하기 전에
예:http://www.cssplay.co.uk/
http://www.cssbeauty.com
자주 볼 수 있는

실수로 cssplay를 지나쳤습니다
http://www.cssplay.co today.uk/ menus/magnifier2.html
정말 재미있을 것 같아요

topstyle 열어서 한번 해보세요
재미있는 스타일은 다들 보시길 추천드려요~ 서둘러 CSS를 살펴보세요~ 말도 안 돼요

2. 스스로 하세요~ 음식과 의복을 충분히 준비하세요
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">

http://www.w3.org/1999/xhtml">

 
 

    
• http://www.rotui. net/lab/a/zoom/images/1.jpg"  width="128"  style="max-width:90%" alt="감탄하게 만드는 CSS 효과_체험교류" />

    
• http://www.rotui.net/lab/a/zoom/images/2.jpg"  width="128"  style="max-width:90%" alt="감탄하게 만드는 CSS 효과_체험교류" />

    
• http://www.rotui.net/lab/a/zoom/images/3.jpg"  width="128"  style="max-width:90%" alt=" 테스트" />

    
• http://www.rotui.net/lab/a/zoom/images/4.jpg"  width=" 128"  style="max-width:90%" alt="감탄하게 만드는 CSS 효과_체험교류" />

    
• http://www.rotui.net/lab/a/zoom/images/ 5.jpg"  width="128"  style="max-width:90%" alt="감탄하게 만드는 CSS 효과_체험교류" />

    
• http://www.rotui. net/lab/a/zoom/images/6.jpg"  width="128"  style="max-width:90%" alt="감탄하게 만드는 CSS 효과_체험교류" />

    
• http://www.rotui.net/lab/a/zoom/images/7.jpg"  width="128"  style="max-width:90%" alt="감탄하게 만드는 CSS 효과_체험교류" />

   提示：你可以先修改부분代码再运行

做完自我感觉还不错~ ~~

主要就是a:hover 위치: 절대, 여백 3个~
不过做后才发现~IE5的A失效了

3.取找补短
是时候看人的CSS的~`虽然同样也是IE5的A失效
#enlarge {padding:0;  margin:2em auto; 목록 스타일 유형:없음; 너비:240px; 높이:40px;}
#enlarge li {display:block; 부동:왼쪽; 너비:40px; 높이:40px; 위치:상대적;}
#enlarge li a {display:block; 너비:40px; 높이:40px; 배경:투명; 오버플로:숨김; 위치:상대적;}
#enlarge li a img {너비:100%; 높이:100%; 테두리:0;}
#enlarge li a:hover {위치:절대; 왼쪽:-20px; 상단:-20px; 너비:80px; 높이:80px; z-index:100;}
   提示:你可以先修改part分代码再运行

FT ~写得比人家多了一个定义~~
他的 方法是用 position:relative 配合left top tour是一样用负值来搞的~

4.举一反三
突然想到最近要写的擦车论坛~帖子下面的分页可以用这样来玩~
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3.org/1999/xhtml">

    
    

    
• 1

    
• 2

    
• 3

    
• 4

    
• 5

    
• 6

    
• 7

   提示：你可以先修改part代码再运行

好了更好玩~放弃IE了~
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3 .org/1999/xhtml">

    
    

    
• 1

    
• 2

    
• 3

    
• 4

    
• 5

    
• 6

    
• 7

   提示：你可以先修改part分代码再运行

效果不是很是很理想
试过把后면적A宽改成到刚好挡到左边的~可是看不到数字~不好看
也试过一边用원활한 방법
一边用:after加了图 Images 左边~可是~一边有数字一边没有~更不好看~~又不可能做N张有글자의 사진 ~扩展性不好 

也许这就是css本身所限
或许~用JS可以更简单的解决~````