Wie verankere ich ein Element an der richtigen Position in einem responsiven Bild?-HTML-Tutorial-php.cn

Wie verankere ich ein Element an der richtigen Position in einem responsiven Bild?

PHPz

Freigeben： 2023-09-22 18:09:06

nach vorne

975 Leute haben es durchsucht

Wie verankere ich ein Element an der richtigen Position in einem responsiven Bild?

Das Platzieren von Ankern an der richtigen Stelle auf responsiven Bildern ist heutzutage immer wichtiger geworden. Da wir in unserem täglichen Leben auf viele Werbeanzeigen stoßen, wird es für Benutzer schwieriger, die Webseite zu verstehen, wenn der Anker nicht richtig unter dem responsiven Bild platziert wird.

Wir verwenden CSS und HTML, um Elemente an der richtigen Position im responsiven Bild zu verankern. Bevor wir zum besseren Verständnis in diesen Artikel eintauchen, werfen wir einen kurzen Blick auf Anker und Bild-Tags in HTML.

Anker-Tags in HTML

Über sein href-Attribut generiert das HTML-Element einen Hyperlink zu einer Webseite, Datei, E-Mail-Adresse, einem Ort auf derselben Seite oder einem anderen Inhalt, der über eine URL angesprochen werden kann.

Jedes sollte einen Text enthalten, der das endgültige Ziel des Links beschreibt. Wenn der Fokus auf dem -Element liegt, wird durch Drücken der Eingabetaste das href-Attribut aktiviert, sofern es vorhanden ist.

Grammatik

Das Folgende ist die Syntax des Ankertags in HTML

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

Nach dem Login kopieren

HTML

Um ein Bild in eine Webseite oder Website einzufügen, verwenden Sie das HTML-Tag Wie verankere ich ein Element an der richtigen Position in einem responsiven Bild?

Auf modernen Websites werden Bilder mithilfe des Wie verankere ich ein Element an der richtigen Position in einem responsiven Bild?

-Elements mit Webseiten verknüpft, das den Platz für das Bild enthält. Dadurch wird verhindert, dass Websites Bilder direkt zu Webseiten hinzufügen.

Grammatik

Das Folgende ist die Syntax des img-Tags

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

Nach dem Login kopieren

Um mehr über das Verankern von Elementen an der richtigen Stelle in einem responsiven Bild zu erfahren, sehen Sie sich die folgenden Beispiele an

Beispiel

Nachfolgend verwenden wir CSS, um das Element an der richtigen Position im responsiven Bild zu verankern.

<!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="Wie verankere ich ein Element an der richtigen Position in einem responsiven Bild?" >
            <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="Wie verankere ich ein Element an der richtigen Position in einem responsiven Bild?" >
            <a href="https://www.tutorialspoint.com/html/index.htm">HTML Tutorial</a>
         </div>
      </div>
   </body>
</html>

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die das auf die Webseite hochgeladene Bild und den entsprechenden Hyperlink am unteren Rand des Antwortbilds enthält.

Beispiel

Betrachten Sie das folgende Beispiel, in dem wir den Ankerpunkt eines Elements an der richtigen Stelle auf einem responsiven Bild platzieren.

<!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="Wie verankere ich ein Element an der richtigen Position in einem responsiven Bild?" >
         </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>

Nach dem Login kopieren

Wenn Sie das obige Skript ausführen, öffnet sich ein Ausgabefenster mit dem auf die Webseite hochgeladenen Bild und den an beiden Seiten des Bildes angehängten Hyperlinks, wobei in den Hyperlinks CSS angewendet wird.

Das obige ist der detaillierte Inhalt vonWie verankere ich ein Element an der richtigen Position in einem responsiven Bild?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!