Effets CSS qui font admirer les gens_Experience Exchange

Auteur : eoe
1. Xunxunmimi
Vous devez d'abord trouver un bon effet~ avant de pouvoir le copier
commehttp://www.cssplay.co.uk/
http://www.cssbeauty.com
On le voit souvent

Je suis passé accidentellement par cssplay
http://www.cssplay.co aujourd'hui/ menus/magnifier2.html
Ça a l'air très amusant

Ouvrez topstyle et essayez-le
Il est recommandé à tout le monde de voir des styles intéressants~Ne le faites pas. se précipiter pour regarder son CSS~ Cela n'a aucun sens

2. Faites-le vous-même ~ ayez assez de nourriture et de vêtements
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="Effets CSS qui font admirer les gens_Experience Exchange" />

    
• http://www.rotui.net/lab/a/zoom/images/2.jpg"  width="128"  style="max-width:90%" alt="Effets CSS qui font admirer les gens_Experience Exchange" />

    
• http://www.rotui.net/lab/a/zoom/images/3.jpg"  width="128"  style="max-width:90%" alt=" Effets CSS qui font admirer les gens_Experience Exchange" />

    
• http://www.rotui.net/lab/a/zoom/images/4.jpg"  width=" 128"  style="max-width:90%" alt="Effets CSS qui font admirer les gens_Experience Exchange" />

    
• http://www.rotui.net/lab/a/zoom/images/ 5.jpg"  width="128"  style="max-width:90%" alt="Effets CSS qui font admirer les gens_Experience Exchange" />

    
• http://www.rotui. net/lab/a/zoom/images/6.jpg"  width="128"  style="max-width:90%" alt="Effets CSS qui font admirer les gens_Experience Exchange" />

    
• http://www.rotui.net/lab/a/zoom/images/7.jpg"  width="128"  style="max-width:90%" alt="Effets CSS qui font admirer les gens_Experience Exchange" />

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

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

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

3.取找补短
是时候看人家的CSS的~`虽然同样也是IE5的A失效
#enlarge {padding:0;  margin:2em auto; type de style de liste : aucun ; largeur : 240 px ; height:40px;}
#enlarge li {display:block; flotteur : gauche ; largeur : 40 px ; hauteur : 40 px ; position:relative;}
#enlarge li a {display:block; largeur : 40 px ; hauteur : 40 px ; arrière-plan : transparent ; débordement : caché ; position:relative;}
#enlarge li a img {width:100%; hauteur : 100 % ; border:0;}
#enlarge li a:hover {position:absolute; gauche : -20px ; haut : -20 px ; largeur : 80 px ; hauteur : 80 px ; z-index:100;}
   提示：你可以先修改部分代码再运行

FT ~写得比人家多了一个定义~~
他的方法是用position:relative 配合à gauche en haut分页可以用这样来玩~

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

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

    
a
    
        ul#hovershow2{
2

    

3

•     
4

•     
5

•     
6

•     
7



•    提示：你可以先修改部分代码再运行好了更好玩~ IE了~

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

    
a
    

        ul#hovershow2{
            list-style- type : aucun;
            marge :  50px;
             largeur : 200px;nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "            float : gauche ;             affichage : en ligne ;
            clear : les deux ;
        }        ul#hovershow2 li {            float : gauche ;
             affichage : en ligne ;            largeur : 20 px ;
            hauteur :  20 px ;
        }
        ul#hovershow2 li a {
            text-decoration: aucun;
            affichage : block;
             width: 20px;
             hauteur : 20 px ;
            bordure : 1 px rouge solide ;
> 🎜>        ul#hovershow2 li a : survol{
        position : absolue;
        largeur: 40px;
        hauteur :  40px;
        hauteur de ligne : 40px;
        taille de police : 32px;
        index-z : 100 ;
        marge : -10px 0 0 -10px ;
        }
ul#hovershow2 li:hover + li a{
        position : absolue ;
        largeur : 30 px ;
        hauteur : 30 px ;
        hauteur de ligne : 30px;
        taille de police : 24px;
       z-index: 99;
        marge : -5px 0 0 -5px;
        }

    







    

1

•     2


•     3


•     4


•     5


•     6


•     7

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

效果不是很是很理想试过把后面的A宽改成到刚好挡到左边的~可是看不到数字~不好看
也试过一边用原来的方法一边用:after加了图片在左边~可是~一边有数字一边没有~更不好看~~又不可能做N张有数字的图photo ~扩展性不好 

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