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.
Um ein Pfeilbild hinzuzufügen, verwenden wir das Tag
<!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.
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>
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 -
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.
element{ display: value; }
<!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>
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.
element{ float: value; }
<!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>
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.
element{ clear: value; }
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!