HTML-Schaltfläche zum Schließen

HTML-Schaltfläche „Schließen“: So fügen Sie einer Webseite eine elegante Schaltfläche „Schließen“ hinzu

Im Webdesign ist die Schaltfläche „Schließen“ ein häufiges Element, das Besuchern Komfort bietet und ihnen hilft, die Seite oder Anwendung einfach zu verlassen, wenn sie mit dem Surfen im Programm fertig sind . In diesem Artikel zeigen wir Ihnen, wie Sie mit HTML und CSS eine elegante Schaltfläche zum Schließen erstellen und diese über JavaScript mit dem Schließereignis einer Webseite verknüpfen.

Schritt eins: HTML-Element erstellen

Der erste Schritt beim Erstellen einer HTML-Schaltfläche zum Schließen besteht darin, ein HTML-Element zu erstellen. Wir verwenden ein Schaltflächenelement und fügen benutzerdefinierte Stile hinzu, damit es wie eine Schaltfläche zum Schließen aussieht. Wir können zum Beispiel einfachen HTML-Code verwenden:

<button class="close-btn">关闭</button>

Dadurch wird eine einfache Schaltfläche erstellt, bei der „Schließen“ der Text auf der Schaltfläche ist.

Schritt zwei: CSS-Stile hinzufügen

Als nächstes fügen wir benutzerdefinierte CSS-Stile hinzu, um die Schaltfläche zu verschönern. Wir können die CSS-Eigenschaft box-shadow verwenden, um ihm einen dreidimensionalen Effekt zu verleihen, und die Eigenschaft border-radius, um abgerundete Ecken zu erzeugen. Wir können den folgenden CSS-Code verwenden:

.close-btn {
  background-color: #444;
  border: none;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
}

Dadurch wird eine Schaltfläche zum Schließen mit 3 Pixel abgerundeten Ecken und einem Schatteneffekt erstellt.

Schritt drei: JavaScript-Ereignisse hinzufügen

Zuletzt müssen wir die Schaltfläche „Schließen“ mit dem Schließereignis der Seite verknüpfen. Wir können JavaScript verwenden, um diese Aufgabe auszuführen. Wenn der Benutzer auf die Schaltfläche „Schließen“ klickt, können wir die Funktion window.close() verwenden, um das aktuell geöffnete Fenster oder die aktuell geöffnete Registerkarte zu schließen. Zum Beispiel:

document.querySelector('.close-btn').addEventListener('click', function() {
  window.close();
});

Fügen Sie diesen Code einfach zur JavaScript-Datei der Webseite hinzu. Wenn der Benutzer nun auf die Schaltfläche „Schließen“ klickt, wird die Webseite automatisch geschlossen.

Zusammenfassung

In diesem Artikel haben wir mit HTML, CSS und JavaScript einen eleganten Schließen-Button erstellt. Diese Schaltfläche funktioniert auf einer Vielzahl unterschiedlicher Webseiten und Anwendungen, um Besuchern das einfache Verlassen der Seite zu erleichtern. Mit der Weiterentwicklung des Webdesigns werden Schaltflächen zum Schließen immer häufiger verwendet, und Designer können verschiedene Stile und Techniken verwenden, um ihre eigenen großartigen Schaltflächen zum Schließen zu erstellen.

Das obige ist der detaillierte Inhalt vonHTML-Schaltfläche zum Schließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!