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

Schritte eines hervorragenden Registrierungsprozesses

Für eine Website ist dies die grundlegendste Funkt...

HTML-Grundlagen - Zusammenfassung - Empfehlung (Absatz)

HTML-Absatz Absätze werden durch das Tag <p>...

Ein Protokoll einer Notfallreaktion nach einem Einbruch in einen Linux-Server (Zusammenfassung)

Kürzlich erhielten wir von einem Kunden eine Bitt...

Beispiel für die Implementierung einer Ankerpositionierungsfunktion beim WeChat-Applet

Vorwort Bei der Entwicklung kleiner Programme müs...

So verwenden Sie Bind zum Einrichten eines DNS-Servers

DNS (Domain Name Server) ist ein Server, der Domä...

So fügen Sie die Tomcat-Serverkonfiguration zu Eclipse hinzu

1. Fenster -> Einstellungen, um das Eclipse-Ei...

Entdecken Sie die Wahrheit hinter dem Neuladevorgang in Nginx

Der heutige Artikel stellt hauptsächlich den Neul...

Keepalived+Nginx+Tomcat-Beispielcode zur Implementierung eines hochverfügbaren Webclusters

Keepalived+Nginx+Tomcat zur Erzielung eines hochv...

Docker Compose stellt ein SpringBoot-Projekt bereit, um eine Verbindung zu MySQL herzustellen, und die dabei auftretenden Fallstricke

Zuvor haben wir Docker verwendet, um das SpringBo...

Detaillierte grafische Erläuterung der MySql5.7.18-Zeichensatzkonfiguration

Hintergrund: Vor langer Zeit (2017.6.5, der Artik...

Eine kurze Diskussion über reguläre JS-RegExp-Objekte

Inhaltsverzeichnis 1. RegExp-Objekt 2. Grammatik ...

Nginx-Konfiguration 80 Portzugriff 8080 und Analyse der Projektnamenadressenmethode

Tomcat greift auf das Projekt zu, normalerweise I...

So entfernen Sie die Kopfzeile aus der Elementtabelle

Dokumenthinweise mit dem Attribut show-header <...

Lösung für MySQL, das aufgrund einer übermäßigen Speicherkonfiguration nicht gestartet werden kann

Problembeschreibung MySQL meldet beim Start einen...

Vier praktische Tipps für JavaScript-String-Operationen

Inhaltsverzeichnis Vorwort 1. Eine Zeichenfolge t...