HTML+CSS-Schnellstart

• Kapitel1 Verstehen Sie das große Front-End und bereiten Sie sich auf das Lernen vor
• 1-1 vscode-Installationskonfiguration – detaillierte Erläuterung häufig verwendeter Plug-Ins (Untertitelversion)
• 1-2 Wenn Sie Ihre Arbeit gut erledigen möchten, müssen Sie zunächst die WebStorm-Installation Ihrer Tools verbessern
• 1-3 Programmkategorien, die Frontend-Programmierer entwickeln können
• 1-4 Wie unterscheidet man zwischen H5, WEB-Front-End, Big-Front-End und WEB-Full-Stack?
• Kapitel2 Häufig verwendete Tags und Attribute in HTML
• 2-1 HTML Hypertext Markup Language – Wo ist der Hypertext?
• 2-2 HTML-Hauptstruktur und zugehörige Tags
• 2-3 HTML-Hexadezimal-Farbwerte und Kommentare
• 2-4 Verwendung von HTML-Entitätszeichen
• 2-5 Analyse gemeinsamer Tags im Head-Tag
• 2-6 Text- und Textformat-Tags im Textkörper
• 2-7 H5 neu aktualisierte Textformat-Tags
• 2-8 Semantische Tags und Listenlayout-Tags
• 2-9 Pfad- und Sprungprobleme, auf die in Tags geachtet werden muss
• 2-10 Beispiele zur Erläuterung von Multimedia-Tags
• 2-11 Gedächtnisfähigkeiten für massive Front-End-Tags
• 2-12 Vollständige Erklärung der Markdown-Syntax
• 2-13 Erläutern Sie das Tabellen-Tag
• 2-14 Umfassende Analyse von Elementen im Zusammenhang mit Formularformularen – Teil 1
• 2-15 Umfassende Analyse von Elementen im Zusammenhang mit Formularformularen – Teil 2
• 2-16 Verwendung von Inline-Tag-Iframe
• Kapitel3 Hören Sie auf zu streifen und tauchen Sie ein in die Welt von CSS
• 3-1 Einstieg in die Welt von CSS – verschiedene Möglichkeiten, auf CSS zu verweisen
• 3-2 CSS-Selektor – grundlegende Selektoranalyse
• 3-3 CSS-Selektor – hierarchische Selektoranalyse
• 3-4 CSS-Selektor – Analyse des strukturellen Pseudoklassen-Selektors – Teil 1
• 3-5 CSS-Selektor – Analyse des strukturellen Pseudoklassen-Selektors – Teil 2
• 3-6 CSS-Status-Pseudoklassenselektor und Selektorpriorität
• 3-7 CSS-Font-Schriftarteneigenschaft
• 3-8 CSS-Text-Texteigenschaft
• 3-9 css--background Hintergrundeigenschaft
• 3-10 Zusammenfassung der Klasse und Kapitelaufgaben
• Kapitel4 CSS-Stil- und Layoutsteuerung
• 4-1 CSS-Eigenschaften für Breiten- und Höhenabmessungen
• 4-2 Eigenschaften der CSS-Navigationsliste
• 4-3 CSS-Positionierungseigenschaft – behoben
• 4-4 CSS-Positionierungseigenschaft – relative Positionierung relativ
• 4-5 Die Beziehung zwischen relativer Positionierung und absoluter Positionierung – Teil 1
• 4-6 Die Beziehung zwischen relativer Positionierung und absoluter Positionierung – Teil 2
• 4-7 CSS-Layouteigenschaften steuern das Ausblenden und Anzeigen von Elementen
• 4-8 CSS steuert div so, dass es nach links und rechts schwebt
• 4-9 Standard-Boxmodell kombiniert mit Schwimmern
• 4-10 So lösen Sie das Problem überlappender Div-Ränder
• 4-11 Die Beziehung zwischen der Boxgröße und den inneren und äußeren Rändern und Rändern
• 4-12 Das Box-Sizing-Attribut löst das Problem der Boxverpackung
• 4-13 Flexibles Boxmodell – flexibles Boxlayout
• 4-14 Die Teleskopbox ermöglicht eine mehrstufige Navigationsverknüpfung
• Kapitel5 Praktische Definition der Layout-Framework-Datei
• 5-1 Eingehende Analyse der Attributeinstellungen des flexiblen Boxmodells – Teil 1
• 5-2 Eingehende Analyse der Attributeinstellungen des flexiblen Boxmodells – Teil 2
• 5-3 Seitenlayoutanalyse der Unternehmenswebsite
• 5-4 Definieren Sie die zugrunde liegende Stildatei des Frameworks
• 5-5 Legen Sie den flexiblen öffentlichen Layoutstil des Rahmens fest
• 5-6 Legen Sie den öffentlichen Rahmenstil des Rahmens fest
• 5-7 Legen Sie den öffentlichen Randstil des Rahmens fest
• 5-8 Legen Sie andere öffentliche Stile des Rahmens fest
• 5-9 Einführung abgerundeter Ränder im öffentlichen Stil in das Projekt
• 5-10 So führen Sie das Iconfont-Schriftartsymbol in das Projekt ein
• 5-11 Praktischer Kampf: Definieren Sie die öffentliche Header-Vorlagendatei
• 5-12 Praktischer Kampf – definieren Sie einen eleganten Suchfeldstil
• 5-13 Praktischer Kampf – Festlegen des Stils, des Hintergrunds und der zentrierten Ausrichtung von Schriftsymbolen
• 5-14 Praktischer Kampf: Legen Sie den grundlegenden Stil der Navigationsleiste fest
• Kapitel6 Tatsächliche Animation und öffentlicher Leiter
• 6-1 Radialer Farbverlauf für Textschatten und Hintergrundfarbe
• 6-2 CSS implementiert Boxkonvertierung und Übergangseffekte
• 6-3 Praktischer Kampf – CSS-Animationseffekte und Animationskarussell – Teil 1
• 6-4 Praktischer Kampf – CSS-Animationseffekte und Animationskarussell – Teil 2
• 6-5 Praktischer Kampf – CSS3 implementiert den Navigationsunterstreichungsanimationseffekt mithilfe von Pseudoklassen
• 6-6 Praktischer Kampf – Implementierung sekundärer Menüstile und Animationseffekte
• 6-7 Praktischer Kampf – Implementierung eines festen Sidebar-Effekts – Teil 1
• 6-8 Praktischer Kampf – Implementierung eines festen Sidebar-Effekts – Teil 2
• 6-9 Praktischer Kampf – Implementierung des Stillayouts der unteren Fußzeile
• 6-10 Praktischer Kampf – Erkennen der Wirkung der Produktnavigation auf der Startseite
• 6-11 Praktischer Kampf – das Header-Layout des Produktpräsentationsbereichs
• 6-12 Praktischer Kampf – Stillayout von Produktkarten – Teil 1
• 6-13 Praktischer Kampf – Vervollständigen Sie den Animationseffekt von Produktkarten
• 6-14 Praktischer Kampf – Stillayout von Produktkarten – Teil 2
• Kapitel7 Listenseite und Detailseite des tatsächlichen Kampfes
• 7-1 Praktischer Kampf – Vervollständigen Sie das Stillayout der Breadcrumb-Navigation
• 7-2 Praktischer Kampf – Vervollständigen Sie den Animationseffekt der Produktsortierung – Teil 1
• 7-3 Praktischer Kampf – Vervollständigen Sie den Animationseffekt der Produktsortierung – Teil 2
• 7-4 Praktischer Kampf – Vervollständigen Sie das Stillayout der Produktlistenseite
• 7-5 Praktischer Kampf – Vervollständigen Sie das Stillayout des Produktgrundinformationsbereichs
• 7-6 Praktischer Kampf – Vervollständigen Sie das Stillayout des Produktgrundinformationsbereichs 02
• 7-7 Praktischer Kampf – Vervollständigen Sie das Stillayout des Produktgrundinformationsbereichs 03
• 7-8 Praktische kampfartige Anordnung der Produktdetails 01
• 7-9 Praktische kampfartige Anordnung der Produktdetails 02
• 7-10 Praktischer Kampf – Ich schätze, Ihnen gefällt die Stilaufteilung des Gebiets
• Kapitel8 Praktische Warenkorb- und Bestellseite
• 8-1 Layout im Einkaufswagenstil eines Einkaufszentrums 01
• 8-2 Layout im Einkaufswagenstil eines Einkaufszentrums 02
• 8-3 Layout im Einkaufswagenstil eines Einkaufszentrums 03
• 8-4 Bestellvorschauseite – Layout im Stil der Empfangsinformationen
• 8-5 Bestellvorschauseite – Layout im Zahlungsmethodenstil
• 8-6 Bestellvorschauseite – Layout des Bestellinhaltsstils 01
• 8-7 Bestellvorschauseite – Layout des Bestellinhaltsstils 02
• 8-8 Strukturanalyse der persönlichen Centerseite des Einkaufszentrums
• 8-9 Bestellseite und @media-Abfrage
• 8-10 Bestellseite und @media-Abfrage – weiter