So gestalten Sie die Homepage von Tudou.com
|
<br />Ich arbeite seit mehreren Jahren im Front-End-Bereich. Ich kann nicht behaupten, dass ich mich damit gründlich auskenne, habe aber dennoch einige eigene Ideen. Nehmen wir zur Zusammenfassung die Homepage von Tudou.com als Beispiel. Produktionstechnisch unterteile ich eine Seite in vier Ebenen: Framework, Layout, Modul, Liste und Datenblock. 1. Rahmen <br />Der Rahmen der Seite besteht im Wesentlichen aus: „Header“, „Body“ und „Footer“. Bei manchen Seiten, wie beispielsweise Tudou.com, muss aus Layoutgründen jedoch unterhalb der „Kopfzeile“ ein „Menü“ hinzugefügt werden.  2. Layout (#ID wird verwendet, um die Seitenelemente unten darzustellen) Ich werde nicht über #Head und #Foot sprechen. Weitere Einzelheiten entnehmen Sie bitte dem Quellcode auf der Demonstrationsseite. Mit Layout ist die Aufteilung des Inhalts in #Main in mehrere große Blöcke gemeint. Schauen wir uns Tudou.com an. Die typische Links-Rechts-Struktur in #Main wird durch #Layout_1 und #Layout_2 dargestellt. Wie gezeigt  3. Module <br />Die Blöcke im Layout #Layout_1 und #Layout_2 sind Module. So wie ich das verstehe, muss ein Modul mindestens eine ID haben, und denen, die je nach Seitendesign wiederverwendet werden müssen, sollte eine Klasse hinzugefügt werden. Geben Sie dem Modul-ID-Namen einen aussagekräftigen Namen. Wenn Sie faul sind, können Sie natürlich #Col_1, #Col_2 usw. verwenden. . . Die Klassennamen der Module sind .cols_1, .cols_2 usw. . .  Das Innere des Moduls sieht wie folgt aus:  Vorherige Seite 1 2 Nächste Seite Gesamten Artikel lesen |
<<: Der vollständige Leitfaden zum Rasterlayout in CSS
>>: 30 Tipps zum Schreiben von HTML-Code
Artikel empfehlen
So entwickeln Sie eine Progressive Web App (PWA)
Inhaltsverzeichnis Überblick Erfordern URL der An...
Vue implementiert Akkordeoneffekt
In diesem Artikelbeispiel wird der spezifische Co...
Lösen Sie das Problem des IDEA-Konfigurations-Tomcat-Startfehlers
Beim Konfigurieren unterschiedlicher Servlet-Pfad...
So installieren Sie Babel mit NPM in VSCode
Vorwort Im vorherigen Artikel wurde die Installat...
Über das Problem beim Ausführen von Git-Programmen in von Docker bereitgestellten Jenkins
1. Zuerst wird beim Verknüpfen von Git eine Fehle...
Grafisches Tutorial zur Installation von MySQL5.7.18 im Windows-System
MySQL-Installationstutorial für Windows-Systeme h...
Mehrere Möglichkeiten zum Festlegen der Ablaufzeit von localStorage
Inhaltsverzeichnis Problembeschreibung 1. Basislö...
Der Implementierungsprozess der ECharts Multi-Chart-Verknüpfungsfunktion
Wenn viele Daten angezeigt werden müssen, ist die...
Docker-Netzwerkprinzipien und detaillierte Analyse benutzerdefinierter Netzwerke
Docker virtualisiert eine Brücke auf dem Host-Rec...
JavaScript-Datenübertragung zwischen verschiedenen Seiten (URL-Parametererfassung)
Auf Webseiten begegnen wir häufig dieser Situatio...
Detaillierte Zusammenfassung der Übermittlungsmethoden für Webformulare
Sehen wir uns zunächst verschiedene Möglichkeiten...
Detaillierte Erklärung des Mindestbreitenwerts von Inline-Blöcken in CSS
Vorwort Vor kurzem habe ich mir abends etwas Zeit...
SQL-Implementierung von LeetCode (183. Kunden, die noch nie eine Bestellung aufgegeben haben)
[LeetCode] 183.Kunden, die nie bestellen Angenomm...
Verwenden von Zabbix zum Überwachen des Ogg-Prozesses (Linux-Plattform)
Der Ogg-Prozess einer vor einiger Zeit erstellten...
Das englische Lesen verschiedener Sonderzeichen auf der Tastatur (Wissenspopularisierung)
Tastaturzeichen Englisch ` Rückwärtszitat ~ Tilde...