Informationen zu Bildlaufleisten in HTML/Bildlaufleisten entfernen

1. Das Farbproblem der Bildlaufleiste in xhtml

Im Original-HTML können wir die Bildlaufleiste der gesamten Seite wie folgt definieren:

body{

scrollbar -3dlight-color:#D4D0C8; /*- Outer left-*/

scrollbar-highlight-color:#fff; /*- Second from left-*/

scrollbar -face- color:#E4E4E4; /*-face-*/

scrollbar-arrow-color:#666; /*-arrow-*/

scrollbar-shadow-color:# 808080; / *- Zweiter von rechts-*/

scrollbar-darkshadow-color:#D7DCE0; /*- Erster von rechts-*/

scrollbar-base-color:# D7DCE0; /*- Grundfarbe- */

scrollbar-track-color:#;/*- Slider-*/

}

Aber derselbe Code kann nicht sein Wird unter xhtml verwendet. Ich glaube, viele gute Freunde sind auf das gleiche Problem gestoßen.

Wie kann ich den Bildlaufleistenstil unter XHTML anwenden? Schauen Sie sich den folgenden Code an:

html{

scrollbar-3dlight-color:#D4D0C8; /*- äußerste linke Seite-*/

scrollbar-highlight-color:# fff ; /*- Zweiter von links-*/

scrollbar-face-color:#E4E4E4; /*- Face-*/

scrollbar-arrow-color:#666; - Pfeil -*/

scrollbar-shadow-color:#808080; /*- Zweiter von rechts-*/

scrollbar-darkshadow-color:#D7DCE0; the right-*/

scrollbar-base-color:#D7DCE0; /*- base color-*/

scrollbar-track-color:#;/*- slide-*/

}

Der einzige Unterschied zwischen diesem Code und dem vorherigen Absatz besteht darin, dass eines der durch CSS definierten Elemente Body und das andere HTML ist. Lassen Sie es uns noch einmal testen und den „Körper“ der HTML-Seite in „HTML“ ändern, um es zu testen und festzustellen, dass der Effekt immer noch erzielt werden kann. Warum also?

Schauen wir uns das Bild unten an:



Dies ist die grundlegendste Dom-Baumstruktur von HTML.

Sehen wir uns die Definitionen von HTML und XHTML an:



HTML (Hyper Text Markup Language, HyperText Markup Language), HyperText Markup Language wird im Internet häufig verwendet . HTML beschreibt, wie die Textbasis gerendert wird und wie Hyperlinks eine Verbindung zu anderen Seiten herstellen.

XHTML (Extensible Hypertext Markup Language, Extensible Hypertext Markup Language) ist eine Auszeichnungssprache, deren Ausdruck HTML ähnelt, die Syntax jedoch strenger ist. In Bezug auf die Vererbungsbeziehung ist HTML eine auf SGML basierende Anwendung und sehr flexibel, während XHTML auf XML basiert, einer Teilmenge von SGML. XHTML 1.0 wurde am 26. Januar 2000 zu einer W3C-Empfehlung.

Xhtml hat im wahrsten Sinne des Wortes ein x mehr als HTML, also ist dieses x tatsächlich XML. Warum müssen wir XML hinzufügen? Tatsächlich besteht der grundlegendste Grund darin, HTML strukturierter und standardisierter zu gestalten (weil HTML wirklich schlecht ist).

OK, schauen wir uns den Strukturbaum oben an. Da HTML nicht sehr standardisiert ist, kann dies wirksam sein, aber in XHTML wird dies nicht funktionieren Offensichtlich ist das Body-Tag selbst nicht das Root-Element, nur HTML ist das Root-Element, und die Bildlaufleiste der Seite gehört auch zum Root-Element. Aus diesem Grund hat unsere Definition von Body keine Auswirkung Wir definieren, dass es sich nur um ein Unterelement handelt. OK, wir kennen das Prinzip, machen wir ein Experiment. Wenn wir die Definition von „body“ oder „xhtml“ durch „*“ ersetzen:

*{

scrollbar-3dlight-color: #D4D0C8; /*- Außen links-*/

scrollbar-highlight-color:#fff; /*- Zweiter von links-*/

scrollbar-face-color:#E4E4E4; /*- Face-*/

scrollbar-arrow-color:#666; /*- Arrow-*/

scrollbar-shadow-color:#808080; /*- Zweiter von rechts -*/

scrollbar-darkshadow-color:#D7DCE0; /*- right one-*/

scrollbar-base-color:#D7DCE0; /*- base color-*/

scrollbar-track-color:#;/*- Slider-*/

}

wird sowohl in HTML als auch in XHTML übergeben, da * jedes Tag auf dem definieren soll Seite, natürlich enthält sie auch das „html“-Tag.

(ps: Tatsächlich ist es nicht so sehr der Unterschied zwischen HTML und XHTML, sondern vielmehr der Unterschied, ob es einen XHTML 1.0-Übergangsdokumenttyp gibt, aber wenn Sie den XHTML 1.0-Übergangsdokumenttyp von der Seite entfernen, dann ist dies der Fall Die Seite hat keinen Dokumenttyp, der Standardanzeigemodus ist HTML4.01, aber Sie müssen den XHTML 1.0-Übergangsdokumenttyp in den HTML 4.01-Dokumenttyp ändern. Das Definieren des Hauptteils auf derselben Seite hat keine Auswirkung, obwohl der Standard dieser Seite ist HTML 4.01)

2 , das Problem der horizontalen Bildlaufleisten auf Frame-Seiten unter xhtml

Wenn Sie IE6 zum Durchsuchen von XHTML-Seiten mit Frames verwenden, werden die horizontalen und vertikalen Bildlaufleisten standardmäßig zusammen angezeigt Dies ist ein Fehler im IE6, der in Firefox auftritt. Normalerweise liegt der Grund in einem Fehler in der Interpretation des XHTML 1.0-Übergangsdokumenttyps.

Es gibt im Allgemeinen 3 Lösungen für diesen Fehler,

Methode 1:

Code:

html { overflow-y: scroll }

Prinzip: Erzwingen Sie die Anzeige der vertikalen Bildlaufleiste des IE und ignorieren Sie die horizontale Bildlaufleiste.

Vorteile: Dieses Problem wird vollständig gelöst, sodass Sie den vollständigen XHTML-Dokumenttyp beibehalten können.

Nachteile: Vertikale Bildlaufleisten werden auch dann angezeigt, wenn die Seite keine vertikalen Bildlaufleisten erfordert.

Methode 2:

Code:

html { overflow-x: versteckt; overflow-y: auto; }

Prinzip: Horizontales Scrollen ausblenden, vertikales Scrollen ist je nach Inhalt adaptiv.

Vorteile: Lösen Sie dieses Problem visuell. Die vertikale Bildlaufleiste wird nicht zwangsweise angezeigt, wenn sie nicht erforderlich ist.

Nachteile: Es verbirgt nur die horizontale Bildlaufleiste. Wenn die Seite die horizontale Bildlaufleiste wirklich benötigt, ist der Inhalt außerhalb des Bildschirms nicht sichtbar, da der Benutzer nicht horizontal scrollen kann.

Methode 3:

body { margin-right: -15px; margin-bottom: -15px;🎜>
Prinzip: Dies wird Fügen Sie dem Rand horizontal und vertikal einen negativen Wert hinzu. Nachdem der IE genau diesen Wert hinzugefügt hat, wird die Illusion der Notwendigkeit von Bildlaufleisten beseitigt.

Vorteile: Dieses Problem wird visuell gelöst, vertikales Scrollen ist adaptiv entsprechend dem Inhalt.

Nachteil: Da der 15px-Rand „künstlich erzeugt“ wird, kann der gefüllte Bildschirmbereich nicht genutzt werden.



Entfernen Sie die horizontale Bildlaufleiste:



Entfernen Sie die vertikale Bildlaufleiste:



Horizontale Bildlaufleiste ausblenden und vertikale Bildlaufleiste anzeigen:

< body style="overflow-x:hidden;overflow-y:scroll">

Alles ausblenden



Oder



Hier ist der Attributcode der Bildlaufleiste:

overflow-y : sichtbar auto | versteckt |. scroll

sichtbar: Schneidet den Inhalt nicht aus und fügt keine Bildlaufleisten hinzu.

Auto: Inhalte ausschneiden und bei Bedarf Bildlaufleisten hinzufügen

Ausgeblendet: Inhalte nicht anzeigen, die die Höhe des Objekts überschreiten. Wenn Sie möchten, können Sie dies tun Probieren Sie es selbst aus

Scrollen: Zeigt immer die vertikale Bildlaufleiste an

Lassen Sie mich zunächst darüber sprechen, wie Sie die Bildlaufleiste entfernen:

Wenn Sie den Baidu-Stil verwenden In der Vorlage kann es nur eine Bildlaufleiste geben, d hat keinen Einfluss auf die Browsing-Methode:

Im Text
{} hinzu:

sichtbar, sodass die Bildlaufleiste nicht angezeigt wird. Sie fragen sich vielleicht, wie man es so herunterzieht? Haha, da ich gesagt habe, dass es keine Auswirkungen auf das Surfen hat, gibt es natürlich eine Möglichkeit, das Mausrad zu verwenden. Obwohl die Bildlaufleiste weg ist, kann das Mausrad immer noch durch das Internet scrollen Seite hoch und runter. Ich glaube, wenn Sie im Allgemeinen im Internet surfen, verwenden Sie das Scrollrad häufiger, um auf der Webseite nach unten zu scrollen, als wenn Sie die Bildlaufleiste direkt mit der Maus ziehen

, oder? Zur Erinnerung: Wenn Sie einen Freund treffen, der keine Bildlaufleiste und kein Scrollrad an seiner Maus hat, wie soll er dann im Internet surfen? Haha, Sie können PageUp und PageDown

über den Pfeiltasten auf der Tastatur verwenden, um Seiten nach oben und unten zu blättern. Sie können auch die Leertaste verwenden, um Webseiten nach unten zu ziehen, und Umschalt+Leertaste, um Webseiten nach oben zu ziehen Zum Ziehen können Sie auch die Home-Taste drücken, um zum oberen Rand der Webseite zurückzukehren, und die Ende-Taste drücken, um zum unteren Rand der Webseite zu gelangen. Haha, gibt es viele Möglichkeiten? Dies wird jedoch immer zu Unannehmlichkeiten führen, sodass Sie je nach Ihrem eigenen Platz und Ihren Vorlieben überlegen können, ob Sie diese Bildlaufleiste deaktivieren möchten.

Haha, ich hatte nicht erwartet, so viel auf einmal zu sagen

Lass uns darüber reden, wie man eine Bildlaufleiste hinzufügt:

overflow-y : auto;height: Wie Viele px

auto

bestimmt automatisch, ob eine Bildlaufleiste hinzugefügt werden soll, wenn der festgelegte Objektinhalt die festgelegte Höhe überschreitet nicht angezeigt werden. Der Standardwert in body{} ist

overflow-y: auto;height: Browserhöhe. Wenn der Webseiteninhalt die Browserhöhe überschreitet, wird auf der rechten Seite automatisch eine Bildlaufleiste angezeigt des Browsers

Wenn Sie

dies festlegen müssen, empfehle ich, es in Vorlagen mit variablem Inhalt und variabler Höhe festzulegen, z. B. neueste Kommentare #m_comment{}, Artikelliste #m_blog{} usw . Einige Freunde gefunden. Wenn Sie nicht über die ID dieser Modellversionen

verfügen, haben Sie möglicherweise nur IDs wie #m_comment p.item{} oder #m_pro a{} usw. Dann können Sie hinzufügen die ID, die Sie nicht haben, und Sie können sie festlegen

Hier ist eine andere Möglichkeit, eine Bildlaufleiste hinzuzufügen:

overflow-y :scroll

Die Funktion dieses Parameters wurde oben erklärt, aber wenn Sie nur diesen Parameter hinzufügen, wird zwar die Bildlaufleiste angezeigt, die Bildlaufleiste wird jedoch nicht angezeigt, daher müssen Sie eine

Höhe hinzufügen: wie viele Pixel

Höhenattribut, das der obigen Methode ähnelt, es jedoch grundlegende Unterschiede gibt. Unabhängig davon, ob die Höhe des Objektinhalts die durch Höhe festgelegte Höhe überschreitet, wird die Bildlaufleiste immer an der Seite angezeigt

Lass uns über die Verschönerung der Bildlaufleiste sprechen. Mein Freund hat mir das online gezeigt. Ich finde das Bild oben sehr gut, aber es ist sehr klein, also habe ich die Größe verdoppelt und es sieht viel klarer aus die verschiedenen Attribute der Verschönerung:

SCROLLBAR-FACE-COLOR: Farbcode

SCROLLBAR-HIGHLIGHT-COLOR: Farbcode;SCROLLBAR-SHADOW-COLOR: Farbcode

SCROLLBAR-3DLIGHT-COLOR: Farbcode; : Farbcode;

SCROLLBAR-DARKSHADOW-COLOR: Farbcode;

Nicken Sie mit dem Kopf, wenn Sie so viele Attribute sehen? Haha, keine Sorge, Sie werden sich viel besser fühlen, wenn Sie sich die zweifach vergrößerte Abbildung ansehen, die ich gerade erwähnt habe:

Das Bild in diesem

hat auch eine Scrollbar-Basis- Das Attribut der Farbe ist tatsächlich die Summe der oben genannten 7 Attribute. Das heißt, nachdem Sie die Farbe dieses Attributs festgelegt haben,

müssen Sie die vorherigen 7 Attribute nicht mehr festlegen. Die Bildlaufleiste wird sie automatisch für Sie festlegen, diese Einstellung basiert jedoch auf der von Ihnen vorgenommenen Bildlaufleiste eingestellt. -Die Farbe von -base-color wird automatisch auf

gesetzt. Der Vorteil dieses Attributs besteht darin, dass nicht jeder die Farben verschiedener Orte studieren muss, aber der Nachteil besteht darin, dass es nicht alle mischen kann die Farben in eins. .

Hinweis: Wenn die Scrollbar-Basisfarbe festgelegt ist, legen Sie die anderen sieben Attribute nicht fest, da es sonst zu Konflikten kommen kann Es wird einige Effekte geben, die nicht funktionieren

Schließlich habe ich, da Ihnen mein Verschönerungscode gefallen könnte [er ist so stinkend~], meinen Verschönerungscode gepostet:

SCROLLBAR -FACE-COLOR: #CCFFFF;

SCROLLBAR-HIGHLIGHT-COLOR: weiß;

SCROLLBAR-SHADOW-COLOR: #813533;

SCROLLBAR-PFEIL-FARBE: #813533;

SCROLLBAR-TRACK-FARBE: weiß 🎜>





-->

Das obige ist der detaillierte Inhalt vonInformationen zu Bildlaufleisten in HTML/Bildlaufleisten entfernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!