Schließen Sie die Taste CSS
Beispiel 1:
Wir erstellen die HTML -Datei, um unsere Schließschaltfläche zu entwerfen. Die CSS -Datei wird erstellt, in der wir unsere Schließschaltfläche stylen werden. Wir verwenden den Visual Studio -Code für all diese. Wenn wir die HTML -Datei in Visual Studio -Code erstellen, schreiben wir den Code in dieser Datei. Wir müssen die HTML -Datei mit der Dateierweiterung von "speichern" speichern.HTML ”und die CSS -Datei mit der Erweiterung von“.CSS ”. Versuchen wir den angegebenen Code:
Der obige Code ist der HTML -Code. Hier ist der Typ dieses Dokuments, der als "HTML" erwähnt wird. Wir verwenden Tags in HTML, daher müssen wir Tags von „“ und „“ öffnen. Das Meta ist im Tag "" definiert und setzt als "charset = utf-8" fest. Durch die Verwendung können wir viele Zeichen verwenden. Für die Verknüpfung mit der CSS -Datei verwenden wir das "" hier und das "rel" beschreibt die Beziehung. Das „HREF“ dient zum Angeben des Namens der CSS -Datei, die wir mit dieser HTML -Datei anschließen müssen. Wir verknüpfen die „Buttonstyle.CSS ”-Datei mit" "" "".
Schließen Sie nun das "" und öffnen Sie das "" "Tag". Die "" -Klasse ist hier für die Trennung von Daten aus dem Web. Wir müssen die Schaltfläche in dieser HTML -Datei entwerfen. Die Art der Schaltfläche lautet "Taste" und die Klasse heißt "BTN-CLOSE". Dann öffnen Sie „“ und diese Spannweite wird mit dem Namen „Icon-Cross“ definiert. Die "& Zeit" zeigt das „X“ für die Schließschaltfläche an. Schließen "", "", "
und "" Tags.
CSS -Code:
In der CSS -Codierung geben wir unserer Schließschaltfläche Stil, die wir in der HTML -Datei erstellt haben. Erwähnen Sie zunächst die Button-Klasse, die "BTN-CLOSE" ist. Platzieren Sie einen Punkt vor diesem „BTN-CLOSE“ und öffnen Sie die Klammer. Setzen Sie "Margin", "Border" und "Polsterung" auf "0". Da der Rand für die Erstellung des Raums dient, dient der Rand für die Erstellung des Randes rund um den Knopf. Padding dient zum Erstellen von Räumen zwischen den Elementen, sodass wir alle als „0“ einstellen können.
Wir möchten „schwarz“ als Hintergrundfarbe anwenden, damit wir „Hintergrund: Schwarz“ hier platzieren. Die „Farbe“ beschreibt die Farbe der Schriftart oder des Kreuzes. Der „Grenzradius“ hat sich auf "20%" angepasst. Die Breite beschreibt die Breite der Schließknopf, die "40px" ist, und die Höhe ist auch "40px". Das "Display" ist "flex", sodass die flexible Länge auf das Display eingestellt wird. Die Eigenschaft „Flex-Flow“ wird hier auf die "Spalte Nowrap" angewendet. Wir müssen den Inhalt in das Zentrum rechtfertigen. Die Zeile „Justify-Content: Center“ rechtfertigt sie in der Mitte. Richten Sie auch die Gegenstände auf das Zentrum aus. Wählen Sie den "Cursor" als "Zeiger" aus. Der Übergang wird angewendet, da er die Geschwindigkeit steuert, wenn sich die CSS -Eigenschaft ändert. Es wird als "alle 150 ms" eingestellt.
Für die Ausgabe müssen wir den Browser verwenden. Wir können jeden Browser verwenden. Wir haben einen Browser installiert, indem wir "Strg+Shift+X" gedrückt und "im Browser öffnen" installiert wurden. Um die Ausgabe zu rendern.
Hier können Sie sehen, dass wir eine einfache Schließknopf erstellen. In den bevorstehenden Beispielen werden wir mehr als einen Schließknopf erstellen und diese entwerfen, indem wir verschiedene Farben und Formen in CSS verwenden.
Beispiel # 2:
In diesem Beispiel werden wir mehr als eine Taste der Schließung erstellen und verschiedene Farben auf diese Schließknöpfe anwenden. Erstellen Sie die Schließen der Schaltflächen in der HTML -Datei.
In dieser HTML -Datei erstellen wir mehrere Schließschaltflächen mit dem Tag "" ". Wir haben die Klasse der Schaltfläche als „Button“ benannt, um die erste Schaltfläche zu erstellen. Setzen Sie dann ein "X" -Symbol ein, das als eng "X" -Scharakter angezeigt wird. Wir haben die zweite Schaltflächenklasse "Taste Button2" benannt. Der Name der dritten Schaltflächenklasse lautet "Button Button3". Und die vierten und fünften Schaltflächen werden als "Taste Button4" bzw. "Button5" bezeichnet. Wir müssen das Schaltflächen -Tag in jeder Zeile schließen.
CSS -Code:
Platzieren Sie in der ersten Zeile einen Punkt und geben Sie dann den Namen der ersten Schaltfläche ein, die hier "Knopf" ist, und entwerfen Sie die Schaltfläche. Die Farbe des „Hintergrunds“ der ersten Schließknopf ist "#4CAF50", der Code der grünen Farbe ist, sodass die erste Schließknopf grün angezeigt wird. Die nächste "Farbe" dient zum Einstellen der Farbe des "X" auf "Weiß".
Jetzt ist „Padding“ vertikal „15px“ und es wird vertikal „32px“ angewendet. Das "Text-Align" ist auf das "Zentrum" eingestellt. Wir haben keinen Text in der Schaltfläche Schließen, daher setzen wir die Eigenschaft "Textdekoration" auf "Keine" fest. Das "Display" als "Inline-Block" dient zum Anzeigen eines Inline-Block-Containers. Beheben Sie die Schriftgröße auf "16px". Und vertikale Ränder sind „4px“ und der horizontale Rand ist „2px“. "Zeiger" wird als "Cursor" verwendet.
Jetzt möchten wir die Hintergrundfarben der restlichen Taste ändern, damit wir den verbleibenden Tasten nur Hintergrundfarbe hinzufügen. Schließen Sie die Halterung des ersten Knopfes. Setzen Sie einen Punkt und den Namen der zweiten Taste ein und stellen Sie die Hintergrundfarbe ein. Der Code der Hintergrundfarbe lautet "#008CBA", der als "blau" angezeigt wird. Ändern Sie die Farbe aller Schaltflächen mit derselben Eigenschaft und speichern Sie sie. Sehen Sie sich die Ausgabe an, alle engen Schaltflächen haben unterschiedliche Farben.
Beispiel # 3:
Wir verwenden unsere vorherige HTML -Datei, die wir in Beispiel 2 erstellt haben, und ändern einfach den CSS -Code. Wenden Sie dann hier in diesem Beispiel verschiedene Formen auf die Taste Schließen Sie hier an.
CSS -Code:
Wir haben die Hintergrundfarbe für die erste Taste als "grün" festgelegt. Die Polsterung ist „20px“ und dies gilt für alle vier Seiten. Die "Schriftgröße" wird in "16px" geändert. Der Rand ist vertikal und „2px“ horizontal und „2px“. Die neue Eigenschaft, die wir in den verbleibenden Tasten hinzugefügt haben. Dadurch wird die Ecken des Knopfes in eine runde Form verwandelt. Und wenden Sie auch verschiedene Farben auf alle Tasten an.
Der "Border-Radius" für die erste Taste wird als "2PX" eingestellt und die Farbe seines "Hintergrunds" ist "rot". Der zweite Knopf "Border-Radius" ist "4px" und die "Hintergrundfarbe" ist "blau". Die dritte, vierte und fünfte Schaltfläche „Border-Radius“ sind „8px“, „12px“ und „50%“. Auch die Farben des Hintergrunds für diese Tasten sind „gelb“, „lila“ bzw. „orange“. Überprüfen Sie die Ausgabe und sehen Sie, wie diese Schließtasten im Browser angezeigt werden.
In der obigen Ausgabe können Sie feststellen, dass die Ecken der Schließknöpfe abgerundet sind. Alle engen Tasten haben unterschiedliche Formen. Die letzte Schließknopf ist eine kreisförmige Schließknopf. Wir wenden alle diese Stylings in unserer CSS -Datei an.
Abschluss:
Diese Anleitung wird für Sie zur Verfügung gestellt, um zu wissen, wie Sie die Schaltfläche Schließen in HTML und CSS erstellen können. Hier haben wir verschiedene enge Tasten entworfen und gestylt. Wir haben auch den HTML- und CSS -Code und die Ausgabe aller Codes bereitgestellt. Sie haben die Verwendung von HTML und CSS in diesem Leitfaden gelernt und können die Schließschaltflächen erstellen, wenn Sie sie in Ihren Projekten oder Websites benötigen. Wir haben auch die Codes hier erklärt und drei verschiedene Beispiele für Sie gezeigt.