Detaillierte Erklärung der einfachen HTML- und CSS-Verwendung

Ich werde drei Tage benötigen, um den statischen Seiteneffekt der Homepage von JD.com fertigzustellen, der HTML und CSS umfasst.

1. Vor der Entwicklung müssen wir zunächst die Entwicklungsumgebung konfigurieren: Wir müssen Entwicklungssoftware wie Sublime Webstorm Vscode Hbuilder Atom installieren, wählen Sie einfach eine aus. Ich verwende Webstorm.

2. Erstellen Sie relevante Projektordner im Hauptordner: um projektbezogene Dateien für eine einfache Verwaltung und zukünftige Wartung zusammenzustellen.

Darunter: einschließlich einiger Dateien, die sich auf das Projekt beziehen

Startseite oder Homepage index.html default.html

CSS-Ordner CSS-Dateien

Basis.css global.css

Der Ordner „Images“ wird zum Speichern aller Bilder auf der Website verwendet.

Js-Datei

Audio- oder Videodateien

3. Danach müssen wir eine Stilinitialisierung durchführen. Im Allgemeinen führen alle Websites vor der Entwicklung eine Stilinitialisierung durch. Beispielsweise haben große Websites wie Taobao und JD ihre eigenen CSS-Dateien zur Stilinitialisierung. wie:

Dies erleichtert Entwicklern die Initialisierung der Stile jedes Tags und die Wiederverwendung allgemeiner Klassen.

4. Analysieren Sie die Website-Struktur

Es gibt auch eine Standard- oder allgemeine Vorgehensweise beim Erstellen einer Website

Die Layout-Reihenfolge ist grundsätzlich von oben nach unten und von links nach rechts.

Beim Schreiben einer Seite wird im Allgemeinen darauf geachtet, Elemente des Standardflusses zu verwenden und dann Schweben oder Positionieren einzusetzen.

Bei den Standardflusselementen sind Breite und Höhe am stabilsten, daher wird zuerst die Polsterung und zuletzt der Rand verwendet.

Jeder Tag in unserer Website-Struktur kann als Boxmodell betrachtet werden, und die Breite und Höhe können festgelegt werden. Bei einigen Elementen funktionieren die Breite und Höhe jedoch nicht mehr, nachdem sie festgelegt wurden.

So können Sie die Breite und Höhe von Inline-Elementen steuern:

1. Konvertieren Sie Inline-Elemente in Blockebenenelemente oder Inline-Blockelemente

2. Schwebendes Etikett

3. Positionierung und Etikettenentfernung

Beim Layout von Inline-Blockelementen gibt es einen Standardabstand von mehreren Pixeln zwischen Inline-Blockelementen. Dieser Abstand von wenigen Pixeln kann nur durch die Verwendung von Floats behoben werden.

Es gibt vier Arten der Positionierung:

Feste absolute relative statische

Wenn wir die Struktur einer Website analysieren, können wir im Allgemeinen mit Firefox einen Screenshot dieser Webseite erstellen und speichern:

Dann können wir Fireworks verwenden, um die Breite, Höhe, Farbe usw. des spezifischen Inhalts auf der Website zu extrahieren.

Allgemeine Tastenkombinationen für Fw:

I Pipettenwerkzeug zum Aufnehmen von Farbe

K Slice-Werkzeug Breite eines Elements messen

Z-Vergrößerungswerkzeug

V-Bewegung

Ein Zeigerwerkzeug

Häufig verwendete zusammengesetzte Attribute:

Hintergrund

mso-char-indent-count:3.4900;">Der Grund für das Schweben liegt darin, dass die übergeordnete Box keine Höhe hat. Die ursprüngliche Höhe wird von den untergeordneten Elementen im Standardfluss unterstützt. Nachdem das untergeordnete Element jedoch schwebt, liegt es außerhalb des Standardflusses, wodurch die Höhe des übergeordneten Elements 0 beträgt.

1. Legen Sie eine Höhe für die übergeordnete Box fest

2. Klar: beide

3. Overflow: hidden löst den BFC-Modus aus und kann auch zum Löschen von Floating-

4. Methode zur Entfernung von Pseudoelementen oder doppelten Pseudoelementen

(Pseudoelemente werden häufig zum Löschen von Floats verwendet)

Hierarchie der Positionierungselemente:

Wenn Sie einem Element nur eine absolute Positionierung zuweisen, ohne einen trbl-Wert zu schreiben, wird es an Ort und Stelle angezeigt

Positionierte Elemente (relativ und absolut oder fest) haben eine Eigenschaft oder ein Konzept der Hierarchie. Wenn mehrere benachbarte Elemente an der gleichen Position positioniert sind, unterdrücken die letzteren Elemente standardmäßig die ersteren Elemente. Wenn es sich bei beiden um positionierte Elemente handelt, sind ihre Ebenen standardmäßig alle 0, aber die letzteren Elemente unterdrücken die ersteren Elemente. Wenn das aktuelle Element über den dahinterliegenden Elementen angezeigt werden soll, müssen Sie die Hierarchie mithilfe des Z-Index ändern.

Der Wertebereich des Z-Index liegt zwischen 0 und 9999999. Am besten verwenden Sie eine positive Zahl und vermeiden Sie nach Möglichkeit eine negative Zahl.

Beachten Sie auch, dass position:relative weiterhin die Position im Standardfluss einnimmt, wodurch verhindert wird, dass anderer Inhalt auf seiner Ebene angezeigt wird.

Opazität

Opazität: Es gibt Kompatibilitätsprobleme und es macht nicht nur die Hintergrundfarbe transparent, sondern auch den Inhalt darin transparent

Hintergrund: rgba(0,0,0,.3);

Machen Sie nur die Hintergrundfarbe transparent und den Inhalt undurchsichtig

Hierarchie benachbarter Elemente

Der Rand blinkt, wenn die Maus die Taobao-Webseite betritt

Auf diese Weise können Sie das Hover -Pseudoelement verwenden, um die Farbe und andere Eigenschaften des Rahmens zu steuern, indem Sie die Hierarchie benachbarter Elemente ausnutzen, um denselben Effekt wie Taobao zu erzielen.

Die oben aufgeführte ausführliche Erklärung zur Verwendung von einfachem HTML und CSS ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, dass er Ihnen als Referenz dienen kann. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/moyong/archive/2016/07/27/5709491.html