Eine kurze Zusammenfassung meiner Erfahrungen beim Schreiben von HTML-Seiten
|
Es sind drei oder vier Monate vergangen, seit ich bei Word of Mouth angefangen habe. Ich glaube, dass der größte Gewinn im Arbeitsprozess das Schreiben von HTML-Seiten ist, von visuellen Entwürfen bis hin zu Webseiten-DEMOs. Ich habe grundsätzlich keine andere Wahl, als diese Art von Arbeit zu erledigen. Von der anfänglichen gesamten WAP-Site, der Hangzhou-Homepage, den Fehleranforderungen über die Guangzhou-Homepage, die Shanghai-Homepage, das Filialverzeichnis und andere Seitenneugestaltungen bis hin zum Schreiben der aktuellen DEMO für die Neugestaltung der Homepage des Mundpropaganda-Kartenkanals. Meine Stimmung hat sich von der anfänglichen Gereiztheit und dem langweiligen Debuggen zu Leichtigkeit und Leichtigkeit gewandelt, und jetzt kann ich es mit Leichtigkeit tun. Ich habe mich von den Zwängen von IE6 und 7 befreit. Scheiß auf Bugs. Ich erinnere mich noch lebhaft an das Gefühl, als ich versuchte, das gesamte Seitenlayout fertigzustellen, ohne einen Hack zu schreiben. Ich habe viel von meinen Kollegen im Unternehmen gelernt und meine eigenen Entwicklungsschritte zusammengefasst: Gesamtanalyse des Seitenlayouts, Vereinheitlichung, Klassifizierung und Zuschnitt (CSS-Sprites) Module aufteilen, HTML-Struktur planen, CSS planen und schreiben In Seiten kombiniert (dank YUIs Seitenlayout-Builder-Komponente) Schritt 1: Analysieren Sie das Seitenlayout als Ganzes. Wenn Sie den visuellen Entwurf erhalten, denken Sie nicht darüber nach, wie Sie HTML- und CSS-Code schreiben, sondern analysieren Sie zunächst das Layout der Seite als Ganzes. Beachten Sie die Abstandsunterschiede zwischen den verschiedenen Modulen der Seite, die Aufteilung von Kopf-, Text- und Fußzeile, CSS-Sprites, Fragen zum Bildzuschneiden, Seitenfarbe, wie der Hintergrund festgelegt wird usw. und verfeinern Sie dann das Layout jedes Moduls Schritt für Schritt von außen nach innen. Man kann sagen, dass dieser Schritt sehr kritisch ist, da er ein allgemeines Rahmenlayout für den unten zu schreibenden Code bereitstellt. Schritt 2: Bilder zusammenfassen, vereinheitlichen, klassifizieren und ausschneiden (CSS-Sprites) Nach der Gesamtanalyse geht es an die Klassifizierung und Kombination der Module. Dieser Schritt erfordert immer noch die Betrachtung der gesamten Seite und die Analyse, welche Module ähnliche Stile haben (die häufigsten sind UL-Listen und einige grafische Layouts), einschließlich Farbe, Stil, Änderung, Hintergrund, Breite, Polsterung, Rand, Rahmen usw. Das Kategorisieren der Stile ähnlicher Module ist für das nachfolgende Schreiben von CSS-Code von großem Nutzen, da dadurch die Vereinfachung des CSS-Codes maximiert werden kann. Schritt 3: Module aufteilen, HTML-Struktur planen, CSS planen und schreiben Nachdem alle Vorarbeiten erledigt sind, ist es Zeit, den Code zu schreiben. Ich schreibe gerne jedes Modul oder jede Spalte separat. Dies hat den Vorteil, dass ich das Gesamtlayout ignorieren und die HTML-Struktur aus der Perspektive der HTML-Semantik erstellen kann. Zu diesem Zeitpunkt gibt es weniger HTML-Code und ich muss nicht zu viel Zeit damit verbringen, CSS zu schreiben und HTML-Code anzuzeigen (ich hasse zu viel HTML-Code und das Auf- und Abziehen der Bildlaufleiste, was ermüdend ist!) Schritt 4: Zu Seiten zusammenfassen. Nachdem jedes Modul geschrieben wurde, verwenden Sie den Seitenlayoutgenerator (danke dafür, Effizienz steht an erster Stelle! Der Nachteil ist, dass die HTML-Struktur kompliziert ist, -_-), um jedes geteilte Modul zu integrieren und auch den Code der CSS-Datei zu bereinigen. Es gibt einige Tipps zum Integrieren von CSS-Code: Wenn Sie den Hintergrund von HTML-Elementen in CSS-Sprites festlegen, schreiben Sie alle Elemente an einer Stelle: /* Hintergrund-URL */ .rhs-bd, .business-join h1, .yk-mod-content .business-join pa, .business-open-flow ul, .business-case-list ul li, .kb-bank-toolbar ul,.kba-consumer h1,.kba-consumer h1,.kba-consumer ul li,.kba-new-join ul li, .recommend-shop-list,.hot-sign,.search-merchant-bd{background:url(ka_bg.png) no-repeat;} Auf diese Weise müssen die entsprechenden Elemente nur die Hintergrundposition festlegen, der Code ist ordentlich, die Struktur ist klar und die Kosten für Umbau und Wartung sind gering. Ein weiterer Punkt ist, Ränder mit Vorsicht zu verwenden. Ränder verursachen in IE6 und 7 viele Probleme. Wenn Sie also CSS schreiben und das HTML-Layout planen, müssen Sie überlegen, ob Sie Ränder oder Auffüllungen verwenden. Beides hat seine eigenen Vorteile. Ränder können die HTML-Struktur relativ prägnant halten, und das Prinzip der Auffüllung besteht darin, Auffüllungen in den untergeordneten Elementen des aktuellen HTML-Elements festzulegen, um das Layout zu erzielen (natürlich kann es auch unter dem aktuellen Element sein, aber dadurch werden Breite und Höhe geändert, und Breite und Höhe müssen neu angepasst werden). Meine Erfahrung lautet also: Wenn Sie HTML und CSS für Module schreiben, versuchen Sie, so viel Padding wie möglich zu verwenden. Insbesondere bei Floats lassen sich durch Padding viele Probleme vermeiden. Es gibt ein Sprichwort: Wenn Sie wissen, dass dadurch Fehler entstehen, versuchen Sie, es nicht zu tun. Die oben genannten Entwicklungsschritte sind von Person zu Person unterschiedlich. Ich mag diese Art des Denk- und Entwicklungsprozesses, bin daran gewöhnt und erlebe den Spaß daran. |
>>: Implementierung der HTML-Befehlszeilenschnittstelle
Artikel empfehlen
Vue implementiert Karussell-Animation
In diesem Artikelbeispiel wird der spezifische Co...
MySQL-Grundlagen in 1 Stunde
Inhaltsverzeichnis Erste Schritte mit MySQL MySQL...
Eine kurze Erläuterung zweier Methoden zur Lösung von platzgleichmäßigen Kompatibilitätsproblemen
Seit seiner Einführung im Jahr 2009 wird Flex von...
Natives JS-objektorientiertes Tippspiel
In diesem Artikel wird der spezifische Code des o...
Beispiel für eine automatische Importmethode für das Vue3.0-Routing
1. Voraussetzungen Wir verwenden zum Importieren ...
Eine einfache Möglichkeit, die QT-Anwendung in eingebettetem Linux neu zu starten (basierend auf QT4.8 qws)
Anwendungssoftware hat im Allgemeinen folgende Ge...
Grafisches Tutorial zur Installation und Konfiguration von mysql8.0.11 winx64 (win10)
Das Installationstutorial für MySQL 8.0.11 WinX64...
CSS verwendet die Pseudoklasse „placeholder-showed“, um den schwebenden Texteffekt des Eingabefelds zu erzielen
In diesem Beitrag verwenden wir die Pseudoklasse ...
Schritte zum Konfigurieren von IIS10 unter Win10 und zum Unterstützen des Debuggens von ASP-Programmen
Microsoft IIS IIS (Internet Information Server) i...
So verwenden Sie den Linux-Befehl seq
1. Befehlseinführung Mit dem Befehl seq (Sequence...
Lösen Sie die MySQL-Deadlock-Routine, indem Sie verschiedene Indizes aktualisieren
In den vorherigen Artikeln wurde erläutert, wie S...
Mehrere Möglichkeiten zur Lösung des 1-Pixel-Randproblems auf Mobilgeräten (5 Methoden)
Dieser Artikel stellt 5 Möglichkeiten zur Lösung ...
Detaillierte Erläuterung der Lösung für den Fehler bei der Verwendung von systemctl zum Starten des Dienstes im Docker
Docker-Version: [root@localhost gae_proxy]# Docke...
Webdesign-Tipps für Formular-Eingabefelder
1. Gestricheltes Feld, wenn die Abbrechen-Schaltfl...
Beispiele für korrekte Beurteilungsmethoden für Datentypen in JS
Inhaltsverzeichnis Vorwort Kann typeof den Typ ko...