Heim > Artikel > Web-Frontend > So verwenden Sie CSS für das Webseitenlayout
So verwenden Sie CSS für das Webseitenlayout
- 巴扎黑Original
- 2017-03-30 15:20:152679Durchsuche
Tag 1: Welchen DOCTYPE Sie wählen sollten
Vorwort
Hallo zusammen! Diese Artikelserie basiert auf Ajies eigenem Prozess zur Erstellung der Website w3cn.org. Ajie hat noch nie zuvor eine Website erstellt, die wirklich den Webstandards entspricht. Jetzt verweise ich auf fremde Materialien und schreibe dabei meine Gedanken und Erfahrungen auf. Ich hoffe, dass es für alle hilfreich ist. Okay, fangen wir an.
Am ersten Tag
Beginnen Sie mit der Erstellung einer Website, die den Standards entspricht. Als Erstes müssen Sie einen DOCTYPE deklarieren, der Ihren Anforderungen entspricht.
Sehen Sie sich den Originalcode der Homepage dieser Website an. Sie können sehen, dass die erste Zeile lautet:
Öffnen Sie einige Websites, die Standards entsprechen, wie zum Beispiel die berühmte Webdesign-Software Auf der Website des Entwicklers Macromedia und des Personal Design Master Zeldman finden Sie denselben Code. Der Code für andere standardkonforme Websites (wie k10k.net) lautet wie folgt:
Was bedeuten diese Codes? Muss es platziert werden?
Was ist DOCTYPE?
Wir nennen den obigen Code eine DOCTYPE-Anweisung. DOCTYPE ist die Abkürzung für Dokumenttyp und wird verwendet, um anzugeben, welche Version von XHTML oder HTML Sie verwenden.
Die DTD (z. B. xhtml1-transitional.dtd im obigen Beispiel) wird als Dokumenttypdefinition bezeichnet, die die Regeln des Dokuments enthält. Der Browser interpretiert die Identität Ihrer Seite basierend auf der DTD definiert und angezeigt.
Um standardkonforme Webseiten zu erstellen, ist die DOCTYPE-Deklaration eine wesentliche und kritische Komponente. Sofern Ihr XHTML keinen korrekten DOCTYPE bestimmt, werden weder Ihr Logo noch Ihr CSS wirksam.
XHTML 1.0 bietet drei DTD-Deklarationen zur Auswahl:
Übergang: Eine DTD mit sehr lockeren Anforderungen, die es Ihnen ermöglicht, weiterhin die HTML4.01-Markierung zu verwenden (muss jedoch der XHTML-Schrift entsprechen). Verfahren). Der vollständige Code lautet wie folgt:
Streng: Für eine strikte DTD können Sie keine Bezeichner und Attribute der Präsentationsebene wie
verwenden. Der vollständige Code lautet wie folgt:
Frameset: Eine DTD, die speziell für Frame-Seiten entwickelt wurde. Wenn Ihre Seite einen Frame enthält, müssen Sie diese DTD verwenden. Der vollständige Code lautet wie folgt:
Welchen DOCTYPE wählen wir
Die ideale Situation ist natürlich eine strenge DTD, aber für die meisten von uns Designern, die neu im Web sind Standards ist Transitional DTD (XHTML 1.0 Transitional) derzeit die ideale Wahl (einschließlich dieser Website, die ebenfalls Transitional DTD verwendet). Da diese DTD es uns auch ermöglicht, Bezeichner, Elemente und Attribute der Präsentationsschicht zu verwenden, ist es auch einfacher, die W3C-Codeüberprüfung zu bestehen.
Hinweis: Die oben erwähnten „Identifikationen und Attribute der Präsentationsschicht“ beziehen sich auf diejenigen Tags, die ausschließlich zur Steuerung der Leistung verwendet werden, wie z. B. Tabellen für den Schriftsatz, die Identifizierung der Hintergrundfarbe usw. In XHTML werden Tags zur Darstellung von Strukturen und nicht zur Erzielung einer Präsentation verwendet. Der Zweck unseres Übergangs besteht letztendlich darin, Daten und Präsentation zu trennen.
Zum Beispiel: Eine Schaufensterpuppe zieht sich um. Das Modell ist wie Daten, und die Kleidung ist die Ausdrucksform. Das Modell und die Kleidung sind getrennt, sodass Sie die Kleidung nach Belieben wechseln können. Im ursprünglichen HTML4 waren Daten und Präsentation miteinander vermischt, und es war sehr schwierig, die Präsentationsform auf einmal zu ändern. Haha, es ist ein bisschen abstrakt. Dieses Konzept muss während des Bewerbungsprozesses schrittweise verstanden werden.
Ergänzend
Die DOCTYPE-Deklaration muss oben in jedem XHTML-Dokument platziert werden, vor allem im Code und Markup.
Weitere Informationen finden Sie auf der W3C-Website
Tag 2: Was ist ein Namespace?
Nachdem der DOCTYPE deklariert wurde, lautet der nächste Code:
Normalerweise ist unser HTML4.0-Code nur , was ist hier „xmlns“?
Diese „xmlns“ ist die Abkürzung für den XHTML-Namespace, der als „Namespace“-Deklaration bezeichnet wird. Welche Rolle spielt der Namespace? Ajies eigenes Verständnis lautet:
Da Sie mit XML Ihr eigenes Logo definieren können, kann das von Ihnen definierte Logo mit dem von anderen definierten Logo identisch sein, jedoch unterschiedliche Bedeutungen haben. Beim Austausch oder der Weitergabe von Dateien kann es leicht zu Fehlern kommen. Um diesen Fehler zu vermeiden, verwendet XML Namespace-Deklarationen, die es Ihnen ermöglichen, Ihre Identität über eine darauf verweisende URL zu identifizieren. Zum Beispiel:
Sowohl Xiao Wang als auch Xiao Li haben eine
Eine beliebtere Erklärung ist: Ein Namespace dient dazu, ein Dokument zu markieren, um anderen mitzuteilen, wem dieses Dokument gehört. Es ist nur so, dass dieses „Wer“ durch eine Website-Adresse ersetzt wird.
XHTML ist eine Auszeichnungssprache, die von HTML zu XML übergeht. Sie muss den XML-Dokumentregeln entsprechen und daher auch einen Namensraum definieren. Und da XHTML1.0 das Logo nicht anpassen kann, ist sein Namespace derselbe, nämlich „http://www.w3.org/1999/xhtml“. Es macht nichts, wenn Sie es noch nicht ganz verstehen. Zu diesem Zeitpunkt müssen wir nur den Code kopieren. Das lang="gb2312" nach
gibt an, dass Ihr Dokument in vereinfachtem Chinesisch sein soll.
Tag 3: Definieren Sie die Sprachkodierung
Der dritte Schritt besteht darin, Ihre Sprachkodierung zu definieren, etwa so:
Um von Browsern korrekt interpretiert zu werden und die W3C-Codeüberprüfung zu bestehen, müssen wir die von uns verwendete Codierungssprache angeben Im Allgemeinen verwenden wir gb2312 (vereinfachtes Chinesisch). Bei der Erstellung mehrsprachiger Seiten verwenden wir möglicherweise auch Unicode, ISO-8859-1 usw., die entsprechend Ihren Anforderungen definiert werden können.
Normalerweise ist diese Definition ausreichend. Es sollte jedoch hinzugefügt werden, dass XML-Dokumente die Sprachkodierung nicht auf diese Weise definieren:
Ähnliche Aussagen finden Sie in der ersten Codezeile auf der Homepage von Macromedia.com. Dies ist auch die vom W3C empfohlene Definitionsmethode. Warum übernehmen wir also nicht einfach diesen Ansatz? Der Grund dafür ist, dass einige Browser Standards nur unvollständig unterstützen und solche Definitionsmethoden wie IE6/Windows nicht richtig verstehen können. Daher empfehlen wir im Rahmen des aktuellen Übergangsplans weiterhin die Verwendung der Meta-Methode. Natürlich können Sie in beide Richtungen schreiben.
Wenn Sie sich den Quellcode dieser Website ansehen, werden Sie feststellen, dass es einen weiteren Satz gibt, in dem die Sprachkodierung definiert ist:
Dies ist für ältere Browser geschrieben, um sicherzustellen, dass verschiedene Browser die Seite korrekt interpretieren können.
Hinweis: Am Ende der obigen Deklarationsanweisung sehen Sie einen Schrägstrich „/“, der sich von unserem vorherigen HTML4.0-Code-Schreiben unterscheidet. Der Grund dafür ist, dass die XHTML-Syntaxregeln erfordern, dass alle Tags einen Anfang und ein Ende haben müssen. Zum Beispiel
usw. Bei ungepaarten Bezeichnern ist es erforderlich, am Ende des Bezeichners ein Leerzeichen hinzuzufügen, gefolgt von einem „/“ ". Beispielsweise wird
als
geschrieben, und wird als
geschrieben. Der Grund für das Hinzufügen von Leerzeichen besteht darin, zu verhindern, dass der Browser die Codes nicht zusammen erkennt.
Tag 4: Aufrufen von Stylesheets
Die Verwendung von Webstandards zum Entwerfen von Websites besteht hauptsächlich darin, XHTML+CSS-Stylesheets zu verwenden. Dies erfordert, dass alle Webdesigner CSS beherrschen. Wenn Sie es noch nicht verwendet haben, beginnen Sie jetzt mit dem Lernen. Um eine Website zu erstellen, die den Webstandards entspricht, können Sie ohne CSS-Kenntnisse keine schönen Seiten entwerfen.
Tatsächlich müssen alle Aspekte der Leistung mit CSS implementiert werden. Früher haben wir für die Positionierung und das Layout die Tabelle verwendet, jetzt müssen wir für die Positionierung und das Layout p verwenden. Das ist eine Umstellung der Denkweise, die zunächst etwas unangenehm ist. Haha, es wird Widerstand gegen jede Änderung geben. Um die „Vorteile“ zu genießen, die Standards mit sich bringen, lohnt es sich, einige alte traditionelle Praktiken aufzugeben.
Extern aufrufende Stylesheets
In der Vergangenheit haben wir Stylesheets normalerweise auf zwei Arten verwendet:
Inline-Methode auf der Seite: das heißt, Einfügen des Stylesheets Schreiben Sie direkt in den Kopfbereich des Seitencodes. Ähnlich:
Warum muss man es zweimal schreiben?
Tatsächlich reicht es unter normalen Umständen aus, die externe Link-Methode (also den ersten Satz) zu verwenden. Der Doppeltabellenaufruf, den ich hier verwende, ist nur ein Beispiel. Zur Eingabe des Stylesheets dient der Befehl „@import“. Der Befehl „@import“ ist in Netscape 4.0-Browsern ungültig. Mit anderen Worten: Wenn Sie möchten, dass bestimmte Effekte im Netscape 4.0-Browser ausgeblendet und in 4.0 oder höher oder anderen Browsern angezeigt werden, können Sie das Stylesheet mit der Befehlsmethode „@import“ aufrufen.
Tag 5: Weitere Einstellungen im Head-Bereich
Diese Tipps konzentrieren sich hauptsächlich auf Meta-Tag-Einstellungen. Tatsächlich haben sie wenig mit der Einhaltung von Webstandards zu tun. Achten Sie einfach darauf, sie am Ende hinzuzufügen, um das Tag zu schließen. Da es sich jedoch um ein Einführungstutorial handelt, schreiben wir es ausführlicher.
Favoritensymbol
Wenn Sie diese Site zu Ihren Favoriten hinzufügen, können Sie sehen, dass das IE-Symbol vor der Favoriten-URL zu einem speziellen Symbol für diese Site wird. Um diesen Effekt zu erzielen, ist es sehr einfach, zunächst ein 16x16-Symbol zu erstellen, es favicon.ico zu nennen und es im Stammverzeichnis abzulegen. Anschließend betten Sie den folgenden Code in den Kopfbereich ein:
< ;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Inhalt für Suchmaschinen
Der Code lautet wie folgt. Ersetzen Sie ihn einfach durch den Inhalt Ihrer eigenen Website:
Erlauben Sie Suchrobotern, alle Links auf der Website zu durchsuchen. Wenn Sie möchten, dass bestimmte Seiten nicht durchsucht werden, empfiehlt es sich, die robots.txt-Methode zu verwenden. >< meta name="author" content="ajie@netease.com, ajie" />
Urheberrechtsinformationen für die Website festlegen
Eine kurze Einführung in die Website (empfohlen)
Lassen Sie mich zunächst Folgendes vorstellen. Ergänzende Erklärung: In den vorherigen fünf Abschnitten ging es nur um den Code des Kopfbereichs, und der eigentliche Seiteninhalt wurde überhaupt nicht erwähnt. Haha, keine Sorge, der Kopfbereich ist tatsächlich sehr wichtig Designer, indem Sie sich den Kopfcode einer Seite ansehen. Ist sie professionell genug?
Tag 6: XHTML-Codespezifikationen
Bevor wir mit der formalen Inhaltsproduktion beginnen, müssen wir zunächst die Codespezifikationen von Webstandards verstehen. Wenn Sie diese Spezifikationen verstehen, können Sie Umwege vermeiden und die Codeüberprüfung so schnell wie möglich durchführen.
1. Alle Tags müssen ein entsprechendes Schluss-Tag haben
In der Vergangenheit konnten Sie in HTML viele Tags öffnen, z. B.
li>, anstatt unbedingt die entsprechenden Zeichen
zu schreiben. Dies ist jedoch in XHTML nicht legal. XHTML erfordert eine strenge Struktur und alle Tags müssen geschlossen sein. Wenn es sich um ein separates, ungepaartes Tag handelt, fügen Sie am Ende des Tags ein „/“ hinzu, um es zu schließen. Zum Beispiel:
🎜>2. Die Namen aller Tag-Elemente und -Attribute müssen in Kleinbuchstaben angegeben werden
Im Gegensatz zu HTML wird bei
Linke Spalte der Seite
Mittlere Spalte der Seite
Rechte Spalte der Seite
Zu diesem Zeitpunkt ist die Wirkung von Die Seite ist nur in drei Teilen zu sehen: nebeneinander liegende graue Rechtecke und ein Hintergrundbild. Aber ich möchte, dass die Höhe im Vollbildmodus angezeigt wird. Was soll ich tun?
4.100 % adaptive Höhe?
Um die drei Spalten auf der gleichen Höhe zu halten, habe ich versucht, „height:100 in #left, #middle und #right %“ einzustellen ;“, stellte jedoch fest, dass überhaupt kein adaptiver Höheneffekt zu erwarten war. Nach einigen Versuchen musste ich jedem p eine absolute Höhe zuweisen: „height:1000px;“, und mit zunehmendem Inhalt muss dieser Wert ständig überarbeitet werden. Gibt es keine Möglichkeit, die Höhe anzupassen? Als Ajie seine eigene Studie vertiefte, entdeckte er eine flexible Lösung. Tatsächlich besteht keine Notwendigkeit, 100 % zu setzen. Diese Methode wird im nächsten Abschnitt der Studie ausführlich vorgestellt.
Tag 10: Adaptive Höhe
Wenn wir am Ende des 3-Spalten-Layouts eine Fußzeile hinzufügen möchten, um Informationen wie das Urheberrecht einzufügen. Ich bin auf das Problem gestoßen, dass ich den unteren Rand von drei Spalten ausrichten musste. Im Tabellenlayout verwenden wir die Methode, große Tabellen in kleine Tabellen zu verschachteln, wodurch die drei Spalten problemlos mit dem p-Layout ausgerichtet werden können. Die drei Spalten sind unabhängig voneinander verstreut und der Inhalt ist unterschiedlich hoch, was die Ausrichtung erschwert. Tatsächlich können wir p vollständig verschachteln, drei Spalten in ein p einfügen und eine untere Ausrichtung erreichen. Hier ist ein Implementierungsbeispiel (ein weißes Hintergrundfeld simuliert eine Seite):
Der Hauptcode der Seite in diesem Beispiel lautet wie folgt:
Spezifisches Stylesheet Alles ist in den entsprechenden Abschnitten beschrieben. Der entscheidende Punkt ist, dass die #mainbox-Ebene in drei Ebenen verschachtelt ist: #menu, #sidebar und #content. Wenn der Inhalt von #content zunimmt, erhöht sich auch die Höhe von #content und die Höhe von #mainbox wird ebenfalls erweitert, und die #footer-Ebene wird automatisch nach unten verschoben. Dadurch wird ein hohes Maß an Anpassungsfähigkeit erreicht.
Es ist auch erwähnenswert, dass #menu und #content auf der rechten Seite der Seite „FLOAT: right;“ schweben und #sidebar auf der linken Seite der #menu-Ebene „FLOAT: left“ schwebt ;“, das ist eine schwebende Methodenpositionierung. Sie können auch die absolute Positionierung verwenden, um einen solchen Effekt zu erzielen.
Bei dieser Methode gibt es ein weiteres Problem: Der Hintergrund der Seitenleiste #sidebar kann nicht 100 % sein. Die allgemeine Lösung besteht darin, es mit der Hintergrundfarbe des Körpers zu füllen. (Die Hintergrundfarbe von #mainbox kann nicht verwendet werden, da die Hintergrundfarbe von #mainbox in Browsern wie Mozilla ungültig ist.)
Okay, das Hauptframework wurde erstellt und die verbleibende Arbeit besteht nur noch aus dem Hinzufügen Ziegel und Fliesen dazu. Wenn Sie andere Layouts ausprobieren möchten, empfiehlt es sich, die folgenden Artikel zu lesen:
Tag 11: Menü ohne Tabellen
Das Layout wurde zunächst eingerichtet und ich begann, den Inhalt darin auszufüllen. Die erste besteht darin, das Logobild zu definieren:
Stylesheet: #logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
Seitencode:
Der obige Code sollte jetzt leicht zu verstehen sein. Definieren Sie zunächst eine Logo-Ebene in CSS und rufen Sie sie dann auf der Seite auf. Es ist zu beachten, dass Webstandards verlangen, dass jeder ein Alt-Attribut zu allen Bildern hinzufügt, die formalen Inhalt haben, um Webseiten benutzerfreundlicher zu machen. Dieses Alt-Attribut wird verwendet, um die Funktion des Bildes zu beschreiben (Ersatztext anzeigen, wenn das Bild nicht angezeigt werden kann). Schreiben Sie also nicht einfach einen bedeutungslosen Bildnamen.
Der nächste Schritt ist das Definitionsmenü.
1. Menü ohne Tabelle (vertikal)
Schauen wir uns zunächst den endgültigen Effekt des Menüs an: Demoseite
Normalerweise verschachteln wir es zumindest Zur Implementierung eines solchen Menüs wird eine 2-Ebenen-Tabelle verwendet, indem die Hintergrundfarbe in td festgelegt wird und der Wechseleffekt der Hintergrundfarbe mithilfe des Onmouseover-Ereignisses von td implementiert wird . Wenn Sie sich jedoch den Seitencode dieses Menüs ansehen, werden Sie feststellen, dass es nur die folgenden Sätze gibt:
- Vorteile der Verwendung von Standards
- Webseitenvorlage herunterladen
- WEB-Standards Verwandte Tutorials
- Webseiten-Erstellungssoftware< ;/li>
- Hilfe verwenden
- Das Geheimnis, die Wirkung des gesamten Menüs zu realisieren, liegt ausschließlich in id=". Menü". Schauen wir uns die Definition von Menü in CSS an:
(1) Zunächst wird der Hauptstil der Menüebene definiert:
#menu {
MARGIN: 15px 20px 0px 15px; /*Definieren Sie den äußeren Randabstand der Ebene*/
PADDING:15px; /*Definieren Sie den inneren Rand der Ebene auf 15px*/
BACKGROUND: #dfdfdf; /*Hintergrundfarbe definieren*/
FARBE: #666; /*Schriftfarbe definieren*/
BORDER:#fff 2px solid; /*Rand als 2px weiße Linie definieren*/
WIDTH:160px; /*Inhaltsbreite als 160 Pixel definieren*/
}
(2) Als nächstes definieren Sie den Stil der ungeordneten Liste:
#menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: mittel, keine; /*Keine Ränder anzeigen*/
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: keine;
}
#menu li {BORDER-TOP : #FFF 1px solid; MARGIN: 0px;}
Hinweis: Hier wird die abgeleitete Methodendefinition des ID-Selektors verwendet (siehe Day 7: Einführung in CSS) für die untergeordneten Elemente in der Menüebene< Stile für ;ul> LIST-STYLE-TYPE: none bedeutet, dass der Standardstil der ungeordneten Liste nicht verwendet wird, d. h. die kleinen Punkte werden nicht angezeigt (wir werden später unsere eigenen Symbole verwenden, um die kleinen Punkte zu ersetzen). BORDER-TOP: #FFF 1px solid; definiert eine 1px-Abstandslinie zwischen Menüs.
(3) Onmouseover-Effekt definieren
#menu li a {
PADDING:5px 0px 5px 15px;
DISPLAY: block;
FONT -GEWICHT: fett;
HINTERGRUND: url(images/icon_dot_lmenu.gif) transparent ohne Wiederholung 2px 8px;
FARBE: #444;
TEXT-DEKORATION: keine;
}
#menu li a:hover { HINTERGRUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
FARBE: #fff; }
Die Erklärung lautet wie folgt:
"display:block;" bedeutet, Tag a als Element auf Blockebene anzuzeigen, wodurch der Link zu einer Schaltfläche wird
"BACKGROUND: url(images/ icon_dot_lmenu.gif ) transparent no-repeat 2px 8px;“ Dieser Satz definiert das Symbol des kleinen Punktes, der li ersetzt. „Transparent“ bedeutet, dass der Hintergrund transparent ist, und „2px 8px“ gibt an, dass die Position des Symbols 2px von links und 8px von oben beträgt. Dieser Satz kann auch in vier Sätze aufgeteilt werden: „BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;“ #menu li a:hover“ definiert den Farbwechsel und den kleinen Symbolwechsel, wenn die Maus über den Link bewegt wird.
OK, so ist das Menü ohne Tabellen implementiert. Man kann deutlich spüren, dass alle ursprünglich in HTML geschriebenen Präsentationsstile entfernt und in CSS-Dateien eingefügt wurden. Der größte Teil des Seitencodes wird gespeichert. Es ist sehr einfach, den Menüstil über CSS zu ändern.
2. Menü ohne Tabelle (horizontal)
Wenn Sie ein horizontales Menü anzeigen möchten, können Sie auch li verwenden? Natürlich ist es möglich. Der Code ist unten angegeben und der Effekt befindet sich oben auf dieser Seite:
Seitencode- Home< li id="two">Über uns< /li>
- Web Standards
- Vorteile von Standards< ;/a> ;
- Verwandte Tutorials
- Tools
- Ressourcen und Links
- FAQ
Stylesheet-Code
# submenu {
RAND: 0px 8px 0px
RAND: #fff 1px fest;
FARBE: #666;
HÖHE :25px; }
#submenu ul {
MARGIN: 0px;
Rand: 0px; : keine;
TEXT-ALIGN: center;
}
#submenu li {
DISPLAY: block; MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center}
#submenu li a {
PADDING:2px 3px 2px 3px; >HINTERGRUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
BREITE: 100%;
TEXT-DEKORATION: keine;
}
#submenu li a:hover {
BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; }
#submenu ul li#one A { WIDTH: 60px}
#submenu ul li#two A { WIDTH: 80px}
#submenu ul li# three A { WIDTH: 80px}
#submenu ul li#four A {WIDTH: 90px}
#submenu ul li# five A {WIDTH: 80px}
#submenu ul li#six A {WIDTH: 80px}
#submenu ul li# seven A { WIDTH: 60px}
#submenu ul li#eight A { WIDTH: 90px}
#submenu ul li#nine A { WIDTH: 80px}
Die oben genannten Codes werden nicht analysiert eins nach dem anderen. Der Schlüssel zum horizontalen Menü ist: die „FLOAT: left;“-Anweisung beim Definieren des - Home< li id="two">Über uns< /li>
- Beachten Sie außerdem den Satz DISPLAY:inline; in der UL-Definition, der bedeutet, dass li als Inline-Objekt dargestellt werden muss und die Zeile aus dem Objekt gelöscht wird. Erzielen Sie eine horizontale Anordnung. Sie können auch die Breite jedes Untermenüs definieren und den Abstand der Menüs steuern, wie im Beispiel gezeigt. Nun, Sie können es auch ausprobieren und li verwenden, um verschiedene Menüstile zu implementieren.
Tipps: Wenn die Summe der Breiten Ihrer Untermenüs größer als die Breite der Ebene ist, wird das Menü automatisch umbrochen. Mit diesem Prinzip können Sie ein 2-Spalten- oder 3-Spalten-Layout eines einzelnen erreichen ungeordnete Liste, was in HTML schwer zu erreichen ist.
Tag 12: Validierung und häufige Fehler
Nachdem wir viele Tage lang hart gearbeitet hatten, arbeiteten wir hart daran, den Umgang mit XHTML+CSS für die Neugestaltung unserer Website zu erlernen. Woher wissen wir also, dass die von uns erstellten Seiten wirklich den Webstandards entsprechen? Das W3C und einige freiwillige Websites bieten Online-Verifizierungsprogramme an, die uns dabei helfen, zu überprüfen, ob die Seiten den Standards entsprechen, und Hilfeinformationen zur Korrektur von Fehlern bereitzustellen. Diese Prüfungen sind sehr nützlich und das Erste, was ich beim Debuggen einer Seite durchführe.
1. , Datei-Upload-Überprüfung
Wenn die Überprüfung erfolgreich ist, wird „Diese Seite ist gültiges XHTML 1.0 Transitional!“ angezeigt, wie in der Abbildung gezeigt:
Verifizierung fehlgeschlagen. Weitere Verifizierungsoptionen und Fehlermeldungen werden angezeigt, wie in der Abbildung dargestellt:
Im Allgemeinen wählen Sie „ „Quelle anzeigen“ und „Ausführliche Ausgabe“ können Ihnen helfen, die Zeile zu finden, in der sich der Fehlercode befindet, und den Fehlergrund.
Häufiger Fehler bei der XHTML-Validierung verursacht Vergleichstabelle
Kein DOCTYPE gefunden! Zurückgreifen auf HTML 4.01 Transitional – DOCTYPE ist nicht definiert.
Keine Zeichenkodierung gefunden! Zurückgreifen auf UTF-8. – Undefinierte Sprachkodierung.
End-Tag für „img“ weggelassen, aber OMITTAG NO wurde angegeben – Das Bild-Tag wird nicht mit „/“ geschlossen.
Eine Attributwertspezifikation muss ein Attributwertliteral sein, es sei denn, SHORTTAG YES ist angegeben. Der Attributwert muss in Anführungszeichen gesetzt werden.
Element „p“ undefiniert---Das p-Tag darf nicht in Großbuchstaben geschrieben werden und muss in Kleinbuchstaben p geändert werden.
erforderliches Attribut „alt“ nicht angegeben---Das Bild muss das alt-Attribut hinzufügen.
erforderliches Attribut „Typ“ nicht angegeben --- Dem von JS oder CSS aufgerufenen Tag fehlt das Typattribut.
Der häufigste Fehler ist die Großschreibung von Etiketten. Normalerweise hängen diese Fehler zusammen. Wenn Sie beispielsweise ein vergessen, melden andere - Die anderen Fehler verschwinden. Wenn Ihre Seite die XHTML1.0-Validierung besteht, können Sie ein Symbol auf der Seite platzieren: Der Code lautet wie folgt:
check/ referer">
< ;/ a>
2.CSS2-Verifizierung
Verifizierungs-URL: http://jigsaw.w3.org/css-validator/
Überprüfungsmethode: URL-Überprüfung, Datei-Upload-Überprüfung, direkte Code-Überprüfung
Wenn die Überprüfung erfolgreich ist, „Herzlichen Glückwunsch, dieses Dokument hat die Stylesheet-Überprüfung bestanden!“, hoho, die Überprüfungsinformationen unterstützen Chinesisch. Wie im Bild gezeigt:
Wenn die Überprüfung fehlschlägt, werden zwei Arten von Fehlern angezeigt: Fehler und Warnungen. Der Fehler bedeutet, dass er korrigiert werden muss, andernfalls wird die Überprüfung nicht bestanden. Die Warnung bedeutet, dass es Code gibt, der vom W3C nicht empfohlen wird, und es wird empfohlen, ihn zu ändern.
Häufiger CSS2-Validierungsfehler verursacht Vergleichstabelle
(Fehler) Ungültige Zahl: color909090 ist kein Farbwert: 909090 --- Hexadezimaler Farbwert muss hinzugefügt werden "# "-Zeichen, also #909090
(Fehler) ungültige Zahl: margin-topUnbekannte Dimension: 6 Pixel ---Pixel sind kein Einheitswert, die korrekte Schreibweise ist 6px
(Fehler) Attribut Scrollbar-Face-Color existiert nicht: #eeeeee --- Definieren Sie die Farbe der Bildlaufleiste als nicht standardmäßiges Attribut
(Fehler) Wert Cursorhand existiert nicht: Hand ist ein Nicht-Standard-Attribut Attributwert, ändern Sie ihn in „cursor:pointer
“ (Warnung) Zeile: 0 Schriftfamilie: Es wird empfohlen, als letzte Auswahl eine Schriftfamilie anzugeben – W3C empfiehlt, beim Definieren von Schriftarten mit einem zu enden Art der Schriftart, z. B. „Sans-Serif“, um sicherzustellen, dass sie in verschiedenen Vorgängen verwendet werden kann. Unter dem System können Web-Schriftarten angezeigt werden.
(Warnung)Zeile: 0 Die Warnmeldung für otherprofile kann nicht gefunden werden. – Zeigt an, dass der Code nicht standardmäßige Attribute oder Werte enthält und das Überprüfungsprogramm die entsprechenden Warninformationen nicht ermitteln und bereitstellen kann .
In ähnlicher Weise können Sie nach bestandener Verifizierung ein CSS-Überprüfungssymbol platzieren. Der Code lautet wie folgt:w3.org/ css-validator/">
-->
Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS für das Webseitenlayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
< ;li>Was sind Webstandards?
< ;/ul>
verwendet keine Tabelle, sondern unsequenziertes
In Verbindung stehende Artikel
Mehr sehen- Wie verstecke ich den Standard-Platzhaltertext im „Element“ von HTML5?
- Warum funktioniert Background-Size: Cover nicht auf Mobile Safari?
- Wie kann ich das Seitenverhältnis eines Elements basierend auf seiner Höhe beibehalten?
- Können CSS-Selektoren auf Elemente basierend auf innerem HTML-Inhalt abzielen?
- Wie werden Formularbeschriftungen neben Eingaben mit Beschriftungen variabler Länge ausgerichtet?