Mobiles Layout: Erweiterte und erweiterte Version von HTML5+CSS3

• Kapitel1 H5C3 verstärkt
• 1-1 Einführung in HTML5
• 1-2 Grundlegende Verwendung von vscode
• 1-3 Installation des vscode-Plug-ins
• 1-4 Was ist HTML5?
• 1-5 Neue HTML5-Tags
• 1-6 Multimedia-Audio-Tags
• 1-7 Multimedia-Video-Tags
• 1-8 HTML5 neues Eingabe-Tag
• 1-9 Neue HTML5-Formularattribute
• 1-10 HTML5-Zusammenfassung
• 1-11 Einführung in CSS3
• 1-12 CSS3-Attributauswahl (oben)
• 1-13 CSS3-Attributselektor (unten)
• 1-14 CSS3-Struktur-Pseudoklassenselektor (Teil 1)
• 1-15 n-tes Kind(n)
• 1-16 Der Unterschied zwischen nth-child und nth-of-type
• 1-17 Zusammenfassung der Struktur-Pseudoklassenselektoren
• 1-18 CSS3-Pseudoelementselektor
• 1-19 Fall eines Pseudoelementselektors
• 1-20 2D-Konvertierung: übersetzen
• 1-21 Zentrieren Sie eine Box horizontal und vertikal
• 1-22 2D-Konvertierung drehen
• 1-23 CSS3-Dreieck
• 1-24 Konvertierungs-Mittelpunkt festlegen
• 1-25 Gehäuse mit Drehmittelpunkt
• 1-26 2D-Konvertierungsmaßstab
• 1-27 Bildvergrößerungskoffer
• 1-28 Gehäuse mit Paging-Taste
• 1-29 Umfassende Schreibmethoden und Sequenzprobleme für die 2D-Konvertierung
• 1-30 Zusammenfassung der 2D-Konvertierung
• 1-31 Grundlegende Verwendung von CSS3-Animationen
• 1-32 Animationssequenz
• 1-33 Allgemeine Eigenschaften der CSS3-Animation
• 1-34 Abkürzung für CSS3-Animation
• 1-35 Big-Data-Heatmap-Fall (Teil 1)
• 1-36 Big-Data-Heatmap-Fall (Teil 2)
• 1-37 Die Schritte der Geschwindigkeitskurve
• 1-38 Running Bear Großer Koffer
• 1-39 3D-Transformationen verstehen
• 1-40 3D-Übersetzung translator3d
• 1-41 PerspektivePerspektive
• 1-42 übersetzenZ
• 1-43 3D-Rotation rotierenX
• 1-44 3D-Rotation rotierenY
• 1-45 3D-Rotation rotierenZ
• 1-46 3D-Rendering im Transformationsstil
• 1-47 Zweiseitige Flip-Box-Hülle
• 1-48 3D-Navigationsleiste (oben)
• 1-49 3D-Navigationsleiste (unten)
• 1-50 Umfassender Fall-Karussell-Fall (Teil 1)
• 1-51 Umfassender Fall-Karussell-Fall (Teil 2)
• 1-52 Privates Browser-Präfix und Zusammenfassung
• Kapitel2 Flüssiges Layout
• 2-1 Einführung in das Flow-Layout für die mobile WEB-Entwicklung
• 2-2 Grundlagen mobiler Endgeräte
• 2-3 Ansichtsfenster
• 2-4 Meta-Viewport-Tag
• 2-5 Verhältnis von physischen Pixeln zu physischen Pixeln
• 2-6 Doppeldiagramm
• 2-7 Hintergrundskalierung, Hintergrundgröße
• 2-8 Hintergrund-Doppelbild und Mehrbildausschnitt
• 2-9 Mobile Entwicklungsoptionen
• 2-10 Mobile Technologielösungen
• 2-11 Mobiler besonderer Stil
• 2-12 Auswahl mobiler Technologien
• 2-13 Flüssiges Layout
• 2-14 Vorbereitungsarbeiten für die mobile Homepage von JD.com
• 2-15 Körpereinstellungen
• 2-16 App-Layout
• 2-17 Füllen von App-Inhalten
• 2-18 Layout des Suchmoduls
• 2-19 Erstellung von Suchmodulinhalten
• 2-20 So erstellen Sie ein Doppel-Sprite-Diagramm
• 2-21 Fokuskartenproduktion
• 2-22 Produktion von Markentagsmodulen
• 2-23 Produktion von Navigationsleisten-Navigationsmodulen
• 2-24 Newsletter-Modul
• 2-25 Ende 2 der mobilen Homepage von JD.com
• Kapitel3 biegen
• 3-1 Einführung in das Flex-Layout der mobilen WEB-Entwicklung
• 3-2 Flex-Layout-Erfahrung
• 3-3 Flex-Layout-Prinzip
• 3-4 Flex legt die Spindelrichtung fest
• 3-5 justify-content legt die Anordnung der Hauptachsen-Unterelemente fest
• 3-6 Ob Flex-Wrap-Unterelemente umwickelt werden
• 3-7 align-items legt die Anordnung der achsenübergreifenden untergeordneten Elemente fest
• 3-8 align-content legt die Anordnung der achsenübergreifenden untergeordneten Elemente fest
• 3-9 Flex-Flow und Zusammenfassung
• 3-10 Verwendung von Child-Flex-Eigenschaften
• 3-11 align-self和order
• 3-12 Vorbereitungsarbeiten für die mobile Homepage von Ctrip
• 3-13 Analyse des Homepage-Layouts und Layout des Suchmoduls
• 3-14 Vom Benutzer erstelltes Suchmodul
• 3-15 Suchmodulproduktion Suchproduktion
• 3-16 Produktion von Fokuskarten-Fokusmodulen
• 3-17 Lokales Navigationslayout
• 3-18 Produktion lokaler Navigationsinhalte
• 3-19 Verwenden Sie die Attributauswahl, um das Hintergrundbild zu ändern
• 3-20 Layout der Navigationsdarstellung
• 3-21 Produktion von Navigationsinhalten
• 3-22 Hintergrundverlauf linearer Verlauf
• 3-23 Produktion von Subnav-Eingabemodulen
• 3-24 Beliebte Aktivität Modulproduktion
• 3-25 Mehr Produktion von Wohlfahrtsmodulen
• 3-26 Vertrieb-BD-Modulproduktion 3
• Kapitel4 Rem-Layout
• 4-1 Einführung in die mobile WEB-Entwicklung mit adaptivem Rem-Layout
• 4-2 Rem-Einheit
• 4-3 Einführung in die Syntax von Medienabfragen
• 4-4 Verfärbung des Hintergrunds der Medienabfrage
• 4-5 Media query + rem realisiert dynamische Größenänderungen von Elementen
• 4-6 Medienabfrage führt Ressourcen ein
• 4-7 Nachteile von CSS
• 4-8 Einführung in LESS und die Verwendung von Variablen
• 4-9 Less Compile Easyless Plug-In
• 4-10 weniger Verschachtelung
• 4-11 weniger Betrieb
• 4-12 Prinzip des Rem-Anpassungsschemas
• 4-13 endgültiger Anpassungsplan
• 4-14 Suning Homepage common.less Produktion
• 4-15 Importstil für Suning-Homepage-Import
• 4-16 Einstellungen für den Körperstil der Suning-Homepage
• 4-17 Layout des Suning-Homepage-Suchinhaltsmoduls
• 4-18 Inhaltslayout für Suchinhalte auf der Suning-Homepage
• 4-19 Produktion des Suning Homepage-Suchmoduls
• 4-20 Produktion von Suning-Homepage-Bannern und Werbemodulen
• 4-21 Suning-Homepage-Navigationsteilproduktion
• 4-22 REM-Anpassungslösung 2 Einführung in flexble.js
• 4-23 Rem-Anpassungslösung 2 Vorbereitende Vorbereitungen für die Suning-Homepage
• 4-24 Rem-Anpassungsschema 2Körperstilmodifikation
• 4-25 Ein magisches vscode-Plug-in cssrem
• 4-26 Ändern Sie die flexible Standard-HTML-Schriftgröße
• 4-27 Rem-Anpassungslösung 2 Suchinhalt Inhaltsproduktion 1
• 4-28 Rem-Anpassungslösung 2 Suchinhalt Inhaltsproduktion 2
• Kapitel5 Responsives Layout
• 5-1 Responsive Einführung in die mobile Webentwicklung
• 5-2 Responsive Entwicklungsprinzipien
• 5-3 Responsiver Layout-Container
• 5-4 Responsive Navigationshülle
• 5-5 Einführung in Bootstrap
• 5-6 Bootstrap-Nutzung (Teil 1)
• 5-7 Bootstrap-Nutzung (Teil 2)
• 5-8 Bootstrap-Layout-Container
• 5-9 Bootstrap-Grid-System
• 5-10 Verwendung des Bootstrap-Grid-Systems (Teil 1)
• 5-11 Verwendung des Bootstrap-Grid-Systems (Teil 2)
• 5-12 Bootstrap-Spaltenverschachtelung
• 5-13 Bootstrap-Spaltenoffset
• 5-14 Bootstrap-Spaltensortierung
• 5-15 Bootstrap-Responsive-Tools
• 5-16 Alibaba Baixiu-Nachfrageanalyse
• 5-17 Vorbereitende Arbeit für Ali Baixiu
• 5-18 Ändern Sie die maximale Breite des Containers
• 5-19 Produktion des Alibaba Baixiu-Logos
• 5-20 Die Navigationsproduktion von Alibaba Baixiu führt Schriftsymbole ein
• 5-21 Produziert von Ali Baixiu News (Teil 1)
• 5-22 Produziert von Ali Baixiu News (Teil 2)
• 5-23 Alibaba Baixiu veröffentlicht Modulproduktion
• 5-24 Alibaba Baixiu stellt Modulproduktion ein
• 5-25 Responsive Produktion des Alibaba Baixiu-Logos
• 5-26 Alibaba Baixiu nav reaktionsschnelle Produktion
• 5-27 Alibaba Baixiu reagiert auf Nachrichtenproduktion
• 5-28 Alibaba Baixiu veröffentlicht reaktionsfähige Produktion
• 5-29 Zusammenfassung der Entwicklung mobiler Endgeräte