Zusammenfassung der Erfahrungen mit der Entwicklung von HTML+CSS-Projekten (empfohlen)

Ich habe mein Blog seit mehreren Tagen nicht aktualisiert. Ich habe gerade ein einfaches HTML+CSS-Projekt abgeschlossen. Nach ein paar Tagen der Erkundung stellte ich fest, dass es sehr profitabel war. Früher habe ich nur Demos geschrieben und Wissenspunkte gelesen, aber selbst keine konkreten Projekte durchgeführt. Aber erst nach dem tatsächlichen Kampf werden Sie verstehen, wie Sie Ihre Fähigkeiten verbessern können. Für diese Projektentwicklung habe ich Folgendes zusammengefasst:

1. Technische Zusammenfassung

1. Festlegen öffentlicher Stile

Bevor wir mit dem Projekt beginnen, können wir uns zunächst ein allgemeines Bild vom Inhalt der einzelnen Seiten im Projekt machen, etwa Schriftstil, Absatzstruktur, Textgröße usw. Für diese Inhalte können wir eine feste Style-Datei festlegen. Während der Entwicklung können Sie diese Datei direkt importieren, ohne den CSS-Code wiederholt eingeben zu müssen.

Wenn Sie es verwenden müssen, fügen Sie einfach den Klassennamen, den Sie verwenden möchten, nach dem Klassennamen hinzu:

2. Gesamtlayout

Wenn Sie während des Projektentwicklungsprozesses das Gerüst jeder Seite im Voraus erstellen, müssen Sie später nur noch die spezifischen Inhalte einfügen. Und ich bin es gewohnt, das folgende Framework zu verwenden, um das Gesamtlayout der Seite zu erreichen:

Im Allgemeinen ist es nach dem Festlegen des allgemeinen Rahmens der Seite praktischer, den Rest Stück für Stück auszufüllen, damit die Entwicklungsideen klarer werden. Natürlich muss auch der entsprechende CSS-Style eingestellt werden, dies hängt jedoch von den konkreten Anforderungen des Projekts ab.

3. Schneidelemente

Sobald das allgemeine Layout fertig ist, besteht der nächste Schritt darin, mit dem Zuschneiden der Bilder zu beginnen. Obwohl es nicht allzu viele technische Vorgänge gibt, gibt es dennoch einige Dinge zu beachten. Beispielsweise sollte beim Zuschneiden von Bildern besonders auf die Größe geachtet werden. Obwohl es sich teilweise um relativ unauffällige Teile handelt, erfordert ihre Handhabung Geduld. Denn Details führen oft zu unterschiedlichen Ergebnissen. Tatsächlich sollten Sie nicht denken, dass es fast fertig ist. Manchmal ist es nur ein bisschen schlechter. Wenn der Effekt nicht zufriedenstellend ist, müssen Sie am Ende immer noch Zeit aufwenden, um ihn zu ändern. Da beim Speichern des ausgeschnittenen Bildes außerdem automatisch eine Bilddatei generiert wird, müssen wir kein neues Verzeichnis erstellen oder ein Verzeichnis eingeben, da sonst der Bilderordner trotzdem am entsprechenden Speicherort angezeigt wird.

4. Benennungs- und Code-Schreibstandards

Eine standardisierte Benennung trägt zur Verbesserung der Lesbarkeit des Codes bei. Auch im Internet gibt es viele entsprechende Spezifikationen. Hier liste ich kurz ein paar Punkte auf:

(1) Intuitive Namensgebung

Wenn Sie beim Entwerfen einer Webseite ein Div identifizieren müssen, besteht die natürlichste Idee darin, es mit Wörtern zu benennen, die beschreiben, wo sich das Element auf der Seite befindet.

Beispiel: Top-Panel

horizontale Navigation

linke Seite

(2) Strukturierte Namensgebung

Beispiel: main-nav

Unternavigation

(3) Mitgliederbasierte Namenskonventionen

Bei mitgliedsbasierten Benennungskonventionen handelt es sich um die Benennung von Dateien und Ordnern durch Klassifizierung entsprechend ihrer untergeordneten Beziehungen, was die Anordnung der Dateien logischer gestalten kann.

Beispielsweise heißt eine Bilddatei vor dem Mausklick „file_on“. Nach dem Mausklick heißt die Bilddatei „file_off“. Die Benennung erfolgt nach dieser Kategorie. Das ist übersichtlicher.

5. Lernen Sie, „Sprite-Bilder“ zu erstellen

Bei der Projektentwicklung ist es unvermeidlich, viele kleine Symbole und kleine Bilder hinzuzufügen. Wenn Sie die Bilder einzeln ausschneiden und speichern, ist die Verwendung umständlich und es wird viel Speicherplatz beansprucht, sodass die Seite viel langsamer geladen wird. Dies ist nicht gut und beeinträchtigt das Benutzererlebnis erheblich. Daher können wir das kleine Bild im Voraus ausschneiden und auf derselben Seite platzieren. Bei der Entwicklung müssen wir nur dieses Bild importieren. Passen Sie dann die Position des Hintergrundbilds entsprechend der Situation an. Sie können die Eigenschaft „background-position“ verwenden, um sie festzulegen.

6. Klarheit der Wissenspunkte

Bei der Arbeit am Projekt war ich mit bestimmten Wissenspunkten nicht vertraut genug und konnte sie nicht geschickt anwenden, was zu einer langsamen Entwicklungsgeschwindigkeit führte. Sobald wir einen Wissenspunkt beherrschen, können wir schnell Code schreiben, um den entsprechenden Effekt zu erzielen. Während der Entwicklung dieses Projekts waren mir die folgenden Wissenspunkte nicht vertraut:

(1) Verwendung relationaler Selektoren

(2) Verwendung von Pseudoklassenselektoren

Insbesondere E:first-of-type und E:first-child. Tatsächlich besteht der größte Unterschied zwischen den beiden darin, dass ersteres das erste Struktur-Tag unter dem übergeordneten Element ist, während letzteres nicht unbedingt das erste Struktur-Tag sein muss. Das folgende Beispiel:

a:first-child ist das erste Struktur-Tag unter .test und es ist ein a-Tag. Wenn dies nicht der Fall ist, hat es keine Auswirkung.

a:first-of-type muss nicht das erste untergeordnete Element sein, nur das erste a-Tag unter .test.

(3) CSS-Eigenschaften: Opazität, Z-Index und Anzeige

a. Opazität

Bei dieser Projektentwicklung gibt es einen Effekt, der den Einsatz einer Maskierungsschicht erfordert. Wie unten gezeigt. Zuerst habe ich zwei Divs geschrieben und dann das zweite Div transparent gemacht. Stellen Sie dann nach dem Schweben die Transparenz wieder auf undurchsichtig ein. Gleichzeitig wird das zweite Div so positioniert, dass es das erste Div überlappt. Ich habe jedoch festgestellt, dass das Schreiben von Code auf diese Weise zu viel Aufwand und Chaos bedeutet. Nachdem ich die Codes anderer Leute nachgeschlagen hatte, stellte ich fest, dass durch die flexible Verwendung des Z-Index der gleiche Effekt erzielt werden kann. Nachfolgend finden Sie die konkrete Umsetzung

CSS Code:

HTML Quelltext:

b. Z-Index

Ruft die Stapelreihenfolge eines Objekts ab oder legt sie fest.

Bei Objekten auf paralleler Ebene gilt: Je höher der Wert dieses Eigenschaftsparameters ist, desto höher ist die Anzahl der Objekte, die oben gestapelt werden.

Wenn zwei Objekte den gleichen Wert für diese Eigenschaft haben, werden sie entsprechend der Reihenfolge gestapelt, in der sie im HTML-Dokument fließen, und das später geschriebene Objekt überdeckt das früher geschriebene.

Damit dieser Wert wirksam wird, muss der Wert des Positionsattributs absolut, relativ oder fest sein.

c. Anzeige

keine: Objekt ausblenden. Im Gegensatz zum verborgenen Wert der Sichtbarkeitseigenschaft reserviert es keinen physischen Speicherplatz für das verborgene Objekt.

inline: Gibt an, dass das Objekt ein Inline-Element ist. Block: Gibt an, dass das Objekt ein Blockelement ist.

Listenelement: Gibt das Objekt als Listenelement an.

Inline-Block: Gibt an, dass das Objekt ein Inline-Block-Element ist. (CSS2)

2. Zusammenfassung der Mentalität

Nach dieser Projektpraxis habe ich festgestellt, dass es sich oft nicht direkt um ein Fähigkeitsproblem, sondern um ein Einstellungsproblem handelt. Zu Beginn musste ich innerhalb weniger Tage über ein Dutzend Seiten fertigstellen und war skeptisch, was das Endergebnis betraf. Ich dachte aber auch, dass ich, wenn ich in Zukunft arbeite, zwangsläufig einen „Hochdruckjob“ haben werde. Das heißt, dass die Arbeitsaufgabe in kurzer Zeit erledigt werden kann. Der Prozess ist immer schwierig, aber oft interessieren sich andere nur für die Ergebnisse. Das Ergebnis liegt noch nicht vor, was bedeutet, dass die Arbeit nicht gut gemacht wurde. Das klingt zwar grausam, ist aber tatsächlich so. Der Fertigstellungsgrad dieses Projekts liegt bei etwa 90 %, einige Effekte wurden jedoch noch nicht erzielt. Doch später stellte ich fest, dass auch die Browserkompatibilität hergestellt werden musste, was tatsächlich Kopfschmerzen bereitete. Obwohl es lästig ist, ist es dennoch ein wesentlicher Teil. Für diese Projektübung habe ich folgende Punkte zusammengefasst, bei denen ich denke, dass ich sie verbessern kann:

1. Machen Sie sich mit den einzelnen HTML-Tags und CSS-Attributen vertraut und beherrschen Sie deren Verwendung. Ich denke, einer der Gründe für die langsame Entwicklungsgeschwindigkeit ist, dass ich nicht über ausreichendes Wissen verfüge. Wenn Sie beispielsweise einen bestimmten Effekt erzielen möchten, sich aber nicht erinnern können, welche Attribute Sie verwenden sollen, oder den Attributnamen vergessen, müssen Sie zeitaufwändig nach Informationen suchen. Zeit wird unsichtbar verschwendet.

2. Reduzieren Sie Redundanz und optimieren Sie den Code. Es ist besser, das wegzulassen, was weggelassen werden kann, da mehr Code Speicher beansprucht und die Seitenladegeschwindigkeit verlangsamt wird. Beim Schreiben von Code können Sie auch über eine einfachere Schreibweise nachdenken, um die Geschwindigkeit beim Codeschreiben zu erhöhen. Natürlich wird dies auch nach und nach angesammelt. Mit mehr Übung werden Sie natürlich verstehen, wie Sie die Geschwindigkeit beim Schreiben von Code erhöhen und Redundanz reduzieren können.

3. Schnittgeschwindigkeit. Vielleicht liegt es daran, dass ich selten Designtools nutze und mit der Bedienung der Softwareoberfläche nicht so vertraut bin. Das Ausschneiden von Bildern erfordert zwar keine sehr hochtechnologische Technologie, Sie müssen jedoch auf die Genauigkeit achten. Es verbessert auch die Konzentration.

4. Denken Sie mehr nach, üben Sie mehr und schämen Sie sich nicht, Fragen zu stellen. Wenn ich auf ein technisches Problem stoße, denke ich normalerweise zuerst selbst darüber nach. Wenn ich es wirklich nicht herausfinden kann, kann ich auf Baidu suchen, im Internet nachschlagen und es dann selbst implementieren. Wenn die Informationen im Internet unklar oder schwer verständlich sind. Ich denke, es ist besser, Klassenkameraden oder Lehrer zu fragen. Durch gegenseitige Kommunikation und Lernen kann man die Wissenspunkte tatsächlich schneller verstehen und seine eigenen Defizite entdecken. Lernen Sie gleichzeitig von den guten Dingen, die andere getan haben.

5. Pflegen Sie eine rigorose Haltung

Die Frage der Details wird von vielen Menschen gerne übersehen. Ich persönlich halte mich nicht für einen strengen Menschen. Manchmal sind schlechte Ergebnisse auf die eigene Unachtsamkeit zurückzuführen. Nachdem ich dies erkannt habe, werde ich mich ständig daran erinnern. Im Streben nach Geschwindigkeit können wir einige scheinbar unwichtige Dinge nicht ignorieren.

Die obige Zusammenfassung der Erfahrungen mit der Entwicklung von HTML+CSS-Projekten (empfohlen) ist der gesamte Inhalt, den der Herausgeber mit Ihnen teilt. Ich hoffe, dass er Ihnen als Referenz dienen kann. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.