Lernweg

Einführung in HTML

Webbezogene Konzepte

Gängige Browser und Kernel

Webstandards

Einführung in HTML-Tags

HTML-Syntaxspezifikation

HTML-Grundstruktur-Tags

Seite zur Erstellung des VSCode-Tools

DOCTYPE und lang und die Rolle von Zeichensätzen

Tag-Semantik

Titel-Tag

Absatz-Tags und Zeilenumbruch-Tags

Sportnachrichtenfall

Textformatierungs-Tag

div- und span-Tags

Bild-Tags (oben)

Bild-Tags (unten)

Was Sie bei Bild-Tags beachten sollten

Verzeichnisordner und Stammverzeichnisse

Relativer Pfad (oben)

Relativer Pfad (unten)

absoluter Weg

Link-Tag (oben)

Link-Tags (unten)

Ankerlink

Kommentar-Tags und Sonderzeichen

Umfassender Fall (Teil 1)

Umfassende Fälle (Teil 2)

Einführung in HTML-Tags (Teil 2)

Grundlegende Verwendung von Tabellenetiketten

Beschriftung der Kopfzelle

Tabellenbezogene Eigenschaften (verstehen)

Neuartiger Ranking-Fall

Tabellenstruktur-Tag

Zellen zusammenführen

Tabellenzusammenfassung

ungeordnete Liste

geordnete Liste

benutzerdefinierte Liste

Zusammenfassung der Liste

Formularverwendungsszenarien und -klassifizierungen

Formularfelder

Textfeld für Eingabetypattribut und Kennwortfeld

Optionsfeld und Kontrollkästchen für Eingabetypattribute

Geben Sie Namens- und Wertattribute ein

Überprüfte und maximale Längenattribute der Eingabe

Fragen und Antworten im Klassenzimmer zu Verwendungsszenarien von vier Attributen von Eingabeformularelementen

Schaltfläche zum Senden und Zurücksetzen des Eingabetypattributs

Eingabetypattribut: normale Schaltfläche und Dateifeld

Etikett Etikett

Dropdown-Formular auswählen

textarea Textbereichsbezeichnung

Zusammenfassung der Formularelemente

Registrierungsseite (1)

Registrierungsseite (2)

Registrierungsseite (3)

Registrierungsseite (4)

Lernen Sie, Dokumente zu lesen

Eine Einführung in CSS Cascading Style Sheets

Einführung in CSS

Erleben Sie CSS-Syntaxspezifikationen

CSS-Codestil

Die Rolle des CSS-Selektors

Tag-Selektor

Klassenselektor

Zeichnen Sie Kästchen mithilfe von Klassenselektoren

Besondere Verwendung des Klassenselektors – mehrere Klassennamen

ID-Selektor

Wildcard-Selektor

Schriftfamilie legt die Schriftfamilie fest

Schriftgröße Schriftgröße

Schriftstärke, Schriftstärke

Schriftstil im Schriftstil

So schreiben Sie ein Schriftart-Composite-Attribut

Zusammenfassung der Schriftartattribute

Textfarbe

Textausrichtung, Textausrichtung

Textdekoration Textdekoration

Texteinzug Texteinzug

Zeilenabstand Zeilenhöhe

Zusammenfassung der CSS-Texteigenschaften

internes Stylesheet

Inline-Stylesheet

externes Stylesheet

Zusammenfassung der CSS-Einführungsmethoden

Nachrichtenseite

Stil ändern (1)

Stil ändern (2)

Stil ändern (3)

Verwendung von Chrome-Debugging-Tools

CSS-Guide für den zweiten Tag

Die Emmet-Syntax generiert HTML-Tags

Emmet-Syntax zum schnellen Generieren von CSS-Stilen

Code schnell formatieren

Einführung in zusammengesetzte Selektoren

Nachkommenselektor

Auswahl für untergeordnete Elemente

Klassenübungen

Union-Selektor

Link-Pseudoklassenselektor (Teil 1)

Link-Pseudoklassenselektor (unten)

Fokus-Pseudoklassenselektor

Zusammenfassung der Verbindungsauswahl

Was ist der Elementanzeigemodus?

Blockelement

Inline-Elemente

Inline-Blockelement

Zusammenfassung der Elementanzeigemodi

Konvertierung des Anzeigemodus

Die Verwendung eines kleinen Snipaste-Werkzeugs

Einfache Version der Xiaomi-Sidebar-Hülle

Das Prinzip der vertikalen Zentrierung von einzeiligem Text

Hintergrundfarbe

Hintergrundbild

Hintergrundkacheln

Hintergrund-Positionsorientierungsnomen

Hintergrundstandort Fall eins

Hintergrundstandort Fall 2 – Hintergrundbild „King of Glory“.

Hintergrundposition – genaue Einheiten

Hintergrundposition – Gemischte Einheiten

Hintergrund behoben

Zusammengesetzte Schreibmethode für Hintergrundattribute

Hintergrundfarbe durchscheinend

Hintergrundzusammenfassung

Umfassender Fall Fünf-Farben-Navigation (Teil 1)

Umfassender Fall Five-Cai Navigation (2)

Stapelbarkeit

Nachlass

Vererbung der Zeilenhöhe

Priorität

Vorrangige Probleme

Überlagerung von CSS-Gewichten

Zwei Übungen mit Gewichten

Einführung in das Boxmodell

Verstehen Sie die Essenz des Webseitenlayouts

Komponenten des Boxmodells

Rahmen des Boxmodells

Zusammengesetztes Schreiben von Grenzen

Tabellenrand mit dünner Linie

Ränder beeinflussen die tatsächliche Größe der Box

Innenrandpolsterung im Kastenmodell

Eigenschaft der Polstermasse

Die Polsterung wirkt sich auf die tatsächliche Größe der Box aus

Polsteranwendung – Sina-Navigationsleiste (Teil 1)

Polsteranwendung-Sina Navigation (Teil 2)

Modifikation der Xiaomi-Seitenleiste

Die Polsterung hält die Box nicht offen

Rand des Boxmodells

Typische Anwendung von Rändern: Boxen auf Blockebene werden horizontal und mittig ausgerichtet

Inline-Elemente und Inline-Block-Elemente sind horizontal zentriert

Randzusammenführung – vertikale Ränder benachbarter Blockelemente

Randzusammenführung – verschachtelte Blockelemente fallen zusammen

klare Innen- und Außenränder

Grundlegende Operationen von ps

Umfassende Fall-Produktmodul-Layoutanalyse

Umfassendes Koffer-Box-Layout

Umfassende Fallbild- und Absatzproduktion

Umfassende Fallbewertung und detaillierte Erstellung

Umfassende Herstellung von Gehäuse- und Vertikalliniendetails

Der Lehrer erklärt

Express-Modullayoutanalyse

Express-Modul-Header-Produktion

Express-Erstellung von Modullisten

Prinzip der abgerundeten Ränder

Verwendung abgerundeter Ecken

Kastenschatten

Textschatten

Schwimmender Leitfaden

Drei Möglichkeiten des traditionellen Webseitenlayouts

Warum Float benötigt wird

Was ist Float?

Float-Eigenschaften-Off-Standard

Floating-Eigenschaften-Floating-Elemente werden in einer Zeile angezeigt

Float-Eigenschaften – Float-Elemente verfügen über Inline-Blockeigenschaften

Schwebeelemente werden oft mit standardmäßigen übergeordneten Flusselementen gepaart

Floating-Layout-Übung-1

Floating-Layout-Übung-2

Schwimmendes Übungs-Handymodul (Teil 1)

Schwimmendes Übungs-Handymodul (Teil 2)

Gängige Webseitenlayouts

Zwei Punkte, die Sie beim Floating beachten sollten

Warum Clear Float?

Klare Floating-Natur und zusätzliche Etikettenmethode

Löschen Sie den Überlauf des schwebenden übergeordneten Elements

Floating nach Pseudoelement löschen

Löschen Sie schwebende doppelte Pseudoelemente

klarer Schwimmer

Gängige Bildformate

Lagenschneiden (oben)

Ebenenausschnitt (unten)

Slice-Werkzeug

Cutterman-Installation

Tipps zur Verwendung von Cutterman

Vorbereitung

Schreibreihenfolge der CSS-Attribute (wichtig)

Gesamtidee des Seitenlayouts

Erstellung des Headerbereichs

Produktion von Logoflächen

Produktion des Navigationsbereichs der Navigationsleiste (Teil 1)

Produktion des Navigationsbereichs in der Navigationsleiste (Mitte)

Produktion des Navigationsbereichs der Navigationsleiste (Teil 2)

Suche, Suchmodul, Eingabeproduktion

Produktion von Schaltflächen für das Suchmodul

Produktion von Benutzermodulen

Produktion von Bannermodulen

Produktion des Subnav-Moduls (Teil 1)

Subnav-Modulproduktion (Teil 2)

Kursmodulproduktion (Teil 1)

Kursmodul Produktion (mittel)

Kursmodulproduktion (Teil 2)

Premium-Empfehlungsmodul (Teil 1)

Premium-Empfehlungsmodul (mittel)

Premium-Empfehlungsmodul (Teil 2)

Produktion von Box-HD-Modulen

Produktion von Box-BD-Modulen

Box-Modul fertiggestellt

Produktion von Fußzeilenmodulen

Produktion des Urheberrechtsmoduls

verbindet die Modulproduktion

Positionierungsanleitung

Warum Positionierung notwendig ist

Komposition positionieren

relative Positionierung

Absolute Positionierung – keine übergeordnete oder keine übergeordnete Positionierung

Absolute Positionierung – das übergeordnete Element hat den Positionierungsstatus

Eine vom Standard abweichende Absolutpositionierung nimmt nicht die ursprüngliche Position ein.

väterlicher Herkunft

Der Fall des absolut vaterheißen Moduls des Sohnes

Feste Positionierung

Tipps zur festen Positionierung – Fixierung auf der rechten Seite der Seitenmitte

Sticky-Positionierung (verstehen)

Zusammenfassung der Positionierung

Positionierung der Stapelreihenfolge

Absolut positionierter Boxzentrierungsalgorithmus

Besonderheiten der Positionierung

Schwebende Elemente unterdrücken nicht die Textpositionierung des Standardflusses.

Layoutanalyse

Big-Box-Produktion

Produktion der linken Pfeiltaste

Produktion der rechten Pfeiltaste

Produktion von UL-Box-Modulen

Li Small Dot-Modulproduktion

Zusammenfassung des Webseitenlayouts

Das Display zeigt ausgeblendete Elemente an

Sichtbarkeit: Versteckte Elemente anzeigen

Überlauf anzeigen ausblenden

Kartoffelkiste (Teil 1)

Kartoffelkiste (Teil 2)

Einführung

Warum Elfentechnologie benötigt wird

Verwendung von Sprite-Charts (Prinzip)

Verwendung von Sprite-Diagrammen (Code)

Sprite-Beispiel: Buchstabieren Sie Ihren Namen

Generierung von Schriftsymbolen und Vorteile

Herunterladen von Schriftartsymbolen

Verwendung von Schriftsymbolen

Prinzip des Anhängens und Ladens von Schriftsymbolen

So verwenden Sie das CSS-Dreieck

CSS-Dreiecksanwendung – Jingdong-Effekt

Benutzeroberfläche – Mausstil

Benutzeroberfläche – Entfernen Sie die Konturen von Formularen und verhindern Sie das Ziehen von Textfeldern

Vertical-Align implementiert die vertikale Mittelausrichtung von Inline-Blöcken und Text

Lösung für die Lücke am unteren Bildrand

Einzeiliger Text überläuft die Anzeige mit Auslassungspunkten

Mehrzeiliger Text überläuft die Anzeige mit Auslassungspunkten

Layoutfähigkeiten – Negative Ränder clever nutzen (Teil 1)

Layoutfähigkeiten – Negative Ränder geschickt nutzen (Teil 2)

Layouttechniken – geschickter Einsatz von Text um schwebende Elemente herum

Layouttechniken – cleverer Einsatz von Inline-Blöcken

Layout-Kenntnisse – cleverer Einsatz des CSS-Dreiecks (Teil 1)

Layout-Kenntnisse – CSS-Dreieck clever nutzen (Teil 2)

CSS-Initialisierung

HTML5CSS3 verbessert die Navigation

Fügen Sie semantische Tags hinzu

Video-Tag hinzufügen

Audio-Tag hinzufügen

Eingabeformular hinzufügen

Fügen Sie neue Formularattribute hinzu

Attributauswahl (oben)

Attributauswahl (unten)

Struktureller Pseudoklassenselektor – wählt das n-te Element aus

Selektor für das n-te Kind (oben)

Selektor für das n-te Kind (unten)

Der Unterschied zwischen nth-child und nth-of-type

Verwendungsszenarien und Ursprünge von Pseudoelementselektoren

Grundlegende Verwendung von Pseudoelementselektoren

Verwendungsszenarien für Pseudoelementselektoren – passende Schriftartsymbole

Pseudo-Element-Nutzungsszenario – Nachahmung des Kartoffeleffekts

Pseudo-Element-Selektor – Pseudo-Element löscht die schwebende Natur

CSS3-Boxmodell Border-Box

CSS3-Bildunschärfeverarbeitung

Berechnen Sie die Boxbreite mit der Berechnungsfunktion

Übergang neuer CSS3-Attribute (Teil 1)

Übergang neuer CSS3-Attribute (Teil 2)

CSS3-Übergangsübungen

Generalisiertes H5 (verstehen)

Einführung

Website-Erstellungsprozess

Pinyougou-Projektplanung

Bau des Pinyougou-Projekts

Pinyougou-Projekt – Modulare Entwicklung von Stilen

Pinyougou-Projekt-Favicon-Icon-Produktion

Pinyougou-Projekt – SEO-Optimierung für drei große Labels von TDK

Pinyougou-Homepage – Strukturaufbau für schnelle Navigationsverknüpfungen

Pinyougou Homepage-Schnellnavigation Linke Seite Produktion

Pinyougou-Homepage – schnelle Navigation auf der rechten Seite

Pinyougou-Homepage-Schriftartsymbol auf der rechten Seite der Schnellnavigation

Aufbau des Pinyougou-Homepage-Header-Moduls

Pinyougou Homepage-LogoSEO-Optimierung (Teil 1)

Pinyougou Homepage-LogoSEO-Optimierung (Teil 2)

Pinyougou Homepage-Suche Suchmodul (Teil 1)

Pinyougou-Homepage-Suchmodul (Teil 2)

Pinyougou-Homepage-Hotwords-Modul

Pinyougou-Homepage-Shopcar-Modulproduktion

Pinyougou-Homepage-Count-Warenkorb-Statistikmodul

Aufbau des Pinyougou-Homepage-Navigations-Navigationsmoduls

Produktion des Pinyougou-Homepage-Dropdown-Moduls

Pinyougou-Homepage-Navigation, detaillierte Klassifizierungsproduktion (Teil 1)

Pinyougou-Homepage-Navigation, detaillierte Klassifizierungsproduktion (Teil 2)

Produktion des Pinyougou-Homepage-Navitems-Moduls

Aufbau des unteren Moduls der Pinyougou-Homepage-Fußzeile

Produktion des Pinyougou-Homepage-Mod-Service-Moduls (Teil 1)

Produktion des Pinyougou-Homepage-Mod-Service-Moduls (Teil 2)

Produktion des Moduls Pinyougou homepage-mod_help

Produktion des Pinyougou-Homepage-mod_copyright-Moduls

Pinyougou-Homepage – Haupt-Hauptbox-Konstruktion

Pinyougou-Homepage-Newsflash-Modul

Pinyougou Homepage-News-HD-Modulproduktion

Pinyougou-Homepage-neue-BD-Modulproduktion

Pinyougou-Homepage-Lifeservice-Produktion (Teil 1)

Pinyougou-Homepage-Lifeservice-Produktion (Teil 2)

Pinyougou-Homepage-empfohlenes Modul recom (Teil 1)

Pinyougou-Homepage-empfohlenes Modul recom (Teil 2)

Pinyougou-Homepage – Aufbau von Haushaltsgerätemodulen

Pinyougou-Homepage – Leiter der Produktion von Haushaltsgerätemodulen

Anforderungen an das Layout der Tab-Leiste

Pinyougou-Homepage-tab_list-item-Layout (Teil 1)

Pinyougou-Homepage-tab_list-item-Layout (Mitte)

Pinyougou-Homepage-tab_list-item-Layout (Teil 2)

Aufbau der Produkteinkaufslistenstruktur

Pinyougo-Listen-Page-Flash-Verkaufsmodulproduktion

Änderung des Seitennavigationsmoduls der Pinyougou-Liste

Pinyougou-Listenseite – ein kleines Problem

Ende der Seite der Pinyougou-Liste

Pinyougou-Registrierungsseiten-Header-Produktion

Pinyougo-Listenseitenregistrierung, Hauptmodul-Header-Erstellung

Pinyougou-Registrierungsseite – Registrierungsthemenproduktion (Teil 1)

Pinyougou-Registrierungsseite – Registrierungsthemenproduktion (Teil 2)

Pinyougou-Registrierungsseiten-Sicherheitsmodul

Pinyougo-Registrierungsseite – Zustimmungsmodul und vollständiges Registrierungsmodul

Die Projektseiten von Pinyougou springen zueinander und arbeiten nach Vereinbarungen

Was ist Server?

Beantragen Sie kostenlosen Speicherplatz und Website-Upload