So verwenden Sie CSS für das Webseitenlayout-CSS-Tutorial-php.cn

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 www.xiaoli.com“, wenn die beiden Dokumente Daten austauschen, wird die -Kennung nicht verwechselt, da sie zu einem anderen Namensraum gehört.

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 und ,

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 die Groß-/Kleinschreibung beachtet ein anderes Etikett. XHTML erfordert, dass alle Tag- und Attributnamen in Kleinbuchstaben geschrieben sein müssen. Beispiel: <BODY> muss als <body> geschrieben werden. Auch die gemischte Groß-/Kleinschreibung wird nicht erkannt. Normalerweise muss auch der von Dreamweaver automatisch generierte Attributname „onMouseOver“ in „onmouseover“ geändert werden. 3. Alle XML-Tags müssen angemessen verschachtelt sein Außerdem muss die gesamte Verschachtelung in der richtigen Reihenfolge erfolgen: /b> muss geändert werden in: /p> Das heißt, die Verschachtelung Schicht für Schicht muss streng symmetrisch sein. 4. Alle Attribute müssen in Anführungszeichen gesetzt werden. In HTML müssen Sie Attributwerte nicht in Anführungszeichen setzen, in XHTML jedoch Muss zitiert werden. Beispiel: <height=80> muss geändert werden in: <height="80"> In besonderen Fällen müssen Sie doppelte Anführungszeichen im Attributwert verwenden. Sie können „ verwenden, einfache Anführungszeichen können „ verwenden, zum Beispiel: <alt="say'hello'"> 5. Verwenden Sie die Kodierung, um alle Sonderzeichen < und & darzustellen Jedes Kleiner-als-Zeichen (<), das nicht Teil des Tags ist, muss als & l t; codiert werden. Jedes Größer-als-Zeichen (>), das nicht Teil des Tags ist des Tags muss als > codiert werden. Jedes kaufmännische Und (&), das nicht Teil einer Entität ist, muss als & a m p; codiert werden Zeichen. >6. Weisen Sie allen Attributen einen Wert zu XHTML schreibt vor, dass alle Attribute einen Wert haben müssen. Wenn kein Wert vorhanden ist, wird dieser wiederholt ><td nowrap> <input type="checkbox" value="medium" selected> ="shirt" value="medium" reviewed="checked"> 7. Verwenden Sie nicht „--“ im Kommentarinhalt „-- " kann nur am Anfang und am Ende von XHTML-Kommentaren stehen, d. h. sie sind im Inhalt nicht mehr gültig. Beispielsweise ist der folgende Code ungültig:  Ersetzen Sie die internen gepunkteten Linien durch Gleichheitszeichen oder Leerzeichen <!--Dies ist ein Kommentar==== ========Dies ist ein Kommentar- -> Einige der oben genannten Spezifikationen mögen seltsam erscheinen, aber sie alle zielen darauf ab, unserem Code einen einheitlichen und einzigartigen Standard zu verleihen, um zukünftige Daten zu erleichtern wiederverwenden. <h2>Tag 7: Einführung in CSS </h2> Nachdem wir die XHTML-Codespezifikationen verstanden haben, fahren wir mit dem CSS-Layout fort. Lassen Sie uns zunächst einige Einführungskenntnisse in CSS einführen. Wenn Sie bereits damit vertraut sind, können Sie diesen Abschnitt überspringen und direkt mit dem nächsten Abschnitt fortfahren. CSS ist die Abkürzung für Cascading Style Sheets. Es handelt sich um einen einfachen Mechanismus zum Hinzufügen von Stilen zu Webdokumenten und gehört zur Layoutsprache der Präsentationsebene. 1. Grundlegende Syntaxspezifikationen Analyse einer typischen CSS-Anweisung: p {COLOR: #FF0000; BACKGROUND: #FFFFFF} Wir nennen „p“ „Selektoren“, was darauf hinweist, dass wir einen Stil für „p“ definieren möchten Die Stildeklaration wird in ein Paar geschweifter Klammern „{}“ geschrieben; FARBE und HINTERGRUND werden als „Eigenschaften“ bezeichnet, und verschiedene Eigenschaften werden durch Semikolons „;“ getrennt. „#FF0000“ und „#FFFFFF“ sind die Werte der Eigenschaften (Wert). . 2. Farbwert Der Farbwert kann als RGB-Wert geschrieben werden, zum Beispiel: Farbe: rgb(255,0,0), oder als Hexadezimalwert. wie im obigen Beispiel color:#FF0000. Wenn die Hexadezimalwerte paarweise wiederholt werden, können sie mit dem gleichen Effekt abgekürzt werden. Beispiel: #FF0000 kann als #F00 geschrieben werden. Es kann jedoch nicht abgekürzt werden, wenn es sich nicht wiederholt. Beispielsweise muss #FC1A1B mit sechs Ziffern gefüllt werden. 3. Schriftarten definieren Webstandards empfehlen die folgende Schriftartdefinitionsmethode: body { Schriftfamilie: „Lucida Grande“, Verdana, Lucida, Arial, Helvetica, Song Dynasty, serifenlos } Die Schriftarten werden in der angegebenen Reihenfolge ausgewählt. Wenn der Computer des Benutzers die Schriftart Lucida Grande enthält, wird das Dokument als Lucida Grande bezeichnet. Wenn nicht, wird sie als Verdana-Schriftart bezeichnet, wenn es keine Verdana-Schriftart gibt, wird sie als Lucida-Schriftart bezeichnet und so weiter. Die Lucida-Grande-Schriftart ist für Mac OS X geeignet Die Schriftart ist für alle Windows-Systeme geeignet. Lucida ist für UNIX-Benutzer geeignet. "Songti" ist für vereinfachte chinesische Benutzer geeignet. Wenn keine der aufgeführten Schriftarten verfügbar ist , die standardmäßige serifenlose Schriftart wird garantiert aufgerufen; 4. Gruppenselektor Wenn mehrere Elemente dieselben Stilattribute haben, können sie eine Anweisung aufrufen zusammen, und die Elemente werden durch Kommas getrennt: p, td, li { Schriftgröße : 12px } Abgeleiteter Selektor Selektor zum Definieren untergeordneter Elemente in einem Elementstil, zum Beispiel: li strong { Font-Style: Italic; Font-Weight: Normal;} dient zum Definieren eines kursiven, aber nicht fetten Stils für das Unterelement strong unter li. 6.id-Selektor Das CSS-Layout wird hauptsächlich mithilfe der Ebene „p“ implementiert, und der Stil von p wird durch „id-Selektor“ definiert. Beispielsweise definieren wir zunächst eine Ebene und definieren diese dann im Stylesheet so: #menubar { MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} Wobei „menubar“ der von Ihnen definierte ID-Name ist. Beachten Sie das „#“-Zeichen davor. id-Selektor unterstützt auch die Ableitung, zum Beispiel: #menubar p { text-align : right; 10px; } Diese Methode wird hauptsächlich verwendet Definition Ebenen und solche, die komplexer sind und mehrere abgeleitete Elemente haben. 7. Kategorieauswahl Verwenden Sie einen Punkt in CSS, um die Kategorieauswahldefinition zu starten, zum Beispiel: .14px {color : # f60 ;font-size:14px ;} Verwenden Sie auf der Seite die Methode class="category name" zum Aufrufen von: Schriftart mit 14px-Größe < ;/span> Diese Methode ist relativ einfach und flexibel und kann jederzeit je nach Seitenbedarf erstellt und gelöscht werden. 8. Definieren Sie den Linkstil Vier Pseudoklassen werden in CSS verwendet, um den Linkstil zu definieren, nämlich: a:link, a:visited, a: Hover und ein : aktiv, zum Beispiel: a:link{font-weight :bold ;text-decoration : none ;color : #c00 ;} a:visited {font-weight :bold ; text -decoration: none; Farbe: #c30; text -decoration : none ;color : #F90 ;} Die obigen Anweisungen definieren jeweils die Stile von „Links, besuchte Links, wenn die Maus darüber ist und wenn mit der Maus geklickt wird“. Beachten Sie, dass Sie in der oben genannten Reihenfolge schreiben müssen, da die Anzeige sonst möglicherweise anders ausfällt als erwartet. Denken Sie daran, dass die Reihenfolge „LVHA“ lautet. Haha, nach so viel Lektüre wird mir etwas schwindelig. Tatsächlich gibt es noch viele weitere grammatikalische Spezifikationen für CSS. Hier sind nur einige, die wir Schritt für Schritt verwenden Wir können nicht mit einem Bissen dick werden:) <h2>Tag 8: Einführung in das CSS-Layout</h2> Der größte Unterschied zwischen dem CSS-Layout und dem herkömmlichen Tabellenlayout besteht darin, dass die ursprüngliche Positionierung Tabellen verwendet, indem der Abstand der Tabellen oder die Verwendung farbloser und transparenter GIF-Bilder zur Steuerung verwendet wird Abstand der Textlayoutabschnitte; jetzt wird die Ebene (p) zur Positionierung verwendet, und der Abstand der Abschnitte wird durch den Rand, den Abstand, den Rahmen und andere Attribute der Ebene gesteuert. 1. Definieren Sie p Analysieren Sie ein typisches Beispiel für die Definition von p: #sample{ MARGIN: 10px 10px 10px 10px; PADDING :20px 10px 10px 20px; BORDER-TOP: #CCC 2px durchgehend; RAND-RECHTS: #CCC 2px durchgehend; RAND-UNTEN: #CCC 2px durchgehend; RAND-LINKS: # CCC 2px durchgehend; HINTERGRUND: url(images/bg_poem.jpg) #FEFEFE ohne Wiederholung rechts unten; FARBE: #666; TEXT-ALIGN: Mitte; LINIENHÖHE: 150 %; WIDTH:60%; } Die Beschreibung lautet wie folgt: Sie können diesen Stil mit aufrufen ; auf der Seite. RAND bezieht sich auf den Leerraum, der außerhalb des Ebenenrandes verbleibt und für Seitenränder oder zum Erstellen einer Lücke zu anderen Ebenen verwendet wird. „10px 10px 10px 10px“ stellt jeweils die vier Ränder von „oben, rechts, unten und links“ dar (im Uhrzeigersinn). Wenn sie alle gleich sind, können sie als „MARGIN: 10px;“ abgekürzt werden. Wenn der Rand Null ist, schreiben Sie „MARGIN: 0px;“. Hinweis: Wenn der Wert Null ist, muss mit Ausnahme des RGB-Farbwerts 0 %, dem ein Prozentzeichen folgen muss, in anderen Fällen die Einheit „px“ nicht gefolgt werden. MARGIN ist ein transparentes Element und kann keine Farbe definieren. PADDING bezieht sich auf den Abstand zwischen dem Rand der Ebene und dem Inhalt der Ebene. Geben Sie wie beim Rand den Abstand vom oberen, rechten, unteren und linken Rand zum Inhalt an. Wenn sie alle gleich sind, können sie mit „PADDING:0px“ abgekürzt werden. Um die linke Seite individuell festzulegen, können Sie „PADDING-LEFT: 0px;“ schreiben. PADDING ist ein transparentes Element und kann keine Farbe definieren. BORDER bezieht sich auf den Rand der Ebene: „BORDER-RIGHT: #CCC 2px solid;“ definiert die rechte Randfarbe der Ebene als „#CCC“, die Breite als „2px“ und den Stil als „durchgezogene“ Gerade. Wenn Sie einen gepunkteten Linienstil wünschen, können Sie „gepunktet“ verwenden. BACKGROUND definiert den Hintergrund der Ebene. Es ist in zwei Ebenen definiert. Definieren Sie zunächst den Bildhintergrund und definieren Sie mit „url(../images/bg_logo.gif)“ den Hintergrundbildpfad. „no-repeat“ bedeutet, dass das Hintergrundbild nicht wiederholt werden muss, wenn Sie es horizontal wiederholen müssen, verwenden Sie „repeat-x“, um es vertikal zu wiederholen, verwenden Sie „repeat-y“ und um es abzudecken Um den gesamten Hintergrund anzuzeigen, verwenden Sie „Wiederholen“. Das folgende „rechts unten;“ bedeutet, dass das Hintergrundbild in der unteren rechten Ecke beginnt. Wenn kein Hintergrundbild vorhanden ist, können Sie nur die Hintergrundfarbe HINTERGRUND definieren: #FEFEFE COLOR wird verwendet, um die Schriftfarbe zu definieren, die im vorherigen Abschnitt eingeführt wurde. TEXT-ALIGN wird verwendet, um die Anordnung des Inhalts in der Ebene zu definieren: Die Mitte ist in der Mitte, links ist links und rechts ist rechts. LINE-HEIGHT definiert die Zeilenhöhe, die 150 % der Standardhöhe beträgt. Sie kann auch wie folgt geschrieben werden: LINE-HEIGHT:1.5 oder LINE-HEIGHT:1.5em die gleiche Bedeutung. WIDTH ist die Breite der definierten Ebene, die ein fester Wert sein kann, wie zum Beispiel 500 Pixel, oder ein Prozentsatz, wie hier „60 %“. Bitte beachten Sie, dass sich diese Breite nur auf die Breite Ihres Inhalts bezieht und keinen Rand, Rand und Abstand enthält. In einigen Browsern ist dies jedoch nicht so definiert, sodass Sie mehr ausprobieren müssen. Das Folgende ist die tatsächliche Leistung dieser Ebene: <img src="http://www.csswebs.org/images/arrow.gif" alt="So verwenden Sie CSS für das Webseitenlayout" > Demoseite Wir können sehen, dass der Rand 2 Pixel grau ist und das Hintergrundbild befindet sich nicht in der unteren rechten Ecke. Wiederholen Sie den Vorgang. Der Abstand zwischen dem Inhalt und dem linken Rand beträgt 20 Pixel, der Inhalt ist zentriert und alles ist wie erwartet. Hoho, obwohl es nicht gut aussieht, ist es das einfachste. Wenn Sie es beherrschen, haben Sie die Hälfte der CSS-Layout-Technologie gelernt. Das ist alles, es ist überhaupt nicht schwierig! (Was ist die andere Hälfte? Die andere Hälfte ist die Positionierung zwischen den Ebenen. Ich werde es später Schritt für Schritt erklären.) 2. CSS2-Boxmodell Seitdem 1996 Mit der Einführung von CSS1 im Jahr 2017 empfahl die W3C-Organisation, alle Objekte auf der Webseite in einer Box zu platzieren. Designer können die Eigenschaften dieser Box steuern, indem sie Definitionen erstellen. und Ebene. Das Box-Modell definiert hauptsächlich vier Bereiche: Inhalt, Innenabstand, Rand und Rand. Die Beispielebene, über die wir oben gesprochen haben, ist eine typische Box. Anfänger sind oft verwirrt über die Ebenen, Beziehungen und gegenseitigen Einflüsse zwischen Rand, Hintergrundfarbe, Hintergrundbild, Innenabstand, Inhalt und Rand. Hier ist ein schematisches 3D-Diagramm des Boxmodells. Ich hoffe, es ist für Sie leichter zu verstehen und zu merken. <img src="http://www.csswebs.org/articles/Archiver/images/cssbox3d.gif" alt="So verwenden Sie CSS für das Webseitenlayout" > 3. Alle Hilfsbilder sollten eine Hintergrundverarbeitung verwenden Verwenden Sie das XHTML+CSS-Layout, es gibt eine Technologie, die Sie nicht nutzen Zunächst sollte gesagt werden, dass sich die Denkweise vom traditionellen Tabellenlayout unterscheidet, das heißt: Alle Hilfsbilder werden mit Hintergrund realisiert. Etwas in der Art: HINTERGRUND: url(images/bg_poem.jpg) #FEFEFE no-repeat rechts unten;Obwohl es möglich ist, <img> direkt in den Inhalt einzufügen, wird dies nicht empfohlen. Die „Hilfsbilder“ beziehen sich hier auf Bilder, die nicht Teil des auf der Seite auszudrückenden Inhalts sind, sondern nur der Dekoration, der Pause und der Erinnerung dienen. Zum Beispiel: Bilder in Fotoalben, Bilder in Bildnachrichten und die Bilder des 3D-Boxmodells oben sind alle Teil des Inhalts. Sie können mit dem <img>-Element direkt in die Seite eingefügt werden, während andere wie Logos aussehen. Titelbilder und Listenpräfixe müssen mit Hintergrund- oder anderen CSS-Methoden angezeigt werden. Dafür gibt es zwei Gründe: <img src="http://www.csswebs.org/images/arrow.gif" alt="So verwenden Sie CSS für das Webseitenlayout" > Die Leistung vollständig von der Struktur trennen (siehe einen anderen Artikel: „Leistung verstehen“ Getrennt von der Struktur"), wobei CSS verwendet wird, um das gesamte Erscheinungsbild und die Leistung zu steuern und so eine einfache Überarbeitung zu ermöglichen. <img src="http://www.csswebs.org/images/arrow.gif" alt="So verwenden Sie CSS für das Webseitenlayout" > Machen Sie die Seite benutzerfreundlicher und benutzerfreundlicher. Wenn beispielsweise ein Blinder einen Screenreader nutzt, werden Bilder, die mit Hintergrundtechnologie umgesetzt wurden, nicht vorgelesen. <h2>Tag 9: Erstes CSS-Layout-Beispiel </h2> Der nächste Schritt besteht darin, das Layout tatsächlich zu entwerfen. Wie bei der herkömmlichen Methode müssen Sie sich zunächst eine grobe Skizze im Kopf machen und diese dann in Photoshop zeichnen. Sie sehen vielleicht, dass die meisten Websites im Zusammenhang mit Webstandards sehr einfach sind, da Webstandards mehr Wert auf Struktur und Inhalt legen. Tatsächlich besteht kein grundsätzlicher Konflikt mit der Schönheit von Webseiten. Sie können das Layout nach Ihren Wünschen gestalten wird mit der herkömmlichen Tabellenmethode implementiert. Technologie hat einen Reifeprozess. Stellen Sie sich p als dasselbe Werkzeug wie TABLE vor. Wie Sie es verwenden, hängt von Ihrer Vorstellungskraft ab. Hinweis: In der tatsächlichen Anwendung ist p an manchen Stellen tatsächlich nicht so praktisch wie eine Tabelle, beispielsweise bei der Definition der Hintergrundfarbe. Aber alles hat Vor- und Nachteile, und die Wahl hängt von Ihrem Werturteil ab. Okay, ohne weitere Umschweife, fangen wir an: <h2>1. Bestimmen Sie das Layout </h2> Die erste Entwurfsskizze von w3cn lautet wie folgt: <img src="http://www.csswebs.org/articles/Archiver/images/copy_w3cnhome.gif" alt="So verwenden Sie CSS für das Webseitenlayout" > Wenn Sie die Tabellenentwurfsmethode verwenden, handelt es sich normalerweise um ein dreireihiges Layout <img src="http://www.csswebs.org/articles/Archiver/images/layout_table.gif" alt="So verwenden Sie CSS für das Webseitenlayout" > . Wenn ich p verwende, würde ich die Verwendung von drei Spalten für das Layout in Betracht ziehen, etwa so <img src="http://www.csswebs.org/articles/Archiver/images/layout_css1.gif" alt="So verwenden Sie CSS für das Webseitenlayout" > . <h2>2. Definieren Sie den Textkörperstil </h2> Definieren Sie zunächst den Körperstil der gesamten Seite. Der Code lautet wie folgt: body { MARGIN: 0px; PADDING: 0px; BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat rechts unten; FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode' ,'宋体', 'New Song Dynasty',arial,verdana,sans-serif; FARBE: #666; FONT-SIZE:12px; LINE-HEIGHT:150%; } Der obige Code Die Funktion wurde im Tutorial vom Vortag ausführlich erklärt, sodass jeder sie auf einen Blick verstehen sollte. Der Randrand ist als 0 definiert, die Hintergrundfarbe ist bg_logo.gif, das Bild befindet sich in der unteren rechten Ecke der Seite und die Schriftgröße ist nicht als 12 Pixel definiert Die Schriftfarbe ist #666; die Zeilenhöhe beträgt 150 %. <h2>3. Definieren Sie das Haupt-P</h2> Als ich das CSS-Layout zum ersten Mal verwendete, entschied ich mich für ein dreispaltiges Layout mit fester Breite (einfacher als das adaptive Auflösungsdesign, hoho, nicht wahr). Nenn mich faul, setze zuerst etwas Einfaches um, stärke dein Selbstvertrauen!). Definieren Sie die Breite links, in der Mitte und rechts auf jeweils 200:300:280, die in CSS wie folgt definiert sind: /*Definieren Sie den Stil der linken Spalte der Seite*/ #left { WIDTH:200px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #CDCDCD; } /*Definieren Sie den Spaltenstil auf der Seite*/ #middle { POSITION: absolut; LINKS:200px; OBEN:0px; BREITE:300px; RAND: 0px; PADDING: 0px; HINTERGRUND: #DADADA; } /*Definieren Sie den Stil der rechten Spalte der Seite */ #right{ POSITION: absolut; LINKS:500px; OBEN:0px; WIDTH:280px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #FFF; } Hinweis: Ich habe POSITION: absolute; verwendet, um p in der mittleren Spalte und der rechten Spalte zu definieren, und dann definiert LEFT:200px;TOP:0px; bzw. LEFT:500px;TOP:0px ;Das ist der Schlüssel zu diesem Layout, ich habe die absolute Positionierung der Ebenen verwendet. Definieren Sie die mittlere Spalte so, dass sie 200 Pixel vom linken Rand der Seite und 0 Pixel vom oberen Rand entfernt ist. Definieren Sie die rechte Spalte so, dass sie 500 Pixel vom linken Rand der Seite und 0 Pixel vom oberen Rand entfernt ist. Der Code der gesamten Seite lautet derzeit: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> < ;head> <title>Willkommen beim neuen „Web Designer“: Web-Standard-Tutorial und Werbung

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:

Was sind Webstandards?

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
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
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!