Wie speichere ich mit CSS zwei Pfeilbilder (Upvote/Downvote) übereinander?-CSS-Tutorial-php.cn

Wie speichere ich mit CSS zwei Pfeilbilder (Upvote/Downvote) übereinander?

王林

Freigeben： 2023-09-10 17:49:02

nach vorne

815 Leute haben es durchsucht

如何使用 CSS 将两个箭头图像（upvote/downvote）存储在彼此之上？

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

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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!