Informationen zur Bildlaufleiste in HTML/Bildlaufleiste entfernen
|
1. Die Farbe der Bildlaufleiste unter xhtml Im Original-HTML können wir die Bildlaufleiste der gesamten Seite wie folgt definieren: Code kopieren Der Code lautet wie folgt:Körper{ scrollbar-3dlight-color:#D4D0C8; /*- Ganz links-*/ scrollbar-highlight-color:#fff; /*- zweite linke Seite -*/ Bildlaufleisten-Gesichtsfarbe: #E4E4E4; /*- Gesicht-*/ Bildlaufleistenpfeilfarbe: #666; /*- Pfeil-*/ scrollbar-shadow-color:#808080; /*- Zweite von rechts-*/ scrollbar-darkshadow-color:#D7DCE0; /*- Rechte-*/ scrollbar-base-color:#D7DCE0; /*- Grundfarbe -*/ Bildlaufleisten-Spurfarbe:#;/*- Bildlaufleiste-*/ } Aber derselbe Code funktioniert nicht, wenn wir ihn unter XHTML anwenden. Ich glaube, viele Freunde sind auf dasselbe Problem gestoßen. Wie können wir also den Bildlaufleistenstil in XHTML anwenden? Sehen Sie sich den folgenden Code an: Code kopieren Der Code lautet wie folgt:html{ scrollbar-3dlight-color:#D4D0C8; /*- Ganz links-*/ scrollbar-highlight-color:#fff; /*- zweite linke Seite -*/ Bildlaufleisten-Gesichtsfarbe: #E4E4E4; /*- Gesicht-*/ Bildlaufleistenpfeilfarbe: #666; /*- Pfeil-*/ scrollbar-shadow-color:#808080; /*- Zweite von rechts-*/ scrollbar-darkshadow-color:#D7DCE0; /*- Rechte-*/ scrollbar-base-color:#D7DCE0; /*- Grundfarbe -*/ Bildlaufleisten-Spurfarbe:#;/*- Folienspur-*/ } Der einzige Unterschied zwischen diesem Code und dem vorherigen sind die durch CSS definierten Elemente, eines ist der Body und das andere ist HTML. Testen wir es noch einmal, indem wir den „Body“ der HTML-Seite in „html“ ändern und feststellen, dass der Effekt immer noch erzielt werden kann. Warum ist das so? Schauen wir uns das folgende Bild an: Dies ist die grundlegendste DOM-Baumstruktur von HTML. Schauen wir uns die Definitionen von HTML und XHTML an: HTML (Hyper Text Markup Language) wird im Internet häufig verwendet. HTML beschreibt, wie Textbasen dargestellt werden und wie Hyperlinks auf andere Seiten verweisen. XHTML (Extensible Hypertext Markup Language) ist eine Auszeichnungssprache, die in der Ausdrucksweise HTML ähnelt, aber eine strengere Syntax aufweist. In Bezug auf die Vererbung ist HTML eine auf SGML basierende Anwendung und sehr flexibel, während XHTML auf XML basiert, das wiederum eine Teilmenge von SGML ist. XHTML 1.0 wurde am 26. Januar 2000 eine W3C-Empfehlung. Wörtlich genommen hat xhtml ein x mehr als html, dieses x steht also eigentlich für xml. Warum müssen wir also xml hinzufügen? Der grundlegendste Grund besteht tatsächlich darin, HTML strukturierter und standardisierter zu gestalten (weil HTML wirklich schlecht ist). OK, gehen wir zurück zum Strukturbaum oben. Wir haben body in html definiert, und das funktioniert, weil html nicht sehr standardisiert ist. Aber es funktioniert nicht in xhtml. Ich sehe mir das Bild an und es ist offensichtlich, dass das body-Tag selbst nicht das Stammelement ist. Nur html ist das Stammelement, und die Bildlaufleiste der Seite ist auch ein Stammelement. Deshalb hat die Definition von body keine Wirkung, weil wir nur ein Unterelement definiert haben. OK, wir kennen das Prinzip. Machen wir ein Experiment, indem wir die Definition „body“ oder „xhtml“ durch „*“ ersetzen: Code kopieren Der Code lautet wie folgt:*{ scrollbar-3dlight-color:#D4D0C8; /*- Ganz links-*/ scrollbar-highlight-color:#fff; /*- zweite linke Seite -*/ Bildlaufleisten-Gesichtsfarbe: #E4E4E4; /*- Gesicht-*/ Bildlaufleistenpfeilfarbe: #666; /*- Pfeil-*/ scrollbar-shadow-color:#808080; /*- Zweite von rechts-*/ scrollbar-darkshadow-color:#D7DCE0; /*- Rechte-*/ scrollbar-base-color:#D7DCE0; /*- Grundfarbe -*/ Bildlaufleisten-Spurfarbe:#;/*- Bildlaufleiste-*/ } Es übergibt sowohl HTML als auch XHTML, da * jedes Tag auf der Seite definiert, einschließlich des „HTML“-Tags. (P.S.: Eigentlich ist es besser zu sagen, dass der Unterschied zwischen HTML und XHTML der Unterschied ist, ob man den Übergangs-Doctype XHTML 1.0 hat oder nicht. Wenn Sie jedoch den Übergangs-Doctype XHTML 1.0 von einer Seite entfernen, dann hat die Seite keinen Doctype und der Standardanzeigemodus ist HTML4.01. Wenn Sie jedoch den Übergangs-Doctype XHTML 1.0 in den Doctype HTML 4.01 ändern, hat die Definition des Seitentexts keine Auswirkung, auch wenn der Standard dieser Seite HTML 4.01 ist.) 2. Das Problem der horizontalen Bildlaufleiste auf der Frameseite unter xhtml Beim Durchsuchen von XHTML-Seiten mit Frames mit IE6 werden standardmäßig horizontale und vertikale Bildlaufleisten angezeigt. Dies ist ein Fehler in IE6. Bei Firefox ist dies normal. Der Grund dafür ist der Defekt bei der Interpretation des Übergangs-Doctypes von XHTML 1.0. Für diesen Fehler gibt es im Allgemeinen drei Lösungen: Methode 1: Code: html { Überlauf-y: scrollen; } Prinzip: Erzwingen Sie die Anzeige der vertikalen Bildlaufleiste des IE und ignorieren Sie die horizontale Bildlaufleiste. Vorteile: Löst dieses Problem vollständig und ermöglicht Ihnen, einen vollständigen XHTML-Dokumenttyp beizubehalten. Nachteil: Es wird eine vertikale Bildlaufleiste angezeigt, auch wenn die Seite keine benötigt. Methode 2: Code: html { Überlauf-x: versteckt; Überlauf-y: automatisch; } Prinzip: Horizontales Scrollen ausblenden und vertikales Scrollen dem Inhalt anpassen. Vorteile: Dadurch wird das Problem optisch gelöst. Die vertikale Bildlaufleiste wird nicht zwangsweise angezeigt, wenn dies nicht erforderlich ist. Nachteile: Es wird nur die horizontale Bildlaufleiste ausgeblendet. Wenn die Seite wirklich eine horizontale Bildlaufleiste benötigt, ist der Inhalt außerhalb des Bildschirms nicht sichtbar, da der Benutzer nicht horizontal scrollen kann. Methode 3: Code: Körper { Rand rechts: -15px; Rand unten: -15px; } Funktionsweise: Dadurch wird den horizontalen und vertikalen Rändern ein negativer Wert hinzugefügt. Der IE fügt genau diesen Wert hinzu, um die Illusion zu beseitigen, dass eine Bildlaufleiste erforderlich ist. Vorteile: Dieses Problem wird visuell gelöst und das vertikale Scrollen passt sich dem Inhalt an. Nachteil: Da der 15px Rand „künstlich erzeugt“ ist, kann die ausgefüllte Bildschirmfläche nicht genutzt werden. <body scroll=nein> Entfernen Sie die horizontale Bildlaufleiste: <body style="overflow-x: hidden"> Entfernen Sie die vertikale Bildlaufleiste: <body style="overflow-y: versteckt"> Horizontale Bildlaufleiste ausblenden und vertikale Bildlaufleiste anzeigen: <body style="Überlauf-x:versteckt;Überlauf-y:Scrollen"> Alle ausblenden <body style="Überlauf:versteckt"> oder <body scroll="nein"> Hier ist der Attributcode der Bildlaufleiste: overflow-y: sichtbar | automatisch | versteckt | scrollen sichtbar: Den Inhalt nicht abschneiden und keine Bildlaufleisten hinzufügen. auto: Inhalt ausschneiden und bei Bedarf Bildlaufleisten hinzufügen Versteckt: Es werden keine Inhalte angezeigt, die die Höhe des Objekts überschreiten. Diese Eigenschaft wird hier nicht vorgestellt. Wenn Sie möchten, können Sie es selbst ausprobieren. scrollen: immer vertikale Bildlaufleiste anzeigen Lassen Sie mich Ihnen zunächst erklären, wie Sie die Bildlaufleiste entfernen: Wenn Sie die Vorlage im Baidu-Stil verwenden, kann es nur eine Bildlaufleiste geben, nämlich die größte Bildlaufleiste des Browserfensters auf der rechten Seite des gesamten Bereichs. Dies ist die Bildlaufleiste, die ich verschönert habe. Jetzt sage ich Ihnen, dass wir diese Bildlaufleiste entfernen können, dies hat jedoch keine Auswirkungen auf die Browsing-Methode: Im Körper Fügen Sie overflow-y zu {} hinzu: sichtbar, dann wird die Bildlaufleiste nicht angezeigt. Sie fragen sich vielleicht, wie man es so herunterzieht? Haha, da ich gesagt habe, dass es das Surfen nicht beeinträchtigt, gibt es natürlich eine Möglichkeit. Zum Surfen verwenden Sie das Mausrad. Obwohl die Bildlaufleiste weg ist, können Sie mit dem Mausrad die Webseite immer noch nach oben und unten scrollen. Ich bin davon überzeugt, dass Sie beim Surfen im Internet häufiger das Scrollrad 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 eine Maus ohne Scrollrad hat, wie surfen Sie dann im Internet? Haha, du kannst die Bild-Auf- und Bild-Ab-Tasten über den Pfeiltasten auf der Tastatur verwenden Um die Seiten nach oben und unten zu blättern, können Sie auch die Leertaste verwenden, um die Webseite nach unten zu ziehen, und die Umschalt- und Leertaste, um die Webseite nach oben zu ziehen. Eine andere Möglichkeit besteht darin, die Aufwärts- und Abwärtspfeiltasten zum Ziehen zu verwenden. Darüber hinaus können Sie die Home-Taste drücken, um zum Anfang der Webseite zurückzukehren, und die Ende-Taste, um zum Ende der Webseite zu gelangen. Haha, gibt es nicht viele Möglichkeiten? Dies ist jedoch immer etwas umständlich, sodass Sie je nach Ihrem Platzangebot und Ihren Vorlieben abwägen können, ob Sie die Bildlaufleiste deaktivieren möchten. Haha, ich hätte nicht gedacht, dass ich so viel auf einmal reden würde. So fügen Sie eine Bildlaufleiste hinzu: overflow-y: auto; Höhe: wie viele px Auto Es wird automatisch bestimmt, ob eine Bildlaufleiste hinzugefügt werden soll. Wenn der Inhalt des festgelegten Objekts die durch height festgelegte Höhe überschreitet, wird automatisch eine Bildlaufleiste hinzugefügt, andernfalls wird sie nicht angezeigt. Der Standardwert in body{} ist overflow-y: auto; height: Browserhöhe, wenn also der Inhalt der Webseite die Browserhöhe überschreitet, wird automatisch eine Bildlaufleiste auf der rechten Seite des Browsers angezeigt. Wenn Sie dies einstellen müssen, schlage ich vor, es in den neuesten Kommentaren #m_comment{}, der Artikelliste #m_blog{} und anderen Vorlagen mit unterschiedlichem Inhalt und unterschiedlicher Höhe einzustellen. Einige Freunde können die IDs dieser Vorlagen nicht finden, vielleicht gibt es nur IDs wie #m_comment div.item{} oder #m_pro a{}, dann können Sie die ID hinzufügen, die nicht existiert, damit Sie sie einstellen können. Hier ist eine weitere Methode zum Hinzufügen von Bildlaufleisten: Überlauf-y: scrollen Die Funktion dieses Parameters wurde oben erläutert. Wenn Sie jedoch nur diesen Parameter hinzufügen, wird zwar die Bildlaufleiste angezeigt, aber die Bildlaufleiste wird nicht angezeigt. Sie müssen daher auch einen Höhe: wie viele px Die Höheneigenschaft ähnelt der obigen 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 an der Seite angezeigt. Als nächstes sprechen wir über die Verschönerung der Bildlaufleiste. Mein Freund hat mir im Internet eine Beschreibung gezeigt. Ich finde das Bild oben sehr gut, aber es ist sehr klein, also habe ich es zweimal vergrößert, und es sieht viel klarer aus. Lassen Sie uns zunächst über die verschiedenen Eigenschaften der Verschönerung sprechen: Code kopieren Der Code lautet wie folgt:SCROLLBAR-FACE-COLOR: Farbcode; SCROLLBAR-HIGHLIGHT-COLOR: Farbcode; SCROLLBAR-SHADOW-COLOR: Farbcode; SCROLLBAR-3DLIGHT-COLOR: Farbcode; SCROLLBAR-ARROW-COLOR: Farbcode; SCROLLBAR-TRACK-COLOR: Farbcode; SCROLLBAR-DARKSHADOW-COLOR: Farbcode; Sind Sie angesichts der vielen Attribute ein wenig überwältigt? Haha, keine Sorge, es wird dir viel besser gehen, wenn du dir das Diagramm anschaust, das ich gerade erwähnt habe und das zweimal vergrößert wurde: Hier im Bild gibt es auch ein Scrollbar-Base-Color-Attribut. Tatsächlich ist dieses Attribut die Summe der oben genannten 7 Attribute. Wie sagt man es? Wenn Sie die Farbe dieses Attributs festlegen, Die ersten 7 Eigenschaften müssen nicht festgelegt werden, die Bildlaufleiste legt sie automatisch für Sie fest. Diese Einstellung wird jedoch automatisch basierend auf der Farbe der von Ihnen festgelegten Bildlaufleisten-Basisfarbe festgelegt. Der Vorteil dieser Eigenschaft besteht darin, dass Sie nicht viel Zeit damit verbringen müssen, die Farben der einzelnen Stellen zu studieren. Der Nachteil besteht jedoch darin, dass nicht alle Farben zu einer einzigen Farbe vermischt werden können. . Hinweis: Wenn Sie scrollbar-base-color festlegen, legen Sie die anderen sieben Eigenschaften nicht fest. Wenn Sie die anderen sieben Eigenschaften festlegen, legen Sie scrollbar-base-color nicht fest. Andernfalls kann es zu Konflikten kommen und einige Effekte funktionieren nicht. Und schließlich habe ich meinen verschönerten Code gepostet, weil ich bedenke, dass Ihnen mein [so eingebildeter] verschönerter Code gefallen könnte: Code kopieren Der Code lautet wie folgt:Scrollleisten-Gesichtsfarbe: #CCFFFF; SCROLLBAR-HIGHLIGHT-FARBE: weiß; SCROLLBAR-SCHATTENFARBE: #813533; SCROLLBAR-3DLIGHT-FARBE: #813533; SCROLLBAR-PFEIL-FARBE: #813533; SCROLLBAR-TRACK-FARBE: weiß; SCROLLBAR-DARKSHADOW-FARBE: #813533; Der obige Code wird zu body{} hinzugefügt |
<<: Erste Schritte Tutorial für Anfänger ⑨: So erstellen Sie eine Portal-Website
>>: Detaillierte Erklärung des VUE-Reaktionsprinzips
Artikel empfehlen
Das Prinzip und die Implementierung des JS-Drag-Effekts
Die Drag-Funktion wird hauptsächlich verwendet, u...
Saubere XHTML-Syntax
Das Schreiben von XHTML erfordert eine saubere HTM...
Implementierungsbeispiel für die Bereitstellung von Docker rocketmq
Inhaltsverzeichnis Vorbereitung Bereitstellungspr...
HTML-Kommentare Symbole zum Markieren von Textkommentaren in HTML
HTML-Kommentare: Wir müssen häufig einige HTML-Ko...
HTML Table Tag Tutorial (47): Verschachtelte Tabellen
<br />Der Schriftsatz auf der Seite erfolgt ...
Tutorial zur Samba-Konfiguration für die Dateifreigabe im Linux-System
Inhaltsverzeichnis Deinstallieren und installiere...
So legen Sie den Standardwert eines MySQL-Felds fest
Inhaltsverzeichnis Vorwort: 1. Standardwertbezoge...
Detailliertes Tutorial zur Installation des Jenkins-Containers in einer Docker-Umgebung
Empfohlene Docker-Lernmaterialien: https://www.ru...
So installieren Sie eine ISO-Datei im Linux-System
Wie installiere ich ISO-Dateien unter einem Linux...
Erfahrungsaustausch durch einen Frontend-Supervisor mit 7 Jahren Praxiserfahrung
Heute teile ich die wertvollen Erfahrungen eines ...
Detaillierte Erläuterung der Fallstricke beim Mischen von MySQL-Order-By und Limit
In MySQL verwenden wir häufig order by zum Sortie...
Tutorial zur Verwendung von Hyperlink-Tags in XHTML
Hyperlink, auch „Link“ genannt. Man kann sagen, d...
Einfache Beispiele zum Erstellen gespeicherter Prozeduren, Trigger und zur Verwendung von Cursorn in Navicat (Bilder und Text)
1. Tabellen erstellen <br /> Erstellen Sie ...
So ändern Sie die SSH-Portnummer in der Centos8-Umgebung
Inhaltsverzeichnis Vorwort Start Vorwort Die Stan...
Tutorial zur manuellen Installation und Konfiguration von mysql8.0.11 winx64
Lassen Sie mich zunächst über meinen Alltag sprec...