Vermittlung der Struktur- und Ausdrucksprinzipien eines einfachen Webseiten-Layouts

Einführung in Struktur und Leistung

HTML-Struktur, CSS-Ausdruck, JavaScript-Verhalten. Beim Layout von Webseiten sollte das Prinzip der Trennung von Struktur, Ausdruck und Verhalten berücksichtigt werden. Konzentrieren Sie sich zunächst auf Struktur und Semantik und berücksichtigen Sie dann CSS, JS usw., um die spätere Wartung und Analyse zu erleichtern ...

Die Idee, Struktur vom Ausdruck zu trennen

1. Primäre Entwicklerideen und Produktionsmethoden: Divs werden Schicht für Schicht verschachtelt;
2. Ideen und Herstellungsmethoden für fortgeschrittene Entwickler: redundante Divs entfernen und vereinfachen;
3. Fortgeschrittene Entwicklerideen und Herstellungsmethoden: Vereinfachen Sie die HTML-Struktur so weit wie möglich und setzen Sie dann CSS ein, um die Kompatibilität zwischen HTML und CSS zu verringern.
   Schritt:
   Schreiben Sie den Code zuerst entsprechend der Struktur und Semantik und legen Sie dann den CSS-Stil fest, um die Übereinstimmung zwischen HTML und CSS zu verringern

Überlauf:
sichtbar. Der Standardwert. Der Inhalt wird nicht abgeschnitten und außerhalb des Elementfelds gerendert.
Der versteckte Inhalt wird abgeschnitten und der verbleibende Inhalt ist unsichtbar.
Scrollen: Der Inhalt wird gekürzt, der Browser zeigt jedoch eine Bildlaufleiste an, sodass der restliche Inhalt angezeigt werden kann.
auto Wird der Inhalt beschnitten, blendet der Browser Bildlaufleisten ein, um den restlichen Inhalt betrachten zu können.
inherit Gibt an, dass der Wert der Überlaufeigenschaft vom übergeordneten Element geerbt werden soll.

text-indent rückt den Text an die Zielposition ein, sodass Sie dem Text kein weiteres Tag hinzufügen müssen. Reduzieren Sie redundanten Code

Wenn Sie eine Entwurfszeichnung für eine Webseite erhalten, achten Sie zunächst auf den Textinhalt der Webseite und die Beziehung zwischen Inhaltsmodulen.
Konzentrieren Sie sich auf das Schreiben semantischen HTML-Codes, anstatt zu viel über den Stil des Designs nachzudenken.
Nachdem das HTML entsprechend dem Inhalt geschrieben ist, denken Sie über die Implementierung des Stils nach.
Erfüllen Sie den in der Konstruktionszeichnung geforderten visuellen Effekt, ohne die vorhandene Struktur zu verändern.
Der Rand kann ein negativer Wert sein, durch den der Inhalt verschoben werden kann! Bewegung in vier Richtungen realisieren.
In der Struktur (HTML) und im Stil (CSS) können Sie zuerst den Inhalt in HTML schreiben und dann den Rand verwenden, um die Position zu verschieben, um den Satz zu erreichen, die Kopplung von Stil und Struktur zu verringern und den Code zu reduzieren

Webseiten-Skins und Zusammenfassung

Minimieren Sie die Abhängigkeit von HTML von CSS

Webseiten-Skins: gleiche HTML-Struktur, unterschiedliche CSS-Stile

Hier sind einige Beiträge von Gray Bull WEB-Studenten

Als wir zum ersten Mal mit der Erstellung von Webseiten in Berührung kamen, erfuhren wir, dass HTML die Struktur, CSS den Stil und JavaScript das Verhalten darstellt. Bei der Erstellung von Webseiten haben wir immer das Prinzip der Trennung von Struktur und Ausdruck betont. Die Struktur bezieht sich hier im Allgemeinen auf HTML. Bedeutet Trennung außerdem, sie in verschiedene Dateien zu schreiben und darauf zu verweisen? Natürlich nicht. Wir haben hier gelernt, dass Trennung nicht nur eine Methode, sondern auch eine Idee ist. Kurz gesagt, eine zweidimensionale Koordinatenebene, bei der die x-Achse die technologische Entwicklung und die y-Achse die Anforderungen der Webseitenproduktion darstellt, die Trennung wird auf der Grundlage der technologischen Entwicklung und unserer Anforderungen an die Webseitenproduktion erreicht!

Beispiel: Wenn wir ein Haus bauen, entspricht HTML der Struktur des Hauses, CSS der späteren Dekoration und alle Webseiten werden basierend auf einem Effekt erstellt. Wenn wir im Internet surfen, sind die Stile je nach den verschiedenen Darstellungen unterschiedlich, sodass die von uns durchsuchten Seiten abwechslungsreich sind. Wie gestalten wir also die Webseiten? Denken Sie zunächst nicht zu viel über CSS-Stile nach. Versuchen Sie, unsere HTML-Struktur sinnvoll, prägnant und semantisch zu gestalten, und fügen Sie dann den CSS-Stil hinzu und verbessern Sie ihn!

Wenn wir die Seite aufrufen, haben verschiedene Hersteller unterschiedliche Links zum Strukturstil. Je nach der unterschiedlichen Tiefe des Verständnisses dieses Strukturstils wird er vorläufig in drei verschiedene Ebenen unterteilt: Grundstufe, Mittelstufe und Fortgeschrittene;

Ein gewöhnliches Dialogfeld hat beispielsweise 3 Einheiten. Zuerst müssen wir eine Einheit fertigstellen und dann STRG+V für die andere drücken. Wenn ein Primärproduzent die Seite erhält, teilt er sie normalerweise entsprechend den oben stehenden Feldern auf. Ein großes Div enthält 2 kleine Divs, die links und rechts schweben, mit img auf der linken Seite und p, h und anderen Tags auf der rechten. Was den Zeitfaktor betrifft, wird er durch die Positionierung mit dem Positionsattribut realisiert. Der folgende Code erklärt dies.

<div Klasse="demo1">
            <div Klasse="fl">
                <img src="../../images/head02.jpg" alt="">
            </div>
            <div class="fr">
                <span>vor 10 Minuten</span>
                <h6>Nach und nach weggehen und keine Bücher mehr</h6>
                <p>
                Fühlen Sie sich jeden Tag beschäftigt und haben viele Gedanken im Kopf, aber wenn Sie genau darüber nachdenken, wissen Sie nicht, womit Sie wirklich beschäftigt sind? Nur indem Sie gute Gewohnheiten entwickeln, gut auf sich selbst aufpassen und Ihren Träumen folgen, können Sie Ihre Produktivität steigern. Dies bedeutet auch, Ihre Beziehung zu Ihrer Familie und Ihren Freunden zu verbessern, denn wenn Sie sich ändern, ändert sich alles um Sie herum. Von welchen Gewohnheiten leistungsstarker Menschen lohnt es sich, zu lernen?    
                </p>
            </div>
        </div>
        <div Klasse="demo2">
                <img src="../../images/head02.jpg" alt="">
            <div class="fr">
                <span>vor 10 Minuten</span>
                <h6>Nach und nach weggehen und keine Bücher mehr</h6>
                <p>
                Fühlen Sie sich jeden Tag beschäftigt und haben viele Gedanken im Kopf, aber wenn Sie genau darüber nachdenken, wissen Sie nicht, womit Sie wirklich beschäftigt sind? Nur indem Sie gute Gewohnheiten entwickeln, gut auf sich selbst aufpassen und Ihren Träumen folgen, können Sie Ihre Produktivität steigern. Dies bedeutet auch, Ihre Beziehung zu Ihrer Familie und Ihren Freunden zu verbessern, denn wenn Sie sich ändern, ändert sich alles um Sie herum. Von welchen Gewohnheiten leistungsstarker Menschen lohnt es sich, zu lernen?    
                </p>
            </div>
        </div>
        <div Klasse="demo3">
                <img src="../../images/head02.jpg" alt="">
                <span class="time">vor 10 Minuten</span>
                <h6>Nach und nach weggehen und keine Bücher mehr</h6>
                <p>
                Fühlen Sie sich jeden Tag beschäftigt und haben viele Gedanken im Kopf, aber wenn Sie genau darüber nachdenken, wissen Sie nicht, womit Sie wirklich beschäftigt sind? Nur indem Sie gute Gewohnheiten entwickeln, gut auf sich selbst aufpassen und Ihren Träumen folgen, können Sie Ihre Produktivität steigern. Dies bedeutet auch, Ihre Beziehung zu Ihrer Familie und Ihren Freunden zu verbessern, denn wenn Sie sich ändern, ändert sich alles um Sie herum. Von welchen Gewohnheiten leistungsstarker Menschen lohnt es sich, zu lernen?    
                </p>
            </div>
        </div>

=> 3 verschiedene Demos stellen 3 verschiedene Seitenstrukturen dar || Schreiben Sie den gemeinsamen Teil der Seitenstruktur, um Folgendes anzuzeigen:

/*zurücksetzen*/
        Textkörper, Div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, vor, Formular, Feldsatz, Eingabe, Textbereich, p, Blockzitat, th, td {Rand: 0; Polsterung: 0; Listenstil: keine; Schriftart: 12px/1,5 „Arial“, „sans-serif“, „Microsoft YaHei“, „Songti“, „Tahoma“}
        
        /*Allgemeine Stile*/
        .demo1,.demo2{
            Breite: 600px;
            Rand oben: 20px;
            Überlauf: versteckt;
            Rand unten: 20px;
        }
        P{
            Textausrichtung: Blocksatz;
            Texteinzug: 2em;
            Zeilenhöhe: 24px;
        }

=>Primärer Produzent CSS

/*primär*/
        .demo1{
            Breite: 600px;
            Rand oben: 20px;
            Überlauf: versteckt;
        }
        .demo1 .fl{
            Breite: 100px;
            schweben: links;
        }
        .demo1 .fl img{
            Rand links: 20px;
            Polsterung: 10px;
            Rand: 1px durchgezogen #ccc;
        }
        .demo1 .fr{
            Breite: 488px;
            schweben: rechts;
            Rand: 1px durchgezogen #ccc;
            Position: relativ;
            Polsterung: 5px;
        }
        .demo1 .fr span{
            Position: absolut;
            rechts: 18px;
            oben: 5px;
        }

=>Intermediate Maker CSS hat im Vergleich zum primären eine vereinfachte Struktur, wobei das Div auf der linken Seite entfernt und der rechte Teil beibehalten wird;

/*dazwischenliegend*/
        .demo2 .fr{
            Breite: 488px;
            schweben: rechts;
            Rand: 1px durchgezogen #ccc;
            Position: relativ;
            Polsterung: 5px;
        }
        .demo2 .fr span{
            Position: absolut;
            rechts: 18px;
            oben: 5px;
        }
        .demo2 img{
            Rand links: 20px;
            Polsterung: 10px;
            Rand: 1px durchgezogen #ccc;
        }

=>Advanced Maker CSS: Schreiben Sie zuerst den Code entsprechend der Struktur und Semantik, nehmen Sie dann das CSS-Styling vor, wodurch die Übereinstimmung von CSS mit HTML (Dokumentenbewegung, Bildverschiebung, Positionierungsattribute) verringert wird.

/*gehoben*/
        .demo3{
            Rand: 1px durchgezogen #ccc;
            Breite: 488px;
            Rand links: 100px;
            Polsterung: 5px;
            Position: relativ;
        }
        .demo3 img{
            schweben: links;
            Rand: -6px 0 0 -86px;
            Polsterung: 10px;
            Rand: 1px durchgezogen #CCCCCC;
        }
        .demo3 span{
            Position: absolut;
            oben: 10px;
            rechts: 20px;
        }

Fazit: Wenn Sie ein Webdesign erhalten, sollten Sie zunächst die Beziehung zwischen den Text- und Inhaltsmodulen beobachten und sich auf das Schreiben von semantischem HTML-Code konzentrieren, anstatt zu viel über den Layoutstil zwischen den Designs nachzudenken. Warten Sie, bis der HTML-Code bearbeitet ist, und überlegen Sie dann, wie Sie ihn implementieren möchten. Bemühen Sie sich, den vom Design geforderten visuellen Effekt zu erzielen, ohne die vorhandene Seitenstruktur zu ändern! (Klicken Sie hier, um den vollständigen Code der Struktur- und Leistungsprinzipien des einfachen Webseitenlayouts herunterzuladen.)

Oben finden Sie ausführliche Informationen zu den Struktur- und Ausdrucksprinzipien eines einfachen Webseitenlayouts. Weitere Informationen zu den Struktur- und Ausdrucksprinzipien eines einfachen Webseitenlayouts finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!