HTML und CSS sind zwei leistungsstarke Tools, mit denen Sie erstaunliche Webseiten erstellen können. Die Kenntnis dieser Programmiersprachen ermöglicht es Webentwicklern, eine Vielzahl von Design- und Funktionsideen zu implementieren. In diesem Artikel werden wir Ihnen sagen, wie Sie mit HTML und CSS ein Plus und ein Minus übereinander machen können.
Die Verwaltung von Größen, Stilen und Positionen von Elementen auf einer Webseite ist eine der Hauptaufgaben, die CSS löst. Damit können Sie das Erscheinungsbild von Seitenelementen leicht ändern, um verschiedene Effekte und visuelle Lösungen zu erstellen. Ein solcher Effekt besteht darin, ein Plus und ein Minus übereinander zu platzieren.
Um zu beginnen, fügen Sie ein Element hinzu in Ihren HTML-Code. Dies ist der Behälter, in den wir unser Plus und Minus legen werden. Verwenden Sie Elemente, um ein Plus und ein Minus zu erstellen mit dem entsprechenden Inhalt - plus (+) und Minus (-). Wenden Sie die CSS-Eigenschaft an, um sie übereinander anzuzeigen display: inline-block;. Verwenden Sie die Eigenschaften, um die Größe und den Einzug anzugeben font-size und padding.
Erstellen eines Containers
Um einen Container zu erstellen, in dem sich Plus und Minus übereinander befinden, können wir ein Tag in HTML verwenden und Stile mithilfe von CSS auf dieses Element anwenden.
In diesem Beispiel erstellen wir ein Element , die als Hauptbehälter dienen wird. Im Inneren haben wir zwei Elemente mit Klassen plus und minus, die ein Plus und ein Minus darstellen.
.container .plus, .minus .plus
In CSS wenden wir Stile auf ein Element an .container damit es zu einem Container mit vertikaler Ausrichtung der Elemente wird (mithilfe der Eigenschaft flex-direction), richten Sie die Elemente in der Mitte des Containers aus (mithilfe der Eigenschaft align-items).
Außerdem wenden wir Stile auf Klassen an .plus und .minus. Stellen Sie die Schriftgröße ein (font-size) und fügen Sie Einrückungen zwischen den Elementen hinzu (margin). Für das Plus fügen wir einen Einzug von unten hinzu (margin-bottom), um eine Lücke zwischen Plus und Minus zu schaffen.
Plus hinzufügen
Um ein Plus über ein Minus hinzuzufügen, können Sie CSS-Pseudoelemente verwenden.
1. Erstellen Sie einen Container für die Elemente, in dem sich das Plus und das Minus befinden.
- Erstellen Sie ein Element, und geben Sie ihm eine Klasse oder eine ID an.
2. Fügen Sie Stile für den Container hinzu. Stellen Sie die gewünschten Größen, Hintergrundfarben und anderen Optionen nach Ihren Wünschen ein.
3. Erstellen Sie Stile für Plus und Minus.
.container:before, .container:after .container:before .container:after4. Fügen Sie den Container in den HTML-Code ein.
Nachdem Sie diese Schritte ausgeführt haben, sollten Sie ein Plus über dem Minus sehen.
Minus hinzufügen
Um ein Minuszeichen über einem anderen Element hinzuzufügen, können wir das Minuszeichen "-" verwenden und es mit CSS formatieren.
Hier ist ein Beispiel für einfachen Code:
Hier verwenden wir das Tag und weisen ihm die Klasse "minus" zu. Innerhalb dieses Tags platzieren wir ein Minuszeichen "-", das über einem anderen Element angezeigt wird.
Jetzt können wir diese Klasse in CSS stylen. Hier ist ein Beispiel:
.minusHier verwenden wir die Position-Eigenschaft, um das Element nach oben zu verschieben (-10 Pixel). Wir stellen auch die Schriftgröße auf 20 Pixel ein.
Sie können mit anderen CSS-Eigenschaften spielen, um Größe, Farbe und Minusposition nach Belieben anzupassen.
Auf diese Weise können wir ein Minuszeichen über einem anderen Element hinzufügen, indem wir einfachen HTML- und CSS-Code verwenden.
Plus- und Minusausrichtung
Beim Erstellen von Plus- und Minuselementen ist es wichtig, auf deren Ausrichtung zu achten, damit sie logisch und ordentlich aussehen. Es gibt mehrere Möglichkeiten, CSS-Stile auszurichten, um das gewünschte Ergebnis zu erzielen.
Eine Möglichkeit besteht darin, die Eigenschaft zu verwenden display: inline;. Dies ermöglicht es Ihnen, die Plus- und Minuselemente in Kleinbuchstaben zu zeichnen und sie horizontal übereinander auszurichten. Sie können auch Einrückungen hinzufügen und die Farbe der Elemente ändern, um sie sichtbarer zu machen. Zum Beispiel:
.plus, .minus .minus
Eine andere Möglichkeit besteht darin, eine Tabelle zum Ausrichten von Elementen zu verwenden. Sie können eine Tabelle mit einer Zeile und zwei Zellen erstellen, in denen das Plus und das Minus angeordnet sind. Dadurch wird sichergestellt, dass die Elemente vertikal ausgerichtet sind. Zum Beispiel:
table td .plus, .minus .minus
Wenn Sie einen dieser Ansätze verwenden oder kombinieren, können Sie die gewünschte Plus- und Minusausrichtung in Ihrem Projekt erreichen.
Hinzufügen von Stilen
Nachdem wir die Grundstruktur für unseren Plus- und Minus-Block erstellt haben, können wir mit dem Hinzufügen von Stilen beginnen, um ihn attraktiver und moderner zu machen.
Lassen Sie uns zunächst eine Hintergrundfarbe für unseren Block festlegen, um ihn auf der Seite hervorzuheben. Dazu verwenden wir die Eigenschaft background-color und wir werden ihm die Farbe geben, die wir brauchen, zum Beispiel #3498db:
Fügen wir nun ein wenig Einzug hinzu, damit unser Block nicht mit anderen Elementen auf der Seite verschmilzt. Wir können die Eigenschaften nutzen padding und margin zu diesem Zweck:
Damit unser Text innerhalb des Blocks besser lesbar ist, geben wir ihm mithilfe der Eigenschaft eine weiße Schriftfarbe ein color:
Jetzt können Sie ein wenig Schönheit hinzufügen, indem Sie einige Textstile anwenden. Zum Beispiel können wir unseren Header mit einem Tag fett und mit einem Tag schräg machen :
Auf diese Weise haben wir unserem Plus- und Minus-Block Stile hinzugefügt, wodurch es attraktiver und leichter zu lesen ist. Hören Sie nicht damit auf und experimentieren Sie mit anderen Eigenschaften und Stilen, um ein einzigartiges Design zu erstellen, das zu Ihrem Projekt passt.
Größe und Farbe ändern
Sie können CSS-Eigenschaften verwenden, um die Größe und Farbe von Plus und Minus zu ändern.
Um die Größe zu ändern, können Sie die font-size - Eigenschaft verwenden. Um beispielsweise die Größe des Plus zu erhöhen, können Sie die folgende CSS-Regel hinzufügen:
Wo .plus ist die Klasse, die Sie dem Element hinzugefügt haben, das das Plus enthält.
Um die Größe des Minus zu ändern, können Sie ebenfalls eine Klasse verwenden .minus und definieren Sie eine andere Schriftgröße.
Um die Farbe zu ändern, können Sie die color - Eigenschaft verwenden. Um beispielsweise ein Plus rot zu machen, fügen Sie die folgende CSS-Regel hinzu:
Um die Minusfarbe zu ändern, verwenden Sie ebenfalls eine Klasse .minus und bestimmen Sie die gewünschte Farbe.
Fühlen Sie sich frei, mit verschiedenen Größen- und Farbwerten zu experimentieren, um den gewünschten Effekt zu erzielen.
