Schließen-Schaltfläche HTML

Die Schaltfläche „Schließen“ in HTML wird zum Schließen eines Fensters oder Popup-Fensters in einer Webseite oder Anwendung verwendet. Bei der Schaltfläche „Schließen“ handelt es sich im Allgemeinen um ein Symbol oder einen Text, und der Benutzer kann das aktuelle Fenster oder Popup-Fenster schließen, indem er auf die Schaltfläche klickt. In diesem Artikel wird die Schaltfläche „Schließen“ in HTML vorgestellt und erläutert, wie verschiedene Arten von Schaltflächen zum Schließen implementiert werden.

1. Grundlegende Verwendung der Schließen-Schaltfläche

In HTML ist die einfachste Implementierungsmethode ein Schaltflächenelement:

<button onclick="window.close()">关闭</button>

Die Implementierungsmethode dieser Schließen-Schaltfläche ist sehr einfach Wenn Sie auf die Schaltfläche klicken, wird sie aufgerufen. Die JavaScript-Funktion window.close() schließt das aktuelle Fenster. window.close() 函数关闭当前窗口。

二、关闭按钮的图标样式

除了文字按钮，我们还可以使用图片或图标来实现关闭按钮，以增添视觉效果。常用的关闭图标有 X、× 等，可以使用字体图标或自定义图片来实现。下面是两种实现方式：

1. 使用字体图标

字体图标可以通过 CSS 来指定颜色、大小等样式，更加灵活方便。而且，字体图标可以适配不同分辨率的屏幕，更加清晰流畅。下面是使用 Font Awesome 字体图标的关闭按钮示例：

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<button onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

这里我们使用 link 元素导入 Font Awesome 的 CSS 文件，然后在按钮里嵌套一个 i 元素，设置其 class 属性为 fas fa-times，表示使用 times 图标。用户点击关闭按钮时，执行 JavaScript 的 window.close()。

2. 使用自定义图片

使用自定义图片实现关闭按钮，需要先准备一张图片，在网页上显示这张图片的时间并不会太耗时。下面这个示例使用 PNG 格式的关闭图标：

<button onclick="window.close()">
  <img src="close.png" alt="关闭">
</button>

这里我们在按钮里嵌套一个 img 元素，使用 src 属性指定图片的 URL，alt 属性为图像的描述，用户点击按钮时，执行 JavaScript 的 window.close()。

三、关闭按钮的样式设计

外观良好的按钮往往可以提高用户体验，现在我们来对关闭按钮进行样式设计。

1. 线框按钮

线框按钮常用于轻量级或扁平化风格的设计，可通过 CSS 样式设置按钮的边框、颜色、字体等。

下面是一个使用线框样式的关闭按钮实现：

<button class="close-button" onclick="window.close()">关闭</button>

我们添加了名为 close-button 的类名，用于设置按钮的样式。下面是对应的 CSS 代码：

.close-button {
  border: 1px solid #999;
  color: #999;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  background-color: transparent;
  transition: all .3s ease-in-out;
}

.close-button:hover {
  background-color: #999;
  color: #fff;
}

上述代码实现了如下的按钮样式：

2. 按钮图标

除了使用文字描述，按钮还可以通过图标来表达功能。下面我们将结合之前介绍的字体图标和自定义图片来实现带图标的关闭按钮。

<button class="close-icon-button" onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

注意到这里我们添加了新的类名 close-icon-button，同时设置按钮内嵌元素 i 的类名 fas fa-times，表示使用 times 图标。

下面是对应的样式代码：

.close-icon-button {
  border: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover {
  transform: rotate(45deg);
}

.close-icon-button i {
  color: #999;
  font-size: 14px;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover i {
  color: #fff;
}

上述代码实现了如下的按钮样式：

四、不同类型应用场景的关闭按钮

关闭按钮种类繁多，选择不同类型的关闭按钮应该根据实际应用的需求。本节将介绍几种常见需求下的关闭按钮。

1. 模态框上的关闭按钮

模态框是一种弹出式窗口，在网页中被广泛应用。同时，模态框需要一个关闭按钮用于关闭弹出窗口。

一般情况下，模态框的关闭按钮应该放置在模态框的右上角，具体实现如下：

<div class="modal">
  <button class="close-icon-button" onclick="closeModal()">
    <i class="fas fa-times"></i>
  </button>
  <!-- 模态框内容 -->
</div>

注意到这里，我们添加了名为 closeModal()

2. Symbolstil der Schaltfläche „Schließen“

Zusätzlich zu Textschaltflächen können wir auch Bilder oder Symbole verwenden, um Schaltflächen zum Schließen zu implementieren und visuelle Effekte hinzuzufügen. Zu den häufig verwendeten Abschlusssymbolen gehören X, × usw., die mithilfe von Schriftartsymbolen oder benutzerdefinierten Bildern implementiert werden können. Im Folgenden sind zwei Implementierungsmethoden aufgeführt:

1. Schriftartsymbole verwenden

Schriftsymbole können über CSS Farben, Größen und andere Stile festlegen, was flexibler und praktischer ist. Darüber hinaus können die Schriftsymbole an Bildschirme mit unterschiedlichen Auflösungen angepasst werden, wodurch sie klarer und flüssiger wirken. Das Folgende ist ein Beispiel für eine Schließen-Schaltfläche mit dem Schriftartensymbol „Font Awesome“:

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.modal button {
  position: absolute;
  top: 10px;
  right: 10px;
}

Hier verwenden wir das Element link, um die CSS-Datei „Font Awesome“ zu importieren, und verschachteln dann ein i code>-Element in der Schaltfläche, setzen Sie dessen <code>class-Attribut auf fas fa-times, was bedeutet, dass das times-Symbol verwendet wird. Wenn der Benutzer auf die Schaltfläche „Schließen“ klickt, wird window.close() von JavaScript ausgeführt.

2. Verwenden Sie ein benutzerdefiniertes Bild.

Um ein benutzerdefiniertes Bild zum Implementieren der Schaltfläche „Schließen“ zu verwenden, müssen Sie zunächst ein Bild vorbereiten. Es ist nicht allzu zeitaufwändig, dieses Bild auf der Webseite anzuzeigen. Das folgende Beispiel verwendet ein Schließen-Symbol im PNG-Format:

<div class="tab">
  <button class="close-tab-button" onclick="closeTab()">
    <img src="close.png" alt="">
  </button>
  <a href="#">标签页标题</a>
</div>

Hier betten wir ein img-Element in die Schaltfläche ein und verwenden das src-Attribut, um die URL des Bildes anzugeben. alt Das Attribut ist die Beschreibung des Bildes. Wenn der Benutzer auf die Schaltfläche klickt, wird window.close() von JavaScript ausgeführt.

3. Stildesign der Schaltfläche „Schließen“

Schaltflächen mit gutem Aussehen können das Benutzererlebnis oft verbessern. Lassen Sie uns nun die Schaltfläche „Schließen“ gestalten.

1. Wireframe-Schaltflächen

Wireframe-Schaltflächen werden häufig in einfachen oder flachen Designs verwendet. Der Rahmen, die Farbe, die Schriftart usw. der Schaltfläche können über CSS-Stile festgelegt werden.

Hier ist eine Implementierung einer Schließschaltfläche im Wireframe-Stil: 🎜

.tab {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px 4px 0 0;
  background-color: #f7f7f7;
  position: relative;
}

.close-tab-button {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 5px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.close-tab-button img {
  width: 16px;
  height: 16px;
}

🎜Wir haben einen Klassennamen namens close-button hinzugefügt, um die Schaltfläche zu formatieren. Das Folgende ist der entsprechende CSS-Code: 🎜rrreee🎜Der obige Code implementiert den folgenden Schaltflächenstil: 🎜🎜🎜🎜2. Schaltflächensymbol🎜🎜Zusätzlich zur Verwendung von Textbeschreibungen können Schaltflächen Funktionen auch durch Symbole ausdrücken. Im Folgenden kombinieren wir die zuvor eingeführten Schriftsymbole und benutzerdefinierten Bilder, um die Schaltfläche „Schließen“ mit Symbolen zu implementieren. 🎜rrreee🎜 Beachten Sie, dass wir hier einen neuen Klassennamen close-icon-button hinzugefügt haben und außerdem den Klassennamen fas fa-times des in die Schaltfläche eingebetteten Elements <code>i festgelegt haben. code> bedeutet die Verwendung des times-Symbols. 🎜🎜Das Folgende ist der entsprechende Stilcode: 🎜rrreee🎜Der obige Code implementiert den folgenden Schaltflächenstil: 🎜🎜🎜🎜4. Schaltflächen zum Schließen in verschiedenen Arten von Anwendungsszenarien🎜🎜Es gibt viele Arten von Schaltflächen zum Schließen, und die Auswahl verschiedener Arten von Schaltflächen zum Schließen sollte darauf basieren auf die Bedürfnisse der tatsächlichen Anwendung abgestimmt. In diesem Abschnitt wird die Schaltfläche „Schließen“ für verschiedene allgemeine Anforderungen vorgestellt. 🎜🎜1. Die Schaltfläche „Schließen“ im modalen Feld🎜🎜Das modale Feld ist ein Popup-Fenster, das häufig auf Webseiten verwendet wird. Gleichzeitig benötigt die Modalbox eine Schließen-Schaltfläche, um das Popup-Fenster zu schließen. 🎜🎜Im Allgemeinen sollte die Schaltfläche zum Schließen des Modalfelds in der oberen rechten Ecke des Modalfelds platziert werden. Die spezifische Implementierung lautet wie folgt: 🎜rrreee🎜Beachten Sie hier, dass wir ein JavaScript mit dem Namen closeModal() hinzugefügt haben. Code> Funktion zum Schließen der modalen Box. 🎜🎜Das Folgende ist der entsprechende Stilcode: 🎜rrreee🎜Der obige Code erzielt den folgenden modalen Boxeffekt: 🎜🎜🎜🎜🎜2. Schaltflächen für mehrere Registerkarten schließen, wenn der Benutzer sie benötigt Um die aktuelle Registerkarte zu schließen, können Sie die Schaltfläche „Schließen“ auf der Registerkarte verwenden. 🎜🎜Das Folgende ist ein Beispiel für eine Schließen-Schaltfläche mit einem benutzerdefinierten Bildstil: 🎜rrreee🎜Der entsprechende CSS-Code lautet wie folgt: 🎜rrreee🎜Der obige Code erzielt den folgenden Tab-Seiteneffekt: 🎜🎜🎜🎜🎜Schlussfolgerung🎜🎜Dies Der Artikel stellt die Verwendung der Schaltfläche „Schließen“ in HTML Basic, den Symbolstil und das Stildesign sowie Implementierungsmethoden der Schaltfläche „Schließen“ in verschiedenen Anwendungsszenarien vor. Ich hoffe, es kann Ihnen helfen, Webseiten oder Anwendungen besser zu gestalten. 🎜

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