Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > Auszeichnungssprache – Webanwendung CSS Style_HTML/Xhtml_Webseitenproduktion

Auszeichnungssprache – Webanwendung CSS Style_HTML/Xhtml_Webseitenproduktion

PHP中文网
Freigeben： 2016-05-16 16:45:36
Original
1389 Leute haben es durchsucht

Klicken Sie hier, um zur HTML-Tutorial-Spalte des Web Teaching Network zurückzukehren. Um CSS-Tutorials anzuzeigen, klicken Sie bitte hier. Oben: Auszeichnungssprache – optimierte Tags. Kapitel 10 Anwenden von CSS Im ersten Teil liegt der Schwerpunkt auf Beispielen für die Markup-Syntax. Außerdem wird untersucht, wie man CSS für das Design auf Tags anwendet und Stildetails angibt. In Kapitel 2 besprechen wir verschiedene Möglichkeiten, CSS auf Tags anzuwenden. Klicken Sie hier, um zur Spalte „Script House HTML Tutorial“ zurückzukehren. Um CSS-Tutorials anzuzeigen, klicken Sie bitte hier.
Oben: Auszeichnungssprache – optimierte Tags. Kapitel 10 Anwenden von CSS
Im ersten Teil liegt der Schwerpunkt auf Beispielen für die Markup-Syntax. Außerdem wird untersucht, wie man CSS für das Design auf Tags anwendet und Stildetails angibt. In Kapitel 2 werden wir verschiedene Möglichkeiten zur Anwendung von CSS besprechen Ein Dokument, eine Website oder sogar ein einzelnes Tag. Darüber hinaus besprechen wir, wie man CSS-Inhalte aus früheren Browserversionen ausblendet, sodass wir erweiterte Techniken verwenden können, ohne dass sich dies auf die vom Gerät gelesene Markup-Struktur auswirkt.
In der Einheit „Technische Erweiterung“ am Ende des Kapitels stellen wir vor, wie Sie Schriftarten und Farben wechseln und mehrere Designs erstellen können, ohne Skripte schreiben zu müssen – und dabei Stylesheets zu ersetzen. Wie wende ich CSS auf Dokumente an? Lassen Sie uns nun vier verschiedene Methoden zur Anwendung von CSS auf Dokumente untersuchen. Je nach Situation sind alle vier Methoden die beste Wahl Hier werden die legale XHTML 1.0-Übergangssyntaxstruktur, das -Tag und die -Konfiguration verwendet. Methode A:


This The Der Ansatz ist auch zu einem eingebetteten Stylesheet geworden, mit dem Sie alle CSS-Deklarationen direkt in die (X)HTML-Datei schreiben können. Der

mit Methoden Ähnlich wie bei B können Sie mit @import CSS-Definitionen aus externen Dateien mit relativen Pfaden (wie im Beispiel oben) oder absoluten Pfaden importieren.
Methode C hat die gleichen Vorteile wie die Verwendung des -Tags Das Ändern und Aktualisieren eines einzelnen Dokuments kann die gesamte Website ändern und kann schnell und einfach durchgeführt werden. Externe Stylesheets werden vom Browser zwischengespeichert, wodurch Downloadzeit für alle Seiten gespart wird, die dasselbe Stylesheet importieren . Verstecken und suchen
Der Hauptvorteil der Verwendung von Methode C besteht darin, dass Netscape-Versionen unter 4. Die CSS-Syntax verarbeitet Designdetails wie das Layout, sodass die neuesten Browser, die damit umgehen können, diese anzeigen können, während ältere Browser diese Syntax auch ignorieren können.
Das Problem Bei Netscape 4.x gilt: Es wird angenommen, dass es CSS unterstützen kann. Es ist nur so gut wie der Browser, der es tatsächlich unterstützt. Daher ist der Markup-Code von der Anzeige getrennt und stellt Layoutdetails und andere Stile bereit Unterstützte Browser können die angezeigte Struktur des Inhalts problemlos lesen, verarbeiten jedoch nicht die für sie ausgeblendete erweiterte CSS-Regel. Stile öffnen, Stile schließen
Schauen Sie sich die Abbildungen 10-1 und 10-2 an und vergleichen Sie dies. Dies ist meine persönliche Website, die vollständiges CSS verwendet und dann den CSS-Anzeigeeffekt deaktiviert (er sollte dem Anzeigeeffekt von sehr nahe kommen). (der alte Browser) Effekt), die Struktur ohne die Verwendung von CSS ist immer noch sehr offensichtlich und für jeden immer noch leicht zu lesen und zu verwenden. Wenn wir das zum Anzeigen des Layouts erforderliche CSS nicht ausblenden, erhalten Benutzer älterer Browser möglicherweise eine Durcheinander, das schwer zu lesen ist.

Abbildung 10-1 Meine persönliche Website, mit CSS

Abbildung 10-2 Dieselbe Seite, CSS entfernen, alt Browser können es ändern. Wird wie folgt angezeigt Kombination von Methode B und Methode C zum Anwenden mehrerer Stylesheets
Manchmal kann es nützlich sein, viele Stylesheets in ein Dokument einzuführen. Beispielsweise können Sie alle Layoutregeln in einem Dokument zusammenfassen und dort die Schriftarteinstellungen festlegen Ein anderes Dokument kann die Pflege einer großen Anzahl von Regeln für große, komplexe Designs erleichtern. Chamäleoneffekt
Bei der Erstellung der Website des Fast Company-Magazins möchte ich die Farbe der Website jeden Monat ändern, um sie an das Titelbild des aktuellen Magazins anzupassen. Um die regelmäßige Änderungsarbeit zu vereinfachen, habe ich alle Farb- und Farbänderungen zentralisiert. Fügen Sie verwandte CSS-Regeln in ein Dokument ein und fügen Sie andere Regeln, die nicht jeden Monat geändert werden, in ein anderes Dokument ein.
Es wird einfacher und schneller sein, jeden Monat alle Farben abzudecken, ohne Hunderte anderer Regeln hinzufügen zu müssen Suchen Sie im Design langsam nach Inhalten, die geändert werden müssen. Solange dieses Dokument geändert wird, ändert sich sofort die Farbe der gesamten Website. Vorgehensweise
Um Methode B und Methode C zu kombinieren, um mehrere Stylesheets einzuführen, verwenden Sie das -Tag im , um auf das Haupt-CSS-Dokument zu verweisen Demonstration der Methode B, Link zu „styles.css“.
Der Inhalt von „styles.css“ enthält lediglich ein paar @import-Regeln, um andere erforderliche CSS-Dateien einzuführen.
Wenn Sie beispielsweise drei Stylesheets einführen möchten, eins für Layout und eines für Layout Definieren Sie die Schriftart und definieren Sie die Farbe, dann könnte der Inhalt von style.css so aussehen:
/*Alte Browser interpretieren diese Importregeln nicht*/
@import url ("layout .css");
@import url("fonts.css");
@import url("colors.css");
Auf diese Weise kann die gleiche URL auf der gesamten Website verwendet werden. Das -Tag verweist nur auf die Datei „styles.css“. Dieses Dokument kann weiterhin andere Stylesheets mithilfe der @import-Regel importieren Eine Auswirkung auf die gesamte Website.
Dadurch ist das Aktualisieren und Ersetzen von CSS sehr einfach geworden. Wenn Sie beispielsweise unterwegs plötzlich CSS in 4 Dateien aufteilen möchten, müssen Sie nur die @import-Regel dieses Dokuments ändern ohne dass der gesamte XHTML-Markup-Quellcode geändert werden muss. Lo-Fi- und Hi-Fi-Stile
Wenn Sie die @import-Regel der Methode C verwenden, um CSS vor alten Browsern zu verbergen, gibt es einen weiteren Trick, der darin besteht, den Kaskadeneffekt von CSS zu nutzen, um alten Browsern Methode A oder bereitzustellen Methode B. Lo-Fi-Effekte werden sowohl von alten als auch von neuesten Browsern unterstützt. Verwenden Sie dann @import, um erweiterte Effekte für andere unterstützte Browser bereitzustellen.
Alte Browser erhalten nur die Inhalte, die sie unterstützen können, während neuere nur die Inhalte erhalten der Inhalt, den sie unterstützen können. Der Browser erhält alle Stile, die Sie verwenden möchten.
Dann sehen wir uns an, wie der Code für diese Technik aussieht:



Anwenden von CSS




Hier sollte lofi.css grundlegende CSS-Regeln wie Linkfarbe und Schriftgröße enthalten, während hifi.css erweiterte Regeln wie Layout, Positionierung, Hintergrundbilder usw. enthält.
Wir können Lo- gleichzeitig senden und Hi-Fi-Versionen des Stils, ohne dass auf der Serverseite ein Skript geschrieben oder die Browserversion in irgendeiner Weise identifiziert werden muss. Die Reihenfolge ist wichtig
Die Reihenfolge, in der die Tags im Markup-Quellcode angegeben werden, ist sehr wichtig
Da beispielsweise die meisten aktuellen Browser beide Ansätze unterstützen, werden alle Stylesheets heruntergeladen und alle darin enthaltenen Stile werden zu diesem Zeitpunkt durch die Stilregeln in hifi.css überschrieben .css Was ist der Grund für die Angabe von Stilen für dasselbe Tag? Weil im Tag-Quellcode hifi.css nach lofi.css erscheint.
Alte Browser ignorieren hifi.css, da die @import-Regel nicht unterstützt wird Sie verwenden nur durch lofi.css definierte Stile. Nutzen Sie die Kaskadenfunktion
Nutzen Sie die CSS-Kaskadenfunktion auf verschiedene Weise. Wenn Sie beispielsweise davon ausgehen, dass Ihre gesamte Website ein externes CSS für Layout, Positionierung, Einstellung von Schriftarten, Farben usw. verwendet, sollten Sie dies auf jeder Seite tun die @import-Methode, um diese Regeln für ältere Browser auszublenden.
Wenn es eine Seite auf der Website gibt, deren Layout- und Positionierungseinstellungen Sie teilen möchten, aber die Schriftart oder Farbe anpassen müssen (mit anderen Seiten auf der Website). (verschiedene Seiten) Auf dieser Seite kann noch das Haupt-CSS-Dokument eingeführt werden. Nach Abschluss der Referenz wird dann auf das zweite CSS-Dokument verwiesen, das einen speziellen Stil für diese Seite definiert zum Überschreiben der Stilregeln, die in der ersten CSS-Datei für dasselbe Tag angegeben sind. Schauen wir uns ein Beispiel an, in dem „master.css“ die gesamte Website-Struktur, Schriftarten und andere CSS-Regeln enthält spezifische Seite, wobei die Stileinstellungen mehrerer spezieller Tags überschrieben werden.
"http:// www.w3 .org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">


CSS anwenden


Aufgrund von benutzerdefiniertem CSS an zweiter Stelle im Markup-Quellcode, sodass die für dasselbe Tag angegebenen Stile den in master.css angegebenen Inhalt überschreiben. Angenommen, wir benötigen in main.css eine rote Serifenschrift , während

eine blaue Serifenschrift verwendet.

h1 {
Schriftfamilie: Georgia, Serif;
Farbe: Rot;
}
h2 {
Schriftfamilie: Georgia, Serif;
Farbe: Blau;
}

Auf einer bestimmten Seite möchten wir nur den Stil der

-Tag-Einstellung ändern und den Stil erben von

. Dann müssen wir in custom.css nur einen neuen Stil für

deklarieren.


h1 {
Schriftfamilie: Verdana, serifenlos;
Farbe: orange;
}

Diese Anweisung überschreibt die Anweisung in „master.css“ (da „custom.css“ danach eingeführt wird, wenn die Seite „master.css“ zuerst importiert). , das

-Tag verwendet die orangefarbene Verdana-Schriftart, während das

weiterhin die blaue Serifenschrift verwendet, da die letztere Anweisung in master.css nicht überschrieben wurde.

Die Kaskadierung Die Funktion von CSS ist ein großartiges Tool zum Teilen gängiger Stile, mit dem Sie nur die Regeln überschreiben können, die geändert werden müssen.

Methode D: Inline-Stile

Dies ist ein Titel


Dies ist die vierte CSS-Anwendungsmethode, auf die wir gestoßen sind - Inline-Stil, fast jede Beschriftung kann mit Eigenschaften versehen werden, Damit können Sie CSS-Stilregeln direkt auf Tags anwenden, wie im obigen Beispiel.
Da Inline-Stile die unterste Ebene des Stapels sind, überschreiben sie alle externen Stildeklarationen sowie Regeln innerhalb des Style>-Tags.
Dies ist eine einfache Möglichkeit, überall auf der Seite Stile hinzuzufügen, die jedoch mit einem Preis verbunden ist. Stile sind an Tags gebunden
Wenn Sie sich beim Formulieren von Stilen für die Seite zu sehr auf Methode D verlassen, können Sie den Inhalt und die Präsentation nicht trennen. Wenn Sie ihn erneut ändern, müssen Sie den Quellcode tief markieren und einfügen Das CSS in der Datei ist viel einfacher zu pflegen.
Der Missbrauch von Methode D unterscheidet sich nicht von der Verwendung von Anzeigeeffekt-Tags wie , um den Markenquellcode zu verunreinigen. Mit Vorsicht verwenden
In realen Situationen gibt es natürlich die Möglichkeit, Inline-Stile zu verwenden, wenn Sie der Seite Stile hinzufügen müssen, aber nicht auf externe Dateien zugreifen oder den nicht ändern können, kann dies Ihr Leben retten , oder den Stil vorübergehend anwenden, wird er auch verwendet, wenn er nicht mit anderen Tags geteilt werden soll.
Wenn es beispielsweise eine Seite auf der Website gibt, die einen Wohltätigkeitsverkauf ankündigt, wird sie später entfernt , und Sie möchten einen einzigartigen Satz von Tags für diese Seite entwerfen, dann betten Sie diese Stilregeln vielleicht in den Tag ein, anstatt sie dem permanenten Stylesheet hinzuzufügen.
Tun Sie es jetzt, aber beachten Sie, dass diese Stile dies nicht können einfach geändert werden oder sich über die Seite erstrecken, um die gesamte Website zu nutzen.
                                                                        #P# Zusammenfassung
Wir haben uns vier verschiedene Möglichkeiten angesehen, CSS auf Markup-Inhalte anzuwenden, und festgestellt, dass jede Methode ihre eigenen Vorteile für den Umgang mit besonderen Situationen hat. Sehen wir uns jede Methode sowie ihre Vor- und Nachteile an.
Methode A: Stile müssen im platzierte Stile können vor älteren Browsern nicht vollständig ausgeblendet werden. Geeignet für die Verwendung in der Test- und Entwicklungsphase. Markup-Inhalt und -Stil können gemeinsam im selben Dokument geändert werden.
Methode B: Erstellen Sie eine Reihe gemeinsamer Stile für viele Seiten oder sogar für die gesamte Website. Das externe Stylesheet wird nur einmal heruntergeladen und vom Browser zwischengespeichert, um bei wiederholten Besuchen Downloadzeit zu sparen. Durch das Zusammenfassen gemeinsamer Stile in einem Dokument können Designänderungen leichter verwaltet werden. Mit dem -Tag referenzierte Stylesheets können in älteren Browsern nicht ausgeblendet werden.
Methode C: Erstellen Sie eine Reihe gemeinsamer Stile für viele Seiten oder sogar für die gesamte Website. Das externe Stylesheet wird nur einmal heruntergeladen und vom Browser zwischengespeichert, um bei wiederholten Besuchen Downloadzeit zu sparen. Durch das Zusammenfassen gemeinsamer Stile in einem Dokument können Designänderungen leichter verwaltet werden. @import kann Stilinhalte vor Netscape 4.x-Browsern verbergen.
Methode D: Der Stil wird inline definiert, sodass der Anzeigeeffekt zu nah am markierten Inhalt liegt. Stildefinitionen können nicht mit anderen Tags, dem gesamten Dokument oder sogar der gesamten Site geteilt werden. Die Wartung ist sehr mühsam und nicht effizient. Geeignet für vorübergehende Probleme, wenn auf externe Dateien nicht zugegriffen werden kann oder wenn der Seitenkopf> geändert wird.
Da wir nun alle Möglichkeiten gesehen haben, Stile mit der Tag-Syntax zu verknüpfen, gehen wir noch einen Schritt weiter und schauen uns das Ersetzen von Stylesheets in „Erweiterungen“ an.
                                                                        #P# Kompetenzerweiterung
In dieser Einheit tauchen wir etwas tiefer in die Welt der Stylesheets ein und schauen uns Ersatz-Stylesheets (ein Markup-Quellcode mit vielen Stylesheets) an und wie wir Benutzern mehr Kontrolle und Auswahl geben können, was sie möchten Verwenden Sie ein Stylesheet. Stylesheets ersetzen
Zu Beginn dieses Kapitels haben wir vier verschiedene Möglichkeiten zur Anwendung von CSS auf eine Seite besprochen und auch die Vorteile der Verknüpfung und des Imports externer Stylesheets aufgezeigt. Wir können noch einen Schritt weiter gehen und Stylesheets referenzieren Benutzer haben die Möglichkeit, eine größere Schriftart, ein anderes Farbthema oder sogar ein anderes Seitenlayout auszuwählen.
Wir können das -Tag verwenden, um auf viele Stile zu verweisen, um diese Funktion auszudrücken (sehr ähnlich der ursprünglichen Methode B). Kapitel), aber geben Sie „alternatives Stylesheet“ für das rel-Attribut an.
Wenn Sie beispielsweise möchten, dass Benutzer zwei zusätzliche Schriftgrößen auswählen können, können Sie wie gewohnt auf das Theme-Stylesheet verlinken und dann auf den Ersatz verlinken Stylesheet.



Anwenden von CSS</title> ;<br/><strong class="bold"><link rel="stylesheet" type="text/css" href="default.css" </strong><strong class="bold">title="default"/><br><strong class="bold"><link rel="alternate stylesheet" type="text/css" </strong><strong class="bold">href="largetext.css" title="large" /></strong><br> <strong class="bold">< link rel="alternate stylesheet" type="text/css"</strong><br/>href="largertext.css" <strong class="bold">title="larger"/></strong><br>< ;/head></blockquote> <br>Sie sollten bemerkt haben, dass wir nach der Angabe von „alternate stylesheet“ für das rel-Attribut der letzten beiden <link> auch das title-Attribut hinzugefügt haben, um einen Namen für das Stylesheet anzugeben, damit Sie können es später auswählen.<br>Das „Standard“-Stylesheet wird auf jeden Fall im Browser gestartet und der Browser lädt die Dateien „large.css“ und „larger.css“ herunter. Sofern es jedoch nicht auf andere Weise gestartet wird (wird später erläutert), verwendet der Browser den Definitionsinhalt nicht Das durch das rel-Attribut festgelegte „alternative Stylesheet“ soll verhindern, dass diese Stylesheets sofort nach dem Laden der Seite „aktiviert“ und dem Tag hinzugefügt werden.<br>Wenn wir diese vor älteren Browsern wie Netscape verbergen möchten 4.x Um ein Stylesheet zu ersetzen, müssen Sie die @import-Methode nicht verwenden. Netscape unterstützt den „alternativen Stylesheet“-Wert des rel-Attributs nicht, daher werden diese Stile nicht wirksam. Drei Schriftgrößen <br> Schauen wir uns an, was in diesen Ersatz-Stylesheets enthalten ist. Wenn wir beispielsweise möchten, dass Benutzer die Schriftgröße der Seite vergrößern, können wir im Ersatz-Stylesheet eine größere Schriftart angeben Überschreiben Sie die Regeln in default.css nach dem Start. <br> Dies ist besonders praktisch, wenn wir die Schriftgröße in Pixeln angeben, da einige Browser es Benutzern nicht erlauben, solche Schriftarten zu vergrößern, wenn die Größe auf „visuell“ eingestellt ist Für Leser schwer lesbar, können Sie ein Ersatz-Stylesheet verwenden, um die Funktion zum Vergrößern der Schriftart bereitzustellen. <br> Daher können Sie in default.css die grundlegende Schriftgröße für die Website festlegen: <blockquote style="MARGIN-RIGHT: 0px"> <br>body {<br>font-size: 12px;<br> }</blockquote> <br>Dann überschreiben Sie den Standardwert mit einer etwas größeren Schriftgröße in large.css:<blockquote style="MARGIN-RIGHT: 0px"> <br>body { Schriftgröße: <strong class="bold">16px</strong>; }</blockquote> <br>Vergrößern Sie es in ähnlicher Weise etwas weiter in „larger.css:“<blockquote style="MARGIN-RIGHT: 0px"> <br>body { Schriftgröße: <strong class="bold">20px</strong>; }</blockquote> <br>Bei Aktivierung (ich schwöre, ich werde das bald erklären) überschreiben die Stylesheets „large.css“ und „larger.css“ die Standardstilregeln und vergrößern die Schriftgröße der Seite.</h5> <h5 class="literallayout">Immer noch kaskadierend <br>Es gibt einen wichtigen Punkt, der beachtet werden muss: Der Kaskadeneffekt von CSS ist immer noch derselbe wie bei anderen Stylesheets, das heißt, es überschreibt die allgemeinen Regeln Geben Sie das Layout und die Positionierung in default.css an. Solche Regeln. Wenn das Proxy-Stylesheet diese Regeln nicht wiederholt, bleiben diese Regeln weiterhin wirksam. Ersatz-Stylesheets zum Laufen bringen <br> Jetzt haben wir Ersatz-Stylesheets parat. Leider verfügen nur sehr wenige Browser über eine integrierte Ersatz-Stylesheets mit dieser Funktion. <br> Wenn ein Ersatz-Stylesheet vorhanden ist, erscheint in der unteren linken Ecke des Browserfensters ein kleines Symbol, um es über das Menü „Ersatz-Stylesheets“ zu starten. 3).<br><img class="" alt="" src="https://img.php.cn/upload/article/000/000/009/c7e0b6649d72f157492ed27a6cfae269-2.jpg">Abbildung 10-3 Mozillas Ersatz-Stylesheet-Liste.<br>Ich hoffe, dass mehr Browserhersteller ähnliche Funktionen implementieren können, aber bis dahin gibt es noch eine andere Möglichkeit, Stylesheets zu wechseln und zu ersetzen – Sie können sogar Nutzen Sie die Magie von Cookies, um die Entscheidungen des Benutzers zu speichern.<br>Paul Sowden hat in A List Apart ein seltenes Tutorial mit dem Titel „Alternative Style: Working With Alternate Style Sheets“ (//m.sbmmt.com/) geschrieben In diesem Artikel erklärt er, wie man das Ersatz-Stylesheet mit einem Stück JavaScript im Browser startet und schließt. <br> Die Wechselaktion wird durch den Super auf der Seite gesteuert. Nachdem der Link abgeschlossen ist, kann ein beliebiges Stylesheet ausgewählt werden Dieses JavaScript setzt Cookies, um die letzte Auswahl des Benutzers aufzuzeichnen, sodass beim nächsten Durchsuchen der Website zusätzlich zum Standard-Stylesheet auch das richtige Stylesheet aktiviert wird > Beim Schreiben dieses Inhalts bietet meine persönliche Website beispielsweise drei verschiedene Farbanpassungsmethoden, die durch Klicken auf das erste Symbol als Skriptarbeit von Paul Sowden bezeichnet werden können Symbole sind zwei Ersatz-Stylesheets, die unterschiedliche Farbanpassungsmethoden bereitstellen (Abbildung 10-4) Abbildung 10-4 Klicken Sie auf das Symbol, um das Ersatz-Stylesheet zu starten. <br> Da JavaScript auf der Benutzerseite ausgeführt wird, Die Umschaltaktion wird sofort wirksam, ohne dass die gesamte Seite erneut gelesen werden muss, und die Umschaltgeschwindigkeit ist sehr hoch. <br> Das vollständige JavaScript-Programm finden Sie unter Paul Sowdens A List Apart. Laden Sie den Artikel herunter (http://www. php.cn/). Sie können nicht nur die Schriftgröße anpassen <img class="" alt="" src="https://img.php.cn/upload/article/000/000/009/c7e0b6649d72f157492ed27a6cfae269-3.jpg"> Indem Sie mit dem Kaskadeneffekt experimentieren, bestimmte Regeln in das Ersatz-Stylesheet einfügen und einige der Standardregeln überschreiben, können Sie einige sehr interessante interaktive Effekte auf der Website erstellen. Verwenden Sie einfach A Skript und ein paar CSS-Regeln können selbst bei geringer Bandbreite große Auswirkungen haben. Die Freundlichkeit von DOM <br> Wir müssen uns bei einem anderen W3C-Standard bedanken, der es uns ermöglicht, Stylesheets durch Skriptzugriff zu ersetzen. Das sogenannte DOM oder Document Object Model ist eigentlich ... Nun, werfen wir einen Blick auf W3C How to erklären: <br> Das Dokumentobjektmodell ist eine plattform- und sprachunabhängige Schnittstelle. Es ermöglicht hauptsächlich Programmen und Skripten den dynamischen Zugriff und die Änderung des Inhalts, der Struktur und des Stils von Dateien. Außerdem kann es Dateien weiterverarbeiten Die Ergebnisse werden in die angezeigte Seite integriert. Dies ist das Konzept von W3C und anderen DOM-Ressourcen im InternetKommt Ihnen bekannt vor, nicht wahr? Das ist genau das, was das Stilwechselskript tut, indem es dynamisch auf die Stileinstellungen des Dokuments zugreift und diese aktualisiert, wenn Sie die W3C-Standards befolgen, sodass Entwickler Skripte schreiben können, die die etablierten verwenden können Methode für den Zugriff auf Tags des Markup-Quellcodes. Wenn wir hart daran arbeiten, standardkonformen Markup-Quellcode zu schreiben, können wir sicherstellen, dass es in Zukunft einfacher wird, Skripte zu schreiben, die dem Standard-DOM entsprechen, und das Benutzererlebnis beim Durchsuchen dieser zu verbessern <br> Stilwechsel-Skript Wir haben beim Schreiben von Skripten für das DOM nur an der Oberfläche gekratzt, aber es ist immer noch ein Paradebeispiel für die großen Vorteile, die durch das Schreiben von Webseiten nach Standards erzielt werden können. Fazit <br> In diesem Kapitel haben wir verschiedene Möglichkeiten besprochen, CSS auf Tags, Dokumente und ganze Websites anzuwenden. Außerdem haben wir gelernt, wie man CSS vor älteren Browsern ausblendet und wie man auf mehrere Stylesheets verweist Hi-Fi-Stylesheets für Browser mit unterschiedlichen Unterstützungsstufen, ohne dass Skripte geschrieben oder Browsertypen auf der Serverseite erkannt werden müssen <br> Schließlich habe ich gelernt, wie man Stylesheets mithilfe von DOM ersetzt. Durch das Schreiben von JavaScript können Benutzer die Vorteile von Dynamic nutzen Wechseln von Stylesheets, sodass Benutzer Schriftgröße, Farbe und sogar Layout auswählen können.<br>Abschließend hoffe ich, dass diese Tipps Ihnen dabei helfen, reibungslos mit dem Entwerfen von Stilen zu beginnen!</h5> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Verwandte Etiketten：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/de/search?word=&amp;quot" target="_blank">&amp;quot</a> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/de/search?word=css" target="_blank">css</a> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/de/search?word=应用" target="_blank">应用</a> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/de/search?word=标记" target="_blank">标记</a> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/de/search?word=样式" target="_blank">样式</a> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/de/search?word=浏览器" target="_blank">浏览器</a> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/de/search?word=网页" target="_blank">网页</a> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/de/search?word=语言" target="_blank">语言</a> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/de/search?word=页面" target="_blank">页面</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">Quelle：php.cn</div> </div> <div class="wzconOtherwz"> <a href="//m.sbmmt.com/de/faq/12681.html" title="Nützliche Codes für die Webseitenproduktion_HTML/Xhtml_Webseitenproduktion"> <span>Vorheriger Artikel：Nützliche Codes für die Webseitenproduktion_HTML/Xhtml_Webseitenproduktion</span> </a> <a href="//m.sbmmt.com/de/faq/12685.html" title="Vorschau auf neue Funktionen der XHTML 2.0_HTML/Xhtml_Webseitenproduktion"> <span>Nächster Artikel：Vorschau auf neue Funktionen der XHTML 2.0_HTML/Xhtml_Webseitenproduktion</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Erklärung dieser Website</div> <div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzconZzwz"> <div class="wzconZzwztitle">Neueste Artikel des Autors</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/de/faq/1796717408.html">Welche Art von Windows 10 ist am besten?</a> </div> <div>2024-12-12 11:03:15</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/de/faq/1796717406.html">Wo ist der Windows 10 Media Player?</a> </div> <div>2024-12-12 11:01:15</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/de/faq/1796717401.html">Welche Windows 10-Version ist Lite?</a> </div> <div>2024-12-12 10:59:13</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/de/faq/1796717399.html">Wo ist der Windows 10-Lizenzschlüssel?</a> </div> <div>2024-12-12 10:58:16</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/de/faq/1796717395.html">Wo befindet sich der Windows 10-Hintergrund?</a> </div> <div>2024-12-12 10:57:14</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/de/faq/1796717393.html">Welche Windows 10-Version ist die leichteste?</a> </div> <div>2024-12-12 10:56:12</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/de/faq/1796717391.html">Welche Windows 10 Zip-Datei ist die beste?</a> </div> <div>2024-12-12 10:55:13</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/de/faq/1796717390.html">Welches Windows 10 Zip ist das Beste?</a> </div> <div>2024-12-12 10:54:17</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/de/faq/1796717387.html">Welche Windows 10-Version</a> </div> <div>2024-12-12 10:53:16</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/de/faq/1796717383.html">Wo ist das Windows 10-Hintergrundbild?</a> </div> <div>2024-12-12 10:51:16</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Aktuelle Ausgaben</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/de/wenda/176410.html" target="_blank" title="So zeigen Sie die mobile Version von Google Chrome an" class="wdcdcTitle">So zeigen Sie die mobile Version von Google Chrome an</a> <a href="//m.sbmmt.com/de/wenda/176410.html" class="wdcdcCons">Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 2024-04-23 00:22:19</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>9</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1588</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/de/wenda/176399.html" target="_blank" title="Verschieben Sie den Inhalt nach links, indem Sie die Eigenschaft „Width' hinzufügen" class="wdcdcTitle">Verschieben Sie den Inhalt nach links, indem Sie die Eigenschaft „Width' hinzufügen</a> <a href="//m.sbmmt.com/de/wenda/176399.html" class="wdcdcCons">Ich habe dem Körper Ränder gegeben. main {linker Rand: 200px; rechter Rand: 200px; Textaus...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 2024-04-06 22:01:35</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>3</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>816</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/de/wenda/176397.html" target="_blank" title="Welches Format haben die Variablen im Rückgabewert?" class="wdcdcTitle">Welches Format haben die Variablen im Rückgabewert?</a> <a href="//m.sbmmt.com/de/wenda/176397.html" class="wdcdcCons">Ich bin ein PHP-Neuling. Ich habe einen Code gefunden: if($x<time()){return[false,'erro...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 2024-04-06 21:55:20</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>778</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/de/wenda/176395.html" target="_blank" title="Wie löst man das Rendern (mit Filter und Paginierung) für die Sortiermethode in React aus?" class="wdcdcTitle">Wie löst man das Rendern (mit Filter und Paginierung) für die Sortiermethode in React aus?</a> <a href="//m.sbmmt.com/de/wenda/176395.html" class="wdcdcCons">Hier ist meine Sort.js-Stilkomponente: <SortWrapper><SortText>SortBy</SortT...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 2024-04-06 21:28:37</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2257</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/de/wenda/176392.html" target="_blank" title="Regulärer Ausdruck zum Abgleichen von Wörtern" class="wdcdcTitle">Regulärer Ausdruck zum Abgleichen von Wörtern</a> <a href="//m.sbmmt.com/de/wenda/176392.html" class="wdcdcCons">Ich habe ein Skript, in dem ich versuche, neue Jobnamen mit vorhandenen Jobnamen in einer ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Aus 2024-04-06 21:24:04</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>606</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>verwandte Themen</div> <a href="//m.sbmmt.com/de/faq/zt" target="_blank">Mehr> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/de/faq/cssys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214431291616.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="CSS" /> </a> <a target="_blank" href="//m.sbmmt.com/de/faq/cssys" class="title-a-spanl" title="CSS"><span>CSS</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/de/faq/cssjz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214284035010.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="CSS-zentriert" /> </a> <a target="_blank" href="//m.sbmmt.com/de/faq/cssjz" class="title-a-spanl" title="CSS-zentriert"><span>CSS-zentriert</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/de/faq/dnywdllqdbkwy"><img src="https://img.php.cn/upload/subject/202407/22/2024072214282764498.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Der Computer hat Internetzugang, aber der Browser kann die Webseite nicht öffnen" /> </a> <a target="_blank" href="//m.sbmmt.com/de/faq/dnywdllqdbkwy" class="title-a-spanl" title="Der Computer hat Internetzugang, aber der Browser kann die Webseite nicht öffnen"><span>Der Computer hat Internetzugang, aber der Browser kann die Webseite nicht öffnen</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/de/faq/cssrhcrtp"><img src="https://img.php.cn/upload/subject/202407/22/2024072214282555686.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="So fügen Sie Bilder in CSS ein" /> </a> <a target="_blank" href="//m.sbmmt.com/de/faq/cssrhcrtp" class="title-a-spanl" title="So fügen Sie Bilder in CSS ein"><span>So fügen Sie Bilder in CSS ein</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/de/faq/htmlwyzz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214275948120.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="HTML-Webseitenproduktion" /> </a> <a target="_blank" href="//m.sbmmt.com/de/faq/htmlwyzz" class="title-a-spanl" title="HTML-Webseitenproduktion"><span>HTML-Webseitenproduktion</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/de/faq/cssccxsslh"><img src="https://img.php.cn/upload/subject/202407/22/2024072214275251415.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="CSS außerhalb der Anzeige ..." /> </a> <a target="_blank" href="//m.sbmmt.com/de/faq/cssccxsslh" class="title-a-spanl" title="CSS außerhalb der Anzeige ..."><span>CSS außerhalb der Anzeige ...</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/de/faq/llqssmys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214231371831.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Was bedeutet Browser" /> </a> <a target="_blank" href="//m.sbmmt.com/de/faq/llqssmys" class="title-a-spanl" title="Was bedeutet Browser"><span>Was bedeutet Browser</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/de/faq/cssztys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214211647525.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="CSS-Schriftfarbe" /> </a> <a target="_blank" href="//m.sbmmt.com/de/faq/cssztys" class="title-a-spanl" title="CSS-Schriftfarbe"><span>CSS-Schriftfarbe</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzrOne"> <div class="wzroTitle">Beliebte Empfehlungen</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Was bedeutet URL?" href="//m.sbmmt.com/de/faq/418772.html">Was bedeutet URL?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Was bedeutet DOM?" href="//m.sbmmt.com/de/faq/414303.html">Was bedeutet DOM?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="So ändern Sie die Bildgröße" href="//m.sbmmt.com/de/faq/414252.html">So ändern Sie die Bildgröße</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="So machen Sie die Schriftart in HTML fett" href="//m.sbmmt.com/de/faq/414520.html">So machen Sie die Schriftart in HTML fett</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="So legen Sie die Größe von HTML-Bildern fest" href="//m.sbmmt.com/de/faq/475145.html">So legen Sie die Größe von HTML-Bildern fest</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Beliebte Tutorials</div> <a target="_blank" href="//m.sbmmt.com/de/course.html">Mehr> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Verwandte Tutorials <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Beliebte Empfehlungen<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Aktuelle Kurse<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="//m.sbmmt.com/de/course/812.html" title="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)" href="//m.sbmmt.com/de/course/812.html">Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)</a> <div class="wzrthreerb"> <div>1422714 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/74.html" title="PHP-Einführungs-Tutorial eins: Lernen Sie PHP in einer Woche" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP-Einführungs-Tutorial eins: Lernen Sie PHP in einer Woche"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP-Einführungs-Tutorial eins: Lernen Sie PHP in einer Woche" href="//m.sbmmt.com/de/course/74.html">PHP-Einführungs-Tutorial eins: Lernen Sie PHP in einer Woche</a> <div class="wzrthreerb"> <div>4267677 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/286.html" title="JAVA-Video-Tutorial für Anfänger" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA-Video-Tutorial für Anfänger"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA-Video-Tutorial für Anfänger" href="//m.sbmmt.com/de/course/286.html">JAVA-Video-Tutorial für Anfänger</a> <div class="wzrthreerb"> <div>2531372 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/504.html" title="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python" href="//m.sbmmt.com/de/course/504.html">Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python</a> <div class="wzrthreerb"> <div>507114 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/2.html" title="PHP Zero-basiertes Einführungs-Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP Zero-basiertes Einführungs-Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP Zero-basiertes Einführungs-Tutorial" href="//m.sbmmt.com/de/course/2.html">PHP Zero-basiertes Einführungs-Tutorial</a> <div class="wzrthreerb"> <div>862210 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="//m.sbmmt.com/de/course/812.html" title="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)" href="//m.sbmmt.com/de/course/812.html">Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)</a> <div class="wzrthreerb"> <div >1422714 Lernzeiten</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/286.html" title="JAVA-Video-Tutorial für Anfänger" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA-Video-Tutorial für Anfänger"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA-Video-Tutorial für Anfänger" href="//m.sbmmt.com/de/course/286.html">JAVA-Video-Tutorial für Anfänger</a> <div class="wzrthreerb"> <div >2531372 Lernzeiten</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/504.html" title="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python" href="//m.sbmmt.com/de/course/504.html">Das nullbasierte Einführungsvideo-Tutorial von Little Turtle zum Erlernen von Python</a> <div class="wzrthreerb"> <div >507114 Lernzeiten</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/901.html" title="Kurze Einführung in die Web-Frontend-Entwicklung" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Kurze Einführung in die Web-Frontend-Entwicklung"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Kurze Einführung in die Web-Frontend-Entwicklung" href="//m.sbmmt.com/de/course/901.html">Kurze Einführung in die Web-Frontend-Entwicklung</a> <div class="wzrthreerb"> <div >215765 Lernzeiten</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/234.html" title="Meistern Sie PS-Video-Tutorials von Grund auf" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Meistern Sie PS-Video-Tutorials von Grund auf"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Meistern Sie PS-Video-Tutorials von Grund auf" href="//m.sbmmt.com/de/course/234.html">Meistern Sie PS-Video-Tutorials von Grund auf</a> <div class="wzrthreerb"> <div >889194 Lernzeiten</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="//m.sbmmt.com/de/course/1648.html" title="[Web-Frontend] Node.js-Schnellstart" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web-Frontend] Node.js-Schnellstart"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web-Frontend] Node.js-Schnellstart" href="//m.sbmmt.com/de/course/1648.html">[Web-Frontend] Node.js-Schnellstart</a> <div class="wzrthreerb"> <div >7401 Lernzeiten</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/1647.html" title="Vollständige Sammlung ausländischer Full-Stack-Kurse zur Webentwicklung" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Vollständige Sammlung ausländischer Full-Stack-Kurse zur Webentwicklung"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Vollständige Sammlung ausländischer Full-Stack-Kurse zur Webentwicklung" href="//m.sbmmt.com/de/course/1647.html">Vollständige Sammlung ausländischer Full-Stack-Kurse zur Webentwicklung</a> <div class="wzrthreerb"> <div >5788 Lernzeiten</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/1646.html" title="Gehen Sie zur praktischen Anwendung von GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Gehen Sie zur praktischen Anwendung von GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Gehen Sie zur praktischen Anwendung von GraphQL" href="//m.sbmmt.com/de/course/1646.html">Gehen Sie zur praktischen Anwendung von GraphQL</a> <div class="wzrthreerb"> <div >4887 Lernzeiten</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/1645.html" title="Der 550-W-Lüftermeister lernt Schritt für Schritt JavaScript von Grund auf" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Der 550-W-Lüftermeister lernt Schritt für Schritt JavaScript von Grund auf"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Der 550-W-Lüftermeister lernt Schritt für Schritt JavaScript von Grund auf" href="//m.sbmmt.com/de/course/1645.html">Der 550-W-Lüftermeister lernt Schritt für Schritt JavaScript von Grund auf</a> <div class="wzrthreerb"> <div >690 Lernzeiten</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/de/course/1644.html" title="Python-Meister Mosh, ein Anfänger ohne Grundkenntnisse, kann in 6 Stunden loslegen" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python-Meister Mosh, ein Anfänger ohne Grundkenntnisse, kann in 6 Stunden loslegen"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python-Meister Mosh, ein Anfänger ohne Grundkenntnisse, kann in 6 Stunden loslegen" href="//m.sbmmt.com/de/course/1644.html">Python-Meister Mosh, ein Anfänger ohne Grundkenntnisse, kann in 6 Stunden loslegen</a> <div class="wzrthreerb"> <div >24503 Lernzeiten</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Neueste Downloads</div> <a href="//m.sbmmt.com/de/xiazai">Mehr> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">Web-Effekte <div></div></div> <div class="swiper-slide" data-id="twof">Quellcode der Website<div></div></div> <div class="swiper-slide" data-id="threef">Website-Materialien<div></div></div> <div class="swiper-slide" data-id="fourf">Frontend-Vorlage<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Kontaktcode für das jQuery-Enterprise-Nachrichtenformular" href="//m.sbmmt.com/de/toolset/js-special-effects/8071">[Formular-Schaltfläche] Kontaktcode für das jQuery-Enterprise-Nachrichtenformular</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Wiedergabeeffekte für HTML5-MP3-Spieluhren" href="//m.sbmmt.com/de/toolset/js-special-effects/8070">[Spezialeffekte für Spieler] Wiedergabeeffekte für HTML5-MP3-Spieluhren</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 coole Partikelanimations-Navigationsmenü-Spezialeffekte" href="//m.sbmmt.com/de/toolset/js-special-effects/8069">[Menünavigation] HTML5 coole Partikelanimations-Navigationsmenü-Spezialeffekte</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Drag-and-Drop-Bearbeitungscode für visuelle jQuery-Formulare" href="//m.sbmmt.com/de/toolset/js-special-effects/8068">[Formular-Schaltfläche] Drag-and-Drop-Bearbeitungscode für visuelle jQuery-Formulare</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS imitiert den Kugou-Musik-Player-Code" href="//m.sbmmt.com/de/toolset/js-special-effects/8067">[Spezialeffekte für Spieler] VUE.JS imitiert den Kugou-Musik-Player-Code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Klassisches HTML5-Pushing-Box-Spiel" href="//m.sbmmt.com/de/toolset/js-special-effects/8066">[HTML5-Spezialeffekte] Klassisches HTML5-Pushing-Box-Spiel</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery-Scrollen zum Hinzufügen oder Reduzieren von Bildeffekten" href="//m.sbmmt.com/de/toolset/js-special-effects/8065">[Bildspezialeffekte] jQuery-Scrollen zum Hinzufügen oder Reduzieren von Bildeffekten</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Persönlicher CSS3-Albumcover-Hover-Zoom-Effekt" href="//m.sbmmt.com/de/toolset/js-special-effects/8064">[Fotoalbumeffekte] Persönlicher CSS3-Albumcover-Hover-Zoom-Effekt</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8328" title="Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen" target="_blank">[Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8327" title="Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben" target="_blank">[Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8326" title="Web-Vorlage für kreativen Job-Lebenslauf für Designer" target="_blank">[Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8325" title="Website-Vorlage eines modernen Ingenieurbauunternehmens" target="_blank">[Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8324" title="Responsive HTML5-Vorlage für Bildungseinrichtungen" target="_blank">[Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8323" title="Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren" target="_blank">[Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8322" title="IT-Technologie löst Website-Vorlage für Internetunternehmen" target="_blank">[Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8321" title="Website-Vorlage für Devisenhandelsdienste im violetten Stil" target="_blank">[Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-materials/3078" target="_blank" title="可爱的夏天元素矢量素材(EPS+PNG)">[PNG material] 可爱的夏天元素矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-materials/3077" target="_blank" title="四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)">[PNG material] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-materials/3076" target="_blank" title="唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)">[Banner image] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-materials/3075" target="_blank" title="金色的毕业帽矢量素材(EPS+PNG)">[PNG material] 金色的毕业帽矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-materials/3074" target="_blank" title="黑白风格的山脉图标矢量素材(EPS+PNG)">[PNG material] 黑白风格的山脉图标矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-materials/3073" target="_blank" title="不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)">[PNG material] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-materials/3072" target="_blank" title="扁平风格的植树节banner矢量素材(AI+EPS)">[Banner image] 扁平风格的植树节banner矢量素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-materials/3071" target="_blank" title="九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)">[PNG material] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8328" target="_blank" title="Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen">[Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8327" target="_blank" title="Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben">[Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8326" target="_blank" title="Web-Vorlage für kreativen Job-Lebenslauf für Designer">[Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8325" target="_blank" title="Website-Vorlage eines modernen Ingenieurbauunternehmens">[Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8324" target="_blank" title="Responsive HTML5-Vorlage für Bildungseinrichtungen">[Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8323" target="_blank" title="Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren">[Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8322" target="_blank" title="IT-Technologie löst Website-Vorlage für Internetunternehmen">[Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/de/toolset/website-source-code/8321" target="_blank" title="Website-Vorlage für Devisenhandelsdienste im violetten Stil">[Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p> </div> <div class="footermid"> <a href="//m.sbmmt.com/de/about/us.html">Über uns</a> <a href="//m.sbmmt.com/de/about/disclaimer.html">Haftungsausschluss</a> <a href="//m.sbmmt.com/de/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1734085328"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>