Comment ancrer un élément à la bonne position dans une image responsive ?-tutoriel HTML-php.cn

Comment ancrer un élément à la bonne position dans une image responsive ?

PHPz

Libérer： 2023-09-22 18:09:06

avant

1057 Les gens l'ont consulté

Comment ancrer un élément à la bonne position dans une image responsive ?

Placer les ancres au bon endroit sur les images responsives est devenu plus important de nos jours. Parce que nous rencontrons de nombreuses publicités dans notre vie quotidienne, si l'ancre n'est pas placée correctement sous l'image responsive, il sera plus difficile pour les utilisateurs de comprendre la page Web.

Nous utilisons CSS et HTML pour ancrer les éléments à la bonne position sur l'image réactive. Avant de plonger dans cet article pour mieux comprendre, jetons un coup d'œil rapide aux ancres et aux balises d'image en HTML.

Balises d'ancrage en HTML

Grâce à son attribut href, l'élément HTML (ou élément d'ancrage) génère un lien hypertexte vers une page Web, un fichier, une adresse e-mail, un emplacement sur la même page ou tout autre contenu pouvant être adressé par une URL.

Chaque doit contenir un texte décrivant la destination finale du lien. Lorsque le focus est sur l'élément , appuyer sur Entrée active l'attribut href s'il existe.

Grammaire

Voici la syntaxe de la balise d'ancrage en HTML

<a href = "link"> Link Name </a>

Copier après la connexion

Balise HTML

Pour insérer une image dans une page Web ou un site Web, utilisez la balise HTML Comment ancrer un élément à la bonne position dans une image responsive ?

Comment ancrer un élément à la bonne position dans une image responsive ?

Dans les sites Web modernes, les images sont liées aux pages Web à l'aide de l'élément Comment ancrer un élément à la bonne position dans une image responsive ?

, qui contient l'espace réservé à l'image. Cela empêche les sites Web d'ajouter des images directement aux pages Web.

Grammaire

Voici la syntaxe de la balise img

<img src="" alt=""    style="max-width:90%" height="">

Copier après la connexion

Pour en savoir plus sur l'ancrage des éléments au bon emplacement sur une image responsive, consultez les exemples ci-dessous

Exemple

Ci-dessous, nous utilisons CSS pour ancrer l'élément à la bonne position sur l'image responsive.

<!DOCTYPE html>
<html>
   <body>
      <style>
         .tutorial {
            display: flex;
            width: 60%;
            margin: auto;
         }
         .type {
            text-align: center;
         }
         .tutorial img {
            max-width: 90%;
            display: block;
         }
      </style>
      <div class="tutorial">
         <div class="type">
            <img  src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" alt="Comment ancrer un élément à la bonne position dans une image responsive ?" >
            <a href="https://www.tutorialspoint.com/java/index.htm">Java Tutorial</a>
         </div>
         <div class="type">
            <img  src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" alt="Comment ancrer un élément à la bonne position dans une image responsive ?" >
            <a href="https://www.tutorialspoint.com/html/index.htm">HTML Tutorial</a>
         </div>
      </div>
   </body>
</html>

Copier après la connexion

Lorsque le script est exécuté, il générera une sortie contenant l'image téléchargée sur la page Web et le lien hypertexte correspondant ajouté au bas de l'image de réponse.

Exemple

Considérons l'exemple suivant où nous plaçons le point d'ancrage d'un élément au bon emplacement sur une image responsive.

<!DOCTYPE html>
<html>
   <body>
      <style>
         #tutorial{
            float:left;
            position: relative; 
         }
         #tutorial img {
            max-width: 100%;
            display: inline-block;
         }
         a.link1{
            height:15%;
            width:15%;
            position: absolute;
            top:60%; left:10%;
            display:block;
            background:#00FF00 ;
         }
         a.link2{
            height:15%;
            width:15%;
            position: absolute;
            top:50%;
            left:76%;
            display: block;
            background:#FF0000;
         }
      </style>
      <div id="tutorial">
         <div>
            <img  src="https://www.math-english.com/media/dices/two-dices2.png" alt="Comment ancrer un élément à la bonne position dans une image responsive ?" >
         </div>
         <a href="https://www.tutorialspoint.com/html/index.htm" class="link1">HTML</a>
         <a href="https://www.tutorialspoint.com/java/index.htm" class="link2">JAVA</a>
      </div>
   </body>
</html>

Copier après la connexion

Lorsque vous exécutez le script ci-dessus, une fenêtre de sortie apparaîtra montrant l'image téléchargée sur la page Web et les hyperliens attachés des deux côtés de l'image, avec CSS appliqué dans les hyperliens.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!