Über das Problem der Bildlaufleisten/das Entfernen von Bildlaufleisten bei der Erstellung von HTML_HTML/Xhtml_Web-Seiten

1. Das Farbproblem der Bildlaufleiste unter xhtml

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

Kopieren Sie den Code

Der Code lautet wie folgt:

body{
scrollbar-3dlight-color:#D4D0C8 /*- äußerste linke Seite- */
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; the right-*/
scrollbar-base -color:#D7DCE0; /*- base color-*/
scrollbar-track-color:#;/*- slide-*/
}

Aber derselbe Code, unsere Anwendung wird unter xhtml nicht funktionieren. 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:

Kopieren Sie den Code

Der Code lautet wie folgt:

html{
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; /*- right one-*/
scrollbar-base-color:#D7DCE0 /*- base color-*/
scrollbar-track- color:#;/*- slide Dao-*/
}

Der einzige Unterschied zwischen diesem Code und dem vorherigen Absatz besteht darin, dass in den durch CSS definierten Elementen eines der Körper und das andere der andere ist ist HTML. 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 Text als Benchmark gerendert wird und wie Hyperlinks zu anderen Seiten führen.

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“ in „*“ ändern:

Code kopieren

Der Code lautet wie folgt:

*{
scrollbar-3dlight-color:#D4D0C8; /*- äußerste linke Seite-*/
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; /*- Erster von rechts-*/
scrollbar-base-color:#D7DCE0 ; /*- Base color-*/
scrollbar-track-color:#;/*- Slider-*/
}

Passt sowohl in HTML als auch in XHTML, da * ein beliebiges Tag auf der Seite definieren soll, zu dem natürlich auch das Tag „html“ gehört.

(ps: Tatsächlich ist es nicht so sehr der Unterschied zwischen HTML und XHTML, sondern der Unterschied zwischen der Frage, ob es einen XHTML 1.0-Übergangsdokumenttyp gibt, aber wenn Sie den Dann hat diese Seite keinen Doctype, die Standardanzeigemethode ist html4.01, aber Sie müssen den XHTML 1.0-Übergangsdoctype in den HTML 4.01-Doctype ändern. Dies hat jedoch keine Auswirkung, wenn Sie den Textkörper auf derselben Seite definieren Der Standard dieser Seite ist HTML 4.01). werden standardmäßig zusammen angezeigt. Dies ist ein Fehler in IE6 und liegt in Firefox. 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 passt sich dem Inhalt an.
Vorteile: Lösen Sie dieses Problem visuell. Die vertikale Bildlaufleiste wird nicht zwangsweise angezeigt, wenn sie nicht erforderlich ist.
Nachteil: Es wird nur die horizontale Bildlaufleiste ausgeblendet. 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 je nach Inhalt adaptiv.
Nachteil: Da der 15px-Rand „künstlich erzeugt“ wird, kann der gefüllte Bildschirmbereich nicht genutzt werden.



Entfernen Sie die horizontale Bildlaufleiste:
:


Horizontale Bildlaufleiste ausblenden und vertikale Bildlaufleiste anzeigen:


Alles ausblenden


oder


Hier ist der Attributcode der Bildlaufleiste:
überlauf-y: sichtbar | scrollen
sichtbar: Fügt keinen Bildlauf 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 es selbst ausprobieren
scrollen: Vertikale Bildlaufleiste immer anzeigen

Lassen Sie mich zunächst darüber sprechen, wie Sie die Bildlaufleiste entfernen:
Wenn Sie die Baidu-Stilvorlage verwenden, kann es nur eine Bildlaufleiste geben, nämlich die Die größte Bildlaufleiste des Browserfensters befindet sich auf der rechten Seite des gesamten Bereichs. Dies ist die Bildlaufleiste, die ich verschönert habe. Wir können diese Bildlaufleiste entfernen, dies hat jedoch keinen Einfluss auf die Browsing-Methode:
Overflow-y zum Text hinzufügen
{}:
visible will be Das war’s, also wird die Bildlaufleiste nicht angezeigt. Sie fragen sich vielleicht, wie man es so herunterzieht? Haha, da ich gesagt habe, dass es keinen Einfluss auf das Surfen hat, gibt es natürlich eine Möglichkeit, das Mausrad zu verwenden. Obwohl die Bildlaufleiste nicht mehr vorhanden ist, kann das Mausrad immer noch nach oben und unten scrollen runter. Ich glaube, dass Sie beim Surfen im Internet das Scrollrad häufiger verwenden, um auf der Webseite nach unten zu scrollen, als dass 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 die Umschalttaste, um Webseiten nach oben zu ziehen Mit den Pfeiltasten nach oben und unten können Sie außerdem zum oberen Rand der Webseite zurückkehren und mit der Ende-Taste zum unteren Rand der Webseite gelangen Wege? Dies führt jedoch immer zu Unannehmlichkeiten. Sie können daher je nach Ihrem Platzbedarf und Ihren Vorlieben überlegen, ob Sie diese Bildlaufleiste deaktivieren möchten.

Haha, ich hätte nicht erwartet, so viele Wörter 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, wird die Bildlaufleiste automatisch hinzugefügt body{} ist
overflow-y: auto;height: Browserhöhe. Wenn also der Webseiteninhalt die Browserhöhe überschreitet, wird automatisch eine Bildlaufleiste auf der rechten Seite des Browsers angezeigt
Wenn Sie
dies festlegen müssen, empfehle ich Es wird in den neuesten Kommentaren #m_comment{}, Artikelliste #m_blog{} und anderen Vorlagen festgelegt, deren Inhalt und Höhe nicht festgelegt sind. Einige Freunde können die IDs dieser Vorlagen nicht finden
Sie haben möglicherweise nur #. m_comment div.item{ } oder #m_pro a{} usw., dann können Sie die ID hinzufügen, die Sie nicht haben, damit Sie sie festlegen können

Hier ist eine andere Möglichkeit, eine Bildlaufleiste hinzuzufügen:
overflow-y :scroll
Die Funktion dieses Parameters wurde oben erläutert. Wenn Sie jedoch nur diesen Parameter hinzufügen, wird die Bildlaufleiste zwar angezeigt, die Bildlaufleiste wird jedoch nicht angezeigt, sodass Sie ein height: wie viele px
Das Höhenattribut ähnelt der oben genannten Methode, es gibt jedoch einen grundlegenden Unterschied. Unabhängig davon, ob die Höhe des Objektinhalts die durch Höhe festgelegte Höhe überschreitet, wird die Bildlaufleiste immer angezeigt nebenbei

Lass uns unten darüber reden. Was die Verschönerung der Bildlaufleisten betrifft, hat mir mein Freund im Internet eine Erklärung gezeigt. Ich finde das Bild oben sehr gut, aber es ist sehr klein, also habe ich es verdoppelt Größe und es sieht viel klarer aus. Lassen Sie uns zuerst über die Verschönerung sprechen:

Code kopieren Der Code lautet wie folgt :

SCROLLBAR-FACE-COLOR: Farbcode
SCROLLBAR-HIGHLIGHT-COLOR: Farbcode;
SCROLLBAR-SHADOW-COLOR: Farbcode; FARBE: Farbcode;
SCROLLBAR-ARROW-COLOR: Farbcode;
SCROLLBAR-TRACK-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 das gerade erwähnte doppelt vergrößerte Diagramm ansehen:

Das Bild hier hat auch ein Scrollbar-Base-Color-Attribut. Tatsächlich ist dies der Fall Attribut Es ist die Summe der oben genannten sieben Attribute. Das heißt, nachdem Sie die Farbe dieses Attributs festgelegt haben,
müssen Sie die vorherigen 7 Attribute nicht mehr festlegen. Die Bildlaufleiste legt sie automatisch fest, diese Einstellung basiert jedoch auf der Bildlaufleistenbasis Der Vorteil dieses Attributs besteht darin, dass nicht jeder die Farben verschiedener Orte studieren muss, der Nachteil besteht jedoch darin, dass nicht alle Farben zu einer einzigen gemischt werden können. .

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

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





Kopieren Sie den Code

Der Code lautet wie folgt: SCROLLBAR-FACE-COLOR: #CCFFFF;

SCROLLBAR-HIGHLIGHT- COLOR : weiß;

SCROLLBAR-SHADOW-COLOR: #813533;

SCROLLBAR-TRACK-COLOR: #813533;
SCROLLBAR-DARKSHADOW-COLOR: #813533;


Ich habe den obigen Code im Hauptteil hinzugefügt{}