Anwendung zur Verarbeitung von HTML-Tag-Überläufen

Anwendung zur Verarbeitung von HTML-Tag-Überläufen

Verwenden Sie CSS, um Bildlaufleisten zu ändern
1. Überlaufeinstellungen bei Inhaltsüberlauf

overflow-x-Einstellung für horizontalen Inhaltsüberlauf
Overflow-Y-Einstellungen für vertikalen Inhaltsüberlauf. Die obigen drei Eigenschaften sind auf „Sichtbar“ (Standardwert), „Scrollen“, „Ausgeblendet“ und „Automatisch“ eingestellt.

2. scrollbar-3d-light-colorDie Farbe der hellen Kante der dreidimensionalen Bildlaufleiste
scrollbar-arrow-colorDie Farbe des dreieckigen Pfeils auf den Auf- und Ab-Buttons
scrollbar-base-color Die Grundfarbe der Scrollbar
scrollbar-dark-shadow-color Die Farbe des starken Schattens der dreidimensionalen Bildlaufleiste
scrollbar-face-color Die Farbe des hervorstehenden Teils der dreidimensionalen Bildlaufleiste
scrollbar-highlight-color Die Farbe des leeren Teils der Bildlaufleiste
scrollbar-shadow-color Die Farbe des dreidimensionalen Bildlaufleistenschattens. Die durch die oben genannten sieben Eigenschaften festgelegten Werte sind alle Farbwerte und können auf verschiedene im Stylesheet definierte Arten ausgedrückt werden.

Mithilfe des obigen Stildefinitionsinhalts können wir angeben, ob der Stil und die Farbe von Bildlaufleisten in Browserfenstern und mehrzeiligen Textfeldern angezeigt werden sollen. Die erste Gruppe von Stilattributen wird verwendet, um festzulegen, ob das festgelegte Objekt Bildlaufleisten anzeigt, und die zweite Gruppe von Stilattributen wird verwendet, um die Farbe der Bildlaufleiste festzulegen. Es ist zu beachten, dass die in diesem Artikel enthaltenen Stilattribute nur von IE unterstützt werden und die zweite Gruppe von Stilattributen nur von IE5.5. Achten Sie daher beim Debuggen darauf.

Wir erläutern die oben genannten Stilattribute anhand mehrerer Beispiele:

1. Stellen Sie sicher, dass das Browserfenster niemals Bildlaufleisten oder horizontale Bildlaufleisten enthält
<body style="overflow-x:hidden">
Keine vertikale Bildlaufleiste
<body style="overflow-y:hidden">
Keine Bildlaufleisten
<body style="overflow-x:hidden;overflow-y:hidden"> oder <body style="overflow:hidden">

2. Stellen Sie die Bildlaufleiste des mehrzeiligen Textfelds so ein, dass keine horizontale Bildlaufleiste vorhanden ist

Code kopieren
Der Code lautet wie folgt:
<textarea style="overflow-x:hidden"> </textarea>

Keine vertikale Bildlaufleiste

Code kopieren
Der Code lautet wie folgt:
<textarea style="overflow-y:hidden"> </textarea>

Keine Bildlaufleisten

Code kopieren
Der Code lautet wie folgt:
<textarea style="overflow-x:hidden;overflow-y:hidden"> </textarea>

oder
Code kopieren
Der Code lautet wie folgt:
<textarea style="overflow:hidden"> </textarea>


3. Stellen Sie die Farbe der Fenster-Bildlaufleiste ein Stellen Sie die Farbe der Fenster-Bildlaufleiste auf Rot ein <body style="scrollbar-base-color:red">
scrollbar-base-color legt die Grundfarbe fest. Im Allgemeinen müssen Sie nur diese eine Eigenschaft festlegen, um die Farbe der Bildlaufleiste zu ändern.
Fügen Sie einen kleinen Spezialeffekt hinzu:

Code kopieren
Der Code lautet wie folgt:
<body style="scrollbar-arrow-color:gelb;scrollbar-base-color:helllachs">


4. Beim Festlegen anderer Elemente ist es grundsätzlich dasselbe. Am besten definieren Sie eine Klasse in der Stylesheet-Datei, damit Sie sie wiederverwenden können.


Code kopieren
Der Code lautet wie folgt:

.coolscrollbar
{
Bildlaufleistenpfeilfarbe: gelb;
Grundfarbe der Bildlaufleiste: Helllachs;
}

Fügen Sie die obige Anweisung zur Stylesheet-Datei oder zum <style> </style> des HTML-Headers hinzu und verwenden Sie dann
<textarea class="coolscrollbar"> </textarea>

<<:  So installieren Sie Docker unter CentOS und veröffentlichen Docker remote in Springboot

>>:  Fähigkeiten zur Erstellung von Webformularen

Artikel empfehlen

Detaillierte Erläuterung der Installation und Konfiguration des Nginx+Tomcat-Load-Balancing-Clusters

Inhaltsverzeichnis Vorwort 1. Nginx + Tomcat 2. K...

Was ist ein MySQL-Index? Fragen Sie, wenn Sie es nicht verstehen

Inhaltsverzeichnis Überblick Vom Binärbaum zum B+...

Lassen Sie uns ausführlich über den Vue-Lebenszyklus sprechen

Inhaltsverzeichnis Vorwort 1. Lebenszyklus in Vue...

Gojs implementiert Ameisenlinien-Animationseffekt

Inhaltsverzeichnis 1. Gojs-Implementierung 1. Zei...

Detaillierte Erläuterung des Excel-Parsings und -Exports basierend auf Vue

Inhaltsverzeichnis Vorwort Grundlegende Einführun...

CSS-Navigationsleistenmenü mit kleinem Dreieck-Implementierungscode

Viele Webseiten haben kleine Dreiecke in ihren Na...

Vue+Flask realisiert Videosynthesefunktion (Drag & Drop-Upload)

Inhaltsverzeichnis Wir haben in einem früheren Ar...

Praktische Aufzeichnung der Handhabung von MySQL-Problemen beim automatischen Herunterfahren

Ich habe vor Kurzem jemandem bei einem Projekt ge...

Win10 Installation von MySQL 5.7 MSI-Version des Tutorials mit Bildern und Text

Ich habe es im MSI-Format installiert, hauptsächl...

Der Unterschied zwischen HTML, XHTML und XML

Entwicklungstrends: html (Hypertext-Markup-Sprache...

Ändern Sie die maximale Anzahl von MySQL-Verbindungen und Konfigurationsdateien in Docker

1. Suchen Sie das MySQL-Image Docker PS 2. Geben ...

JS realisiert einfachen Bildkarusselleffekt

In diesem Artikel wird der spezifische JS-Code zu...

Hinweise zur Groß-/Kleinschreibung bei MySQL

Inhaltsverzeichnis Die Groß-/Kleinschreibung von ...

Natives JS zur Realisierung eines springenden Balls

Aus einer Laune heraus habe ich eine Fallstudie ü...

Detailliertes Tutorial zur Installation von MySQL 8.0.12 unter Windows

In diesem Artikel finden Sie eine ausführliche An...