CSS-Effekte, die Menschen zum Bewundern bringen_Erfahrungsaustausch

Autor: eoe
1 >
http://www.cssbeauty.com
Man kann es oft sehen
Ich bin versehentlich an cssplay vorbeigekommenhttp://www.cssplay.co heute. uk/
menus/magnifier2.html
Es sieht nach viel Spaß aus

Öffnen Sie topstyle und probieren Sie es ausEs wird empfohlen, dass sich jeder interessante Stile ansieht~Nicht Beeilen Sie sich, sich das CSS anzuschauen. Es macht keinen Sinn.
2. Machen Sie es selbst ~ haben Sie genug Essen und Kleidung. strict.dtd">



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

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 
a
 
 ul# hovershow{

list-style-type: none;
margin: 50px; display: inline;
clear : Both;

    
• http://www.rotui. net/lab/a/zoom/images/1.jpg"  width="128"  style="max-width:90%" alt="CSS-Effekte, die Menschen zum Bewundern bringen_Erfahrungsaustausch" />

    
• http://www.rotui.net/lab/a/zoom/images/2.jpg"  width="128"  style="max-width:90%" alt="CSS-Effekte, die Menschen zum Bewundern bringen_Erfahrungsaustausch" />

    
• http://www.rotui.net/lab/a/zoom/images/3.jpg"  width="128"  style="max-width:90%" alt=" CSS-Effekte, die Menschen zum Bewundern bringen_Erfahrungsaustausch" />

    
• http://www.rotui.net/lab/a/zoom/images/4.jpg"  width=" 128"  style="max-width:90%" alt="CSS-Effekte, die Menschen zum Bewundern bringen_Erfahrungsaustausch" />

    
• http://www.rotui.net/lab/a/zoom/images/ 5.jpg"  width="128"  style="max-width:90%" alt="CSS-Effekte, die Menschen zum Bewundern bringen_Erfahrungsaustausch" />

    
• http://www.rotui. net/lab/a/zoom/images/6.jpg"  width="128"  style="max-width:90%" alt="CSS-Effekte, die Menschen zum Bewundern bringen_Erfahrungsaustausch" />

    
• http://www.rotui.net/lab/a/zoom/images/7.jpg"  width="128"  style="max-width:90%" alt="CSS-Effekte, die Menschen zum Bewundern bringen_Erfahrungsaustausch" />

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

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

主要就是a:hover position: absolute; margin 三个~
不过做后才发现~IE5的A失效了

3.取找补短
是时候看人家的CSS的~`虽然同样也是IE5的A失效
#enlarge {padding:0; margin:2em auto; Listenstiltyp:none; Breite:240px; height:40px;}
#enlarge li {display:block; float:left; Breite:40px; Höhe:40px; position:relative;}
#enlarge li a {display:block; Breite:40px; Höhe:40px; Hintergrund:transparent; Überlauf:versteckt; position:relative;}
#enlarge li a img {width:100%; Höhe: 100 %; border:0;}
#enlarge li a:hover {position:absolute; links:-20px; oben:-20px; Breite:80px; Höhe:80px; Z-Index:100;的方法是用position:relative 配合Links oben分页可以用这样来玩~

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



http://www.w3.org/1999/xhtml">
.
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "    
a
    
        ul#hovershow2{
            list-style-type: none;
1

•     2


•     3


•     4


•     5


•     6


•     7

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

好了更好玩~放弃IE了~
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


http://www.w3 .org/1999/xhtml">
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
    
a    

        ul#hovershow2{            Rand: 50px;
            Breite: 200px;
2

    

3

•     
4

•     
5

•     
6

•     
7



• 也试过一边用原来的方法一边用:after加了图片在左边~可是~一边有数字一边没有~更不好看~~又不可能做N张有数字的图片~扩展性不好 
也许这就是css本身所限
或许~用JS可以更简单的解决~````