HTML-strukturierte Implementierungsmethode
|
DIV+CSS-Struktur Lernen Sie CSS-Layout? Sie beherrschen das reine CSS-Layout immer noch nicht vollständig? Es gibt zwei Dinge, die Ihrem Lernen normalerweise im Weg stehen: Die erste Möglichkeit ist, dass Sie noch nicht verstehen, wie CSS Seiten verarbeitet. Bevor Sie über die Gesamtpräsentation Ihrer Seite nachdenken, sollten Sie zunächst die Semantik und Struktur des Inhalts bedenken und dann CSS basierend auf der Semantik und Struktur hinzufügen. In diesem Artikel erfahren Sie, wie Sie Ihr HTML strukturieren. Ein weiterer Grund ist, dass Sie nicht wissen, welche CSS-Anweisungen Sie in die sehr vertrauten Präsentationsattribute (wie etwa Cellpadding, Hspace, Align="left" usw.) umwandeln sollen. Sobald Sie das erste Problem gelöst haben und wissen, wie Sie Ihr HTML strukturieren, gebe ich Ihnen eine Liste mit detaillierten Angaben dazu, welches CSS Sie zum Ersetzen der ursprünglichen Präsentationsattribute verwenden müssen. HTML strukturieren Als wir das erste Mal lernten, wie man Webseiten erstellt, dachten wir immer zuerst über die Gestaltung nach und dachten über Bilder, Schriftarten, Farben und Layoutpläne nach. Anschließend zeichnen wir es in Photoshop oder Fireworks nach und schneiden es in kleine Bilder aus. Abschließend werden durch die HTML-Bearbeitung alle Designs wiederhergestellt und auf der Seite angezeigt. Wenn Sie möchten, dass Ihre HTML-Seite mit CSS (CSS-freundlich) gestaltet wird, müssen Sie zurückgehen und von vorne beginnen. Dabei dürfen Sie nicht zuerst das „Erscheinungsbild“ berücksichtigen, sondern müssen zuerst über die Semantik und Struktur des Inhalts Ihrer Seite nachdenken. Das Aussehen ist nicht das Wichtigste. Eine gut strukturierte HTML-Seite kann in jedem beliebigen Erscheinungsbild präsentiert werden und CSS Zen Garden ist ein klassisches Beispiel. CSS Zen Garden hilft uns, die Leistungsfähigkeit von CSS endlich zu erkennen. HTML ist nicht nur zum Lesen auf einem Computerbildschirm gedacht. Ihre sorgfältig in Photoshop gestalteten Bilder werden möglicherweise nicht auf PDAs, Mobiltelefonen und Bildschirmlesegeräten angezeigt. Aber eine gut strukturierte HTML-Seite kann durch unterschiedliche CSS-Definitionen überall und auf jedem Netzwerkgerät angezeigt werden. Um mit dem Denken beginnen zu können, müssen Sie zunächst lernen, was „Struktur“ ist, was manche Autoren auch „Semantik“ nennen. Dieser Begriff bedeutet, dass Sie Ihre Inhaltsblöcke und den Zweck jedes einzelnen Inhaltselements analysieren und dann die HTML-Struktur entsprechend diesen Inhaltszwecken erstellen müssen. Wenn Sie sich hinsetzen und Ihre Seitenstruktur sorgfältig analysieren und planen, könnte das Ergebnis etwa so aussehen: Logo und Sitename Inhalt der Homepage Site-Navigation (Hauptmenü) Untermenü Suchfeld Funktionsbereich (z.B. Warenkorb, Kassenbereich) Fußzeile (Copyright und zugehörige rechtliche Hinweise) Normalerweise verwenden wir DIV-Elemente, um diese Strukturen zu definieren, etwa so: ＜div id="header"＞＜/div＞ ＜div id="Inhalt"＞＜/div＞ ＜div id="globalnav"＞ ＜/div＞ ＜div id="subnav"＞＜/div＞ ＜div id="Suche"＞＜/div＞ ＜div id="shop"＞＜/div＞ ＜div id="Fußzeile"＞＜/div＞ Es geht nicht um das Layout, sondern um die Struktur. Dies ist eine semantische Beschreibung eines Inhaltsblocks. Sobald Sie Ihre Struktur verstanden haben, können Sie dem DIV die entsprechende ID hinzufügen. Ein DIV-Container kann beliebige Inhaltsblöcke enthalten und auch in einem anderen DIV verschachtelt sein. Inhaltsblöcke können beliebige HTML-Elemente enthalten – Überschriften, Absätze, Bilder, Tabellen, Listen usw. Aufgrund der oben genannten Punkte wissen Sie bereits, wie HTML strukturiert wird und können nun das Layout und den Stil festlegen. Jeder Inhaltsblock kann an einer beliebigen Stelle auf der Seite platziert werden. Anschließend können Farbe, Schriftart, Rahmen, Hintergrund, Ausrichtungseigenschaften usw. des Blocks angegeben werden. Die Verwendung von Selektoren ist eine wunderbare Sache. Der Name der ID ist ein Mittel zur Steuerung eines bestimmten Inhaltsblocks. Indem Sie diesem Inhaltsblock ein DIV hinzufügen und eine eindeutige ID hinzufügen, können Sie CSS-Selektoren verwenden, um das Erscheinungsbild jedes Seitenelements, einschließlich Titel, Listen, Bilder, Links oder Absätze usw., genau zu definieren. Wenn Sie beispielsweise eine CSS-Regel für #header schreiben, kann diese völlig anders sein als die Bildregel in #content. Ein weiteres Beispiel ist, dass Sie die Link-Stile in verschiedenen Inhaltsblöcken durch unterschiedliche Regeln definieren können. So etwas wie: #globalnav a:link oder #subnava:link oder #content a:link. Sie können auch unterschiedliche Stile für dasselbe Element in verschiedenen Inhaltsblöcken definieren. Beispielsweise definieren #content p und #footerp die Stile von p in #content bzw. #footer. Strukturell besteht Ihre Seite aus Bildern, Links, Listen, Absätzen usw. Diese Elemente selbst haben keinen Einfluss darauf, auf welchem Netzwerkgerät (PDA, Mobiltelefon oder Netzwerk-TV) sie angezeigt werden. Sie können als beliebige Präsentationsdarstellung definiert werden. Eine sorgfältig strukturierte HTML-Seite ist sehr einfach, wobei jedes Element für einen strukturellen Zweck verwendet wird. Wenn Sie einen Absatz einrücken möchten, müssen Sie nicht das Blockquote-Tag verwenden. Verwenden Sie einfach das p-Tag und fügen Sie eine CSS-Randregel zu p hinzu, um den Einrückungszweck zu erreichen. p ist ein Struktur-Tag und margin ist ein Präsentationsattribut. Ersteres gehört zu HTML und letzteres zu CSS. (Dies ist die Phasentrennung von Struktur und Ausdruck.) Eine gut strukturierte HTML-Seite enthält fast keine Tags mit Präsentationsattributen. Der Code ist sehr sauber und prägnant. Beispielsweise kann der ursprüngliche Code <tablewidth="80%" cellpadding="3" border="2"align="left"> jetzt in HTML als <table> geschrieben werden, und alle Leistungssteuerelemente werden in CSS geschrieben. In strukturiertem HTML ist eine Tabelle eine Tabelle und nichts anderes (sie wird beispielsweise für Layout und Positionierung verwendet). Üben Sie, sich selbst zu strukturieren. Das Obige ist nur die grundlegendste Struktur. In der tatsächlichen Anwendung können Sie die Inhaltsblöcke nach Ihren Bedürfnissen anpassen. DIVs sind häufig verschachtelt, und Sie sehen innerhalb der „Container“-Ebene weitere Ebenen mit einer ähnlichen Struktur wie dieser: <div id="navcontainer"> <div id="globalnav"> ＜ul＞eine Liste＜/ul＞ ＜/div＞ ＜div id="subnav"＞ <ul>eine andere Liste</ul> ＜/div＞ ＜/div＞ Mit verschachtelten Div-Elementen können Sie weitere CSS-Regeln definieren, um die Leistung zu steuern. Sie können beispielsweise #navcontainer eine Regel zuweisen, um die Liste rechtsbündig auszurichten, eine weitere Regel, um die Liste linksbündig für #globalnav auszurichten, und eine weitere Regel, um die Liste linksbündig für #subnav auszurichten. Ersetzen Sie herkömmliche Methoden durch CSS. Die folgende Liste hilft Ihnen dabei, herkömmliche Methoden durch CSS zu ersetzen: HTML-Attribute und entsprechende CSS-Methoden HTML-Attribut CSS-Methode Beschreibung align="left" align="rechts" float: links; float: right; Mit CSS können Sie jedes Element schweben lassen: Bilder, Absätze, Divs, Titel, Tabellen, Listen usw. Wenn Sie das Float-Attribut verwenden, müssen Sie eine Breite für das schwebende Element definieren. marginwidth="0"leftmargin="0" marginheight="0" topmargin="0" margin: 0; Mit CSS kann der Rand für jedes Element festgelegt werden, nicht nur für das Body-Element. Noch wichtiger ist, dass Sie die oberen, rechten, unteren und linken Randwerte eines Elements separat angeben können. vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff; a:besucht: #339; ein:schweben: #999; a:aktiv: #00f; In HTML wird die Farbe eines Links als Wert des Body-Attributs definiert. Der Linkstil ist auf der gesamten Seite gleich. Durch die Verwendung von CSS-Selektoren können Links in verschiedenen Teilen der Seite unterschiedliche Stile haben. bgcolor="#FFFFFF" Hintergrundfarbe: #fff; In CSS kann jedes Element eine Hintergrundfarbe definieren, nicht nur die Body- und Tabellenelemente. bordercolor="#FFFFFF" border-color: #fff; Jedes Element kann einen Rand haben. Oben, rechts, unten und links können Sie separat definieren. border="3"cellspacing="3" border-width: 3px; Mit CSS können Sie die Ränder der Tabelle als einheitlichen Stil definieren oder Farbe, Größe und Stil der oberen, rechten, unteren und linken Ränder separat festlegen. Sie können Tabellen-, td- oder th-Selektoren verwenden. Wenn Sie einen randlosen Effekt festlegen müssen, können Sie die CSS-Definition verwenden: border-collapse: collapse; ＜br löschen="links"＞ ＜br klar="rechts"＞ ＜br löschen="alles"＞ klar: links; klar: richtig; klar: beides; Viele 2- oder 3-spaltige Layouts verwenden die Float-Eigenschaft zur Positionierung. Wenn Sie in der Float-Ebene eine Hintergrundfarbe oder ein Hintergrundbild definieren, können Sie die Clear-Eigenschaft verwenden. cellpadding="3" vspace="3" hspace="3" padding: 3px; Mit CSS können für jedes Element Padding-Attribute festgelegt werden. Ebenso kann das Padding oben, rechts, unten und links separat festgelegt werden. Die Polsterung ist transparent. align="zentriert" Textausrichtung: zentriert; Rand rechts: automatisch; Rand links: automatisch; Die Textausrichtung gilt nur für Text. Blockelemente wie div und p können mit margin-right: auto; und margin-left: auto; horizontal zentriert werden. Einige unglückliche Techniken und Workarounds Aufgrund der unvollständigen Browserunterstützung für CSS müssen wir manchmal auf einige Hacks zurückgreifen oder eine Umgebung (Workarounds) einrichten, damit CSS denselben Effekt wie herkömmliche Methoden erzielt. Beispielsweise müssen bei Elementen auf Blockebene manchmal horizontale Zentrierungstechniken, Boxmodell-Bugtechniken usw. verwendet werden. Alle diese Techniken werden ausführlich in Molly Holzschlags Artikel „Integriertes Webdesign: Strategien für langfristiges CSS-Hack-Management“ erläutert. Eine weitere großartige Ressource für CSS-Techniken ist „Position is Everything“ von Big John und Holly Bergevin. Float-Verhalten verstehen: „Containing Floats“ von Eric Meyer hilft Ihnen zu verstehen, wie Sie die Float-Eigenschaft für das Layout verwenden. Float-Elemente müssen manchmal gelöscht werden. Die Lektüre von „So löschen Sie Floats ohne Strukturmarkierung“ ist sehr hilfreich. |
<<: Detaillierte Erklärung der MySQL-Berechtigungssteuerung
>>: JavaScript implementiert Konstellationsabfragefunktion mit detailliertem Code
Artikel empfehlen
Quellcode der HTML-Einstellungen für die Benutzerregistrierungsseite
Gestalten Sie die oben gezeigte Webseite: <!DOC...
Eine Methode zum Verbergen von Prozessen unter Linux und die dabei auftretenden Fallstricke
Vorwort 1. Die in diesem Artikel verwendeten Tool...
So verwenden Sie Docker zum Bereitstellen von Front-End-Anwendungen
Docker erfreut sich immer größerer Beliebtheit. E...
Implementierungsideen für die Synchronisierung von Docker-Registry-Images
Einleitung Bisher wurden unsere Docker-Images in ...
Prinzipanalyse des UDP-Verbindungsobjekts und Anwendungsbeispiele
Ich habe zuvor zum Einstieg in UDP ein einfaches ...
Zusammenfassung praktischer Fähigkeiten, die häufig in Vue-Projekten verwendet werden
Inhaltsverzeichnis Vorwort 1. Verwenden Sie $attr...
Eine kleine Sammlung von HTML-Meta-Tags
<Head>……</head> gibt den Dateikopf vo...
Praxis der mehrschichtigen verschachtelten Anzeige von Elementtabellen
Es wird eine Liste mit mehreren Bestellungen benö...
js realisiert die Lupenfunktion der Shopping-Website
In diesem Artikel wird der spezifische Code von j...
Vue3 manuelle Kapselung Popup-Box-Komponente Nachrichtenmethode
In diesem Artikel wird der spezifische Code der m...
Zusammenfassung und Praxis des Javascript-Prototyp-Kettendiagramms
Inhaltsverzeichnis Prototypenkette Wir können ein...
Vue implementiert ein verschiebbares Baumstrukturdiagramm
Inhaltsverzeichnis Rekursive Vue-Komponente Drag-...
Flex-Anordnung in CSS darstellen (Layouttool)
In Bezug auf die Anzeige: flexibles Layout: Manch...
Detailliertes Tutorial zur Installation von Prometheus mit Docker
Inhaltsverzeichnis 1. Node Exporter installieren ...
Detaillierte Erläuterung des Beispiels der Caching-Methode von Vue
Kürzlich wurde die neue Anforderung „Front-End-Ca...