Heim >Web-Frontend >CSS-Tutorial >Wie speichere ich mit CSS zwei Pfeilbilder (Upvote/Downvote) übereinander?
Wie speichere ich mit CSS zwei Pfeilbilder (Upvote/Downvote) übereinander?
- 王林nach vorne
- 2023-09-10 17:49:02849Durchsuche
Das Layout der Website ist ein wichtiger Bestandteil. Durch die Förderung des Benutzerengagements werden die visuellen Standards und die Gesamtqualität der Website verbessert. Obwohl CSS bei der Website-Entwicklung nicht erforderlich ist, ist das Design wichtig, da kein Benutzer mit einer langweiligen Website interagieren möchte.
Wenn Sie eine Website erstellen, denken Sie vielleicht, dass Fotos eine „nice to have“-Funktion sind, die keinem anderen Zweck dient, als hübsch auszusehen. Allerdings geht es bei Grafiken auf einer Website um mehr als nur die Erstellung eines niedlichen Bildes.
Bilder verleihen Ihren Webseiten ein schönes Aussehen. Die Verwendung von Fotos für SEO hat viele Vorteile. Mit CSS können wir diese Bilder formatieren und positionieren, um fantastische visuelle Effekte zu erzielen. In diesem Artikel besprechen wir, wie man Pfeilbilder (Vor- und Nachteile) mithilfe von CSS übereinander legt.
Sehen wir uns zunächst an, wie man Pfeilbilder in HTML-Seiten hinzufügt.
Pfeilbild hinzufügen
Um ein Pfeilbild hinzuzufügen, verwenden wir das Tag a1f02c36ba31691bcfe87b2722de723b
Beispiel
<!DOCTYPE html> <html> <head> <title> Adding arrow images </title> </head> <body> <img src= "https://cdn-icons-png.flaticon.com/512/16/16287.png" alt= "up arrow"> <img src= "https://cdn-icons-png.flaticon.com/512/608/608258.png" alt= "down arrow"> </body> </html>
Im obigen Beispiel zeigen wir zwei Pfeilbilder – Upvote und Downvote.
Beispiel
Im Beispiel unten haben wir zwei übereinander gestapelte Pfeilbilder (Upvote/Downvote)
<!DOCTYPE html>
<html>
<head>
<title> Arrow Images </title>
<style>
h1{
color: green;
text-decoration: underline;
}
img{
width: 150px;
margin-left: 20px;
height: 100px;
margin-bottom: 30px;
}
.demo{
float: left;
clear: left;
}
.demo img{
display: block;
float: none;
clear: both;
}
</style>
</head>
<body>
<h1> Up and Down arrow images </h1>
<div class= "demo">
<img src= "https://cdn-icons-png.flaticon.com/512/16/16287.png" alt= "up arrow">
<img src= "https://cdn-icons-png.flaticon.com/512/608/608258.png" alt= "down arrow">
</div>
</body>
</html>
Verwendete Attribute
In diesem Beispiel geben wir die Höhe und Breite des Bildes per CSS an. Um diese Bilder zusammenzustapeln, haben wir die folgenden CSS-Eigenschaften verwendet -
Eigenschaften anzeigen
Mit dieser CSS-Eigenschaft können Entwickler die Art des Anzeigeverhaltens eines Elements bestimmen. Einfach ausgedrückt ermöglicht es Ihnen, den Containertyp eines Elements zu bestimmen.
Grammatik
element{
display: value;
}
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: green;
text-decoration: underline;
}
.p1{
display: block;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p class= "p1">This is an example</p>
</div>
</body>
</html>
Schwimmende Immobilien
Mit dieser CSS-Eigenschaft können Entwickler angeben, auf welcher Seite ein Element schweben soll. Elemente mit position: absolute ignorieren Float-Attribute. Sein Wert kann links, rechts oder keine sein.
Grammatik
element{
float: value;
}
Beispiel
<!DOCTYPE html>
<html>
<head>
<title> Float </title>
<style>
h1{
color: green;
text-decoration: underline;
}
#img1{
float: left;
}
</style>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<body>
<div>
<p>Left or right side of the container. <i class= "far fa-clock" id= "img1"></i> </p>
</div>
</body>
</html>
Klare Attribute
Elemente neben einem schwebenden Element folgen der Strömung um es herum. Um dieses Problem zu lösen, gibt es in CSS die Eigenschaft clear. Seine Werte können None, Left, Right, Both, Initial und Inherited sein.
Grammatik
element{
clear: value;
}
Fazit
In diesem Artikel haben wir gelernt, wie man Pfeilbilder (Upvote und Downvote) in HTML-Dokumenten anzeigt. Darüber hinaus haben wir besprochen, wie man sie mithilfe der CSS-Eigenschaften display, float und clear zusammenstapelt.
Das obige ist der detaillierte Inhalt vonWie speichere ich mit CSS zwei Pfeilbilder (Upvote/Downvote) übereinander?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!