CSS-Steuerung ausgeblendet

CSS (Cascading Style Sheets) ist eine Auszeichnungssprache für das Webseitenlayout. Sie kann den Stil und das Layout verschiedener Elemente auf einer Webseite steuern. Im Webdesign müssen wir häufig einige Steuerelemente ausblenden, z. B. Navigationsleisten, Bildlaufleisten usw. Als nächstes lernen wir, wie man CSS zum Ausblenden von Steuerelementen verwendet.

Verwenden Sie das Anzeigeattribut

In CSS kann das Anzeigeattribut verwendet werden, um ein Element auszublenden. Setzen Sie einfach seinen Wert auf „Keine“. Wenn wir beispielsweise ein Schaltflächensteuerelement ausblenden müssen, müssen wir nur den folgenden Code im CSS-Stylesheet hinzufügen:

button {
  display: none;
}

Der obige Code blendet alle Schaltflächenelemente aus. Wenn Sie nur ein bestimmtes Schaltflächensteuerelement ausblenden möchten, können Sie ihm ein ID- oder Klassenattribut hinzufügen und den entsprechenden Selektor in CSS verwenden.

Verwenden Sie das Sichtbarkeitsattribut

Zusätzlich zum Anzeigeattribut gibt es in CSS ein weiteres Attribut, mit dem Steuerelemente ausgeblendet werden können, nämlich die Sichtbarkeit. Im Gegensatz zur Anzeige verbirgt das Sichtbarkeitsattribut das Element, während es weiterhin seine Position auf der Seite einnimmt. Das Codebeispiel lautet wie folgt:

button {
  visibility: hidden;
}

Wenn wir die Sichtbarkeit auf „Ausgeblendet“ setzen, ist das Element weiterhin auf der Seite vorhanden, wird aber unsichtbar. Wenn wir das Element durch Ereignisse wie das Klicken auf eine Schaltfläche wieder sichtbar machen möchten, können wir die Änderung des Sichtbarkeitsattributs in JavaScript steuern.

Verwenden Sie das Opazitätsattribut

Mit dem Opazitätsattribut können Sie die Opazität des Elements steuern, um das Steuerelement auszublenden. Wenn wir die Transparenz eines Steuerelements auf 0 setzen, ist das Steuerelement vollständig transparent und nicht sichtbar. Das Codebeispiel lautet wie folgt:

button {
  opacity: 0;
}

Beachten Sie, dass das Steuerelement immer noch seine Position auf der Seite einnimmt, wenn das Steuerelement durch das Opazitätsattribut ausgeblendet wird.

Positionsattribut verwenden

Im Webdesign verwenden wir normalerweise das Positionsattribut, um die Position von Elementen zu steuern. Zusätzlich zur Gestaltung von Elementen kann das Positionsattribut in manchen Fällen auch zum Ausblenden von Steuerelementen verwendet werden. Es gibt viele spezifische Implementierungsmethoden. Das Folgende ist eine Methode zum Ausblenden von Steuerelementen basierend auf dem Positionsattribut:

button {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Im obigen Code ist die Position des Schaltflächensteuerelements weit entfernt festgelegt, sodass es nicht auf der Seite angezeigt wird. Wenn Sie ein Steuerelement anzeigen müssen, müssen Sie nur die Positionskoordinaten des Steuerelements anpassen.

Fazit

Im Webdesign ist das Ausblenden von Kontrollen eine sehr verbreitete Technik. Unabhängig vom Ansatz ist es wichtig, das Benutzererlebnis und die Zugänglichkeit der Seite zu berücksichtigen und wichtige Informationen oder Funktionen nicht zu sehr zu verbergen. Beim Entwerfen einer Lösung ist es auch erforderlich, je nach Bedarf und Situation unterschiedliche Lösungen zum Ausblenden von Steuerelementen zu übernehmen.

Das obige ist der detaillierte Inhalt vonCSS-Steuerung ausgeblendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!