Heim >Web-Frontend >HTML-Tutorial >Wie verankere ich ein Element an der richtigen Position in einem responsiven Bild?
Wie verankere ich ein Element an der richtigen Position in einem responsiven Bild?
- PHPznach vorne
- 2023-09-22 18:09:061108Durchsuche
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>
HTML ![Wie verankere ich ein Element an der richtigen Position in einem responsiven Bild?]()
Um ein Bild in eine Webseite oder Website einzufügen, verwenden Sie das HTML-Tag Grammatik
Das Folgende ist die Syntax des img-Tags
<img src="" alt="" style="max-width:90%" height="">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>
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>
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!