Maison >interface Web >tutoriel CSS >Code d'effet de commutation d'image CSS [sans js]_Échange d'expérience

Code d'effet de commutation d'image CSS [sans js]_Échange d'expérience

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal: 2016-05-16 12:04:352800parcourir

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>Le didacticiel d'exercices de changement d'image CSS pur provient du site Web</title>
        <style type="text/css"> 
            a{ 
                display:block; 
                border:1px solid #cccccc; 
                width:20px; 
                height:20px; 
                margin:1px; 
            } 
            dl{ 
                position:absolute; 
                width:240px; 
                height:170px; 
            } 
            dt{ 
                position:absolute; 
                right:1px; 
                top:25px; 
            } 
            dd{ 
                width:240px; 
                height:170px; 
                overflow:hidden; 
            } 
        </style>

<dl>
        <dt>
            <a href="#a"></a>1<a href="#b"></a>2<a href="#c"></a>3</dt>
<dd>
            <img  src="/static/imghwm/default1.png" data-src="/upload/20080926074249449.jpg" class="lazy" id="a" alt="Code d'effet de commutation d'image CSS [sans js]_Échange d'expérience" >
                <img  src="/static/imghwm/default1.png" data-src="/upload/20080926074251309.jpg" class="lazy" id="b" alt="Code d'effet de commutation d'image CSS [sans js]_Échange d'expérience" >
                <img  src="/static/imghwm/default1.png" data-src="/upload/20080926074251902.jpg" class="lazy" id="c" alt="Code d'effet de commutation d'image CSS [sans js]_Échange d'expérience" >
                </dd>
            </dl>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Conseils pour l'utilisation des balises table <tbody> dans l'échange HTML work_ExperienceArticle suivant：Conseils pour l'utilisation des balises table <tbody> dans l'échange HTML work_Experience

Articles Liés

Voir plus