HTML-Code einer Webseite: Erzeugung von Lauftext

In diesem Abschnitt beschreibt der Autor die speziellen Tags im HTML-Code, mit denen der Text auf der Webseite gescrollt werden kann und mit denen seine Scroll-Eigenschaften gesteuert werden können.
Erstellen von Lauftexten Durch das bisherige Lernen in diesem Kapitel konnten die Leser die Anzeige verschiedener Absatztexte sehr gut steuern, aber egal, wie sie ihn einstellen, der Text ist statisch. In diesem Abschnitt beschreibt der Autor die speziellen Tags im HTML-Code, mit denen der Text auf der Webseite gescrollt werden kann und mit denen seine Scroll-Eigenschaften gesteuert werden können.
4.3.1 Textlauf einstellen
Die Methode zum Scrollen von Text in der HTML-Technologie besteht in der Verwendung der Doppel-Tags <marquee></marquee>. Im HTML-Code kann der Text im entsprechenden Bereich gescrollt werden. Standardmäßig wird dabei kreisförmig von rechts nach links gescrollt. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie mar.htm und schreiben Sie den Code wie in Code 4.15 gezeigt.

Code 4.15 Text-Scrolling-Einstellungen: mar.htm

<html>
<Kopf>
<title>Text-Scrolling-Einstellungen</title>
</Kopf>
<Text>
<Schriftgröße="5" color="#cc0000">
Beispiel für Textlauf (Standard): <marquee>Seien Sie nett</marquee>
</font>
</body>
</html>
Geben Sie http://localhost/mar.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.15 angezeigt.

Abbildung 4.15 Festlegen der Standardform des Textlaufs Wie aus Abbildung 4.15 ersichtlich, nimmt das Tag <marquee></marquee> eine einzelne Zeile ein, wenn die Breite nicht festgelegt ist.
4.3.2 Scrollrichtung des Textes festlegen
Das Richtungsattribut des Tags <marquee></marquee> wird verwendet, um die Bildlaufrichtung des Inhalts festzulegen. Die Attributwerte sind links, rechts, oben und unten, die jeweils links, rechts, oben und unten darstellen. Beispielsweise der folgende Code:
<marquee direction="left">Sei ein freundlicher Mensch</marquee>
<marquee direction="right">Sei ein freundlicher Mensch</marquee>
<marquee direction="up">Sei ein freundlicher Mensch</marquee>
<marquee direction="down">Sei ein freundlicher Mensch</marquee>
4.3.3 Geschwindigkeit und Form des Textlaufs festlegen <br />Um den Textlauf festzulegen, verwenden Sie das Tag <marquee></marquee>. Seine Eigenschaften werden wie folgt beschrieben.
– Das Scrollamount-Attribut des Tags <marquee></marquee> wird verwendet, um die Bildlaufgeschwindigkeit des Inhalts festzulegen.
— Das Verhaltensattribut des Tags <marquee></marquee> wird verwendet, um den Inhalts-Scrollmodus festzulegen. Der Standardwert ist „scroll“, was kreisförmiges Scrollen bedeutet. Wenn der Wert „altern“ lautet, wird der Inhalt in einer Schleife vor- und zurückgescrollt. Wenn der Wert „Slide“ lautet, wird der Inhalt einmal gescrollt und dann ohne Schleife angehalten. Es gibt auch ein Loop-Attribut zum Festlegen der Anzahl der Bildlaufschleifen, die standardmäßig auf „unbegrenzt“ eingestellt ist.
– Das Scrolldelay-Attribut des Tags <marquee></marquee> wird verwendet, um das Zeitintervall für das Scrollen des Inhalts festzulegen.
— Das bgcolor-Attribut des Tags <marquee></marquee> wird verwendet, um die Hintergrundfarbe für das Scrollen des Inhalts festzulegen (ähnlich der Einstellung der Hintergrundfarbe des Textkörpers).
– Das Breitenattribut des Tags <marquee></marquee> wird verwendet, um die Breite des Hintergrunds beim Scrollen des Inhalts festzulegen.
– Das Höhenattribut des Tags <marquee></marquee> wird verwendet, um die Höhe des Hintergrunds für den Inhalts-Scroll festzulegen.
Ändern Sie die Webseitendatei mar.htm und schreiben Sie den Code wie in Code 4.16 gezeigt.

Code 4.16 Text-Scrolling-Einstellungen: mar.htm

<html>
<Kopf>
<title>Text-Scrolling-Einstellungen</title>
</Kopf>
<Text>
<Schriftgröße="3" color="#cc0000">
Beispiel für Textlauf (Standard): <marquee>Seien Sie nett</marquee>
Beispiel für Text-Scrolling (rechts): <marquee direction="right" scrolldelay="500">Seien Sie nett</marquee>
Beispiel für Text-Scrollen (nach unten, Scroll-Modus ist Slide, Geschwindigkeit ist 10): <marquee scrollamount="10" behavior="slide">Seien Sie nett</marquee>
Beispiel für Text-Scrollen (Standardrichtung, Scrollmodus ist abwechselnd, 3-malige Schleife, Geschwindigkeit ist 2): <marquee scrollamount="2" behavior="alternate" loop="3">Seien Sie nett</marquee>
Beispiel für Text-Scrollen (nach oben, Hintergrundfarbe ist #CCFF66, Hintergrundbreite und -höhe sind festgelegt): <marquee direction="up" bgcolor="#CCFF66" width="250" height="55">Seien Sie nett</marquee>
</font>
</body>
</html>
Geben Sie http://localhost/mar.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.16 angezeigt.

Abbildung 4.16 Verschiedene Formen des Text-Scrollens
Die zahlreichen Attribute von <marquee></marquee> können ganz einfach Lauftext erstellen. Im folgenden JavaScript-Lernkurs werden die Leser das dynamische Verhalten des Tags <marquee></marquee> noch genauer studieren.

<<: Ausführliche Erläuterung versteckter Felder, einer neuen Funktion von MySQL 8.0

>>: So installieren Sie FastDFS in Docker

Verbesserung der Erfahrung und gemeinsame Nutzung des interaktiven Designs von 163 Mailbox-Anmeldefeldern

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

Artikel

HTML-Code einer Webseite: Erzeugung von Lauftext

Verbesserung der Erfahrung und gemeinsame Nutzung des interaktiven Designs von 163 Mailbox-Anmeldefeldern

Informationen zu WSL-Konfigurations- und Änderungsproblemen in Docker

Detaillierte Erklärung der gemischten Vererbung in Vue

jQuery implementiert Navigationsleisteneffekt mit Erweiterungsanimation

So stellen Sie die angezeigte Seite so ein, dass Baidu ihren Snapshot nicht speichern kann

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

Optimierung der Datenbank-SQL-Anweisung

Mehrere gängige Möglichkeiten zum Bereitstellen von Tomcat-Projekten [getestet]

Analyse der Implementierungsmethoden für MySQL-Datensicherung und -Wiederherstellung

Vergleich zwischen Redis und Memcache und Auswahlmöglichkeiten

Artikel empfehlen

In diesem Artikel erfahren Sie mehr über NULL in MySQL

Einführung in 10 Hooks in React

Tutorial zur Installation von MYSQL8.0 auf Alibaba Cloud ESC

Detailliertes Tutorial zur Installation von Python 3.8.1 unter Linux

So lösen Sie das Problem, das Root-Passwort von Mysql auf dem Mac zu vergessen

Zabbix-Überwachungslösung – die neueste offizielle Version 4.4 [empfohlen]

Detaillierter Installationsprozess und Konfiguration von mysql5.7.19 zip

React Diff-Algorithmus-Quellcodeanalyse

Eine kurze Analyse des Tutorials zur Installation von MySQL 8.0.18 auf CentOS 6.8 (RPM-Methode)

Detaillierte Erklärung redundanter und doppelter Indizes in MySQL

Detaillierte Analyse von MySQL-Deadlock-Problemen

Details zu benutzerdefinierten Vue3-Anweisungen

Durch die Anpassung des mobilen Endgeräts wird px automatisch in rem umgewandelt

Befehlscodebeispiele für die Installation und Konfiguration von Docker

Detaillierte Einführung in CSS-Schrift-, Text- und Listeneigenschaften