Ein erfahrener Fahrer bringt Ihnen bei, wie Sie eine Seite mit guter Kompatibilität schreiben

Bevor Sie eine Seite mit guter Kompatibilität schreiben, müssen Sie zunächst HTML und HTML5 lernen und dann über ein gewisses Verständnis von CSS und CSS3 verfügen.

Nachdem verschiedene Arten von Websites sorgfältig formatiert wurden, haben sie normalerweise ein gewisses Maß an Beherrschung des Frontends und das Schreiben statischer Seiten ist kein großes Problem. Was die Anzahl angeht, handelt es sich um mehr als 3 vollständige Websites.

Erinnerung: Wenn Sie eine Seite mit sehr guter Kompatibilität schreiben möchten, ist js unerlässlich. Für Anfänger ist es etwas schwierig, das Front-End zu erlernen, aber seien Sie nicht schüchtern. Lernen Sie entsprechend dem Lernfortschritt, lernen Sie zuerst HTML + CSS und dann HTML5 + CSS3. Nachdem Sie ein bestimmtes Programm gelernt haben, lernen Sie dann Javascript. Auch wenn es sich um ein Selbststudium handelt, dauert HTML + CSS etwa 2 Monate und Javascript Nehmen Sie sich einen Monat Zeit. Es kann gelernt werden.

Wenn Sie das Obige immer noch nicht wissen, lernen Sie: HTML-Video-Tutorial, HTML5-Tutorial , CSS-Video-Tutorial, CSS3-Video-Tutorial, Javascript-Video-Tutorial.

Ich habe zu viel gesagt, lassen Sie uns darüber sprechen, wie man eine Webseite mit guter Kompatibilität schreibt:

1. Die Dokumentdeklaration ist unerlässlich: < !doctype>

Eigentlich hat dies überhaupt keinen direkten Zusammenhang mit WCAG, aber für eine Seite mit besserer Kompatibilität, insbesondere Abwärtskompatibilität, muss dieses Ding geschrieben werden:

< !doctype>

2. Versuchen Sie, keine Kompatibilitäts-Tags zu verwenden.

Während des Lernprozesses haben Sie bereits eine gewisse Kompatibilität Ich möchte, dass die Wirkung dieses Tags in bestimmten Browsern wirksam wird, insbesondere in H5. Nun sind viele Tags nicht in allen Browsern einheitlich gültig.

3. Stellen Sie sicher, dass Sie das Format löschen, bevor Sie CSS schreiben.

Das Löschen des Tag-Formats ist notwendig, da die meisten Tags kompatibel sind, aber verwendet werden müssen, zum Beispiel das ul-Tag verfügt unter IE6 und 7 standardmäßig über äußere Ränder und unter IE8, Firefox und Google standardmäßig über innere Ränder.

4. Häufige Browserfehler sollten vermieden werden

Zum Beispiel: Wenn in einem verschachtelten p das äußere p keinen Rand hat, wird der obere Rand des inneres p wird ungültig, es wirkt sich direkt auf den äußeren DIV aus (dh auf den Effekt des äußeren p-Rands oben)

5 Das untergeordnete Element ist schwebend und das übergeordnete Element kann das untergeordnete Element nicht umschließen Element standardmäßig

Diese Situation wird im Allgemeinen mit der if-Methode behandelt:

1. Fügen Sie overflow:hidden zum übergeordneten Element hinzu Es muss sichergestellt werden, dass das übergeordnete Element in Zukunft nicht mehr verfügbar ist. Andernfalls wird es nicht angezeigt.

<style type="text/css">
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.p2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
</p>
<p class="p2">
p2 
</p>

2. Fügen Sie nach dem letzten schwebenden untergeordneten Element ein klares schwebendes Element hinzu

<style type="text/css">
.p1{background:#000080;border:1px solid red}
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
<p class="clearfloat"></p>
</p>
<p class="p2">
p2 
</p>

3 Das übergeordnete p definiert Pseudoklassen: after und zoom

/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1}

Prinzip: Nur IE8 und höher sowie Nicht-IE-Browser unterstützen :after Das Prinzip ähnelt in gewisser Weise der Methode 2. Zoom (IE mit Attributen konvertiert) kann das Floating-Problem von IE6 und IE7 lösen

4 . Übergeordnetes Element Auch schwebend 5. Übergeordnetes p definiert Überlauf: Auto 6. Übergeordnetes p definiert Anzeige: Tabelle

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

6. Problem mit der Satzstruktur

Wenn Sie möchten Die Website muss kompatibel sein. Eine gute Kompatibilität ist wie der Bau eines Hauses. Wenn Sie möchten, dass das Haus solide gebaut ist, ist ein solider Rahmen die Grundlage. Wenn Sie möchten, dass die Website gut kompatibel ist, muss die Rahmenstruktur gut sein Es verfügt über eine gute Skalierbarkeit. Dies gilt sowohl für das Front- als auch für das Backoffice.

Wie sollte das Front-End-Framework eingerichtet werden? Ich denke, wir können auf folgende Aspekte achten:

Die hierarchische Struktur muss kurz analysiert werden, das heißt, es gibt die Konzepte von obere, mittlere, untere, linke, mittlere und rechte Ebene: Die Struktur sollte zuerst groß und dann klein gemacht werden. Wenn es beispielsweise in der Mitte einer Webseite eine linke und eine rechte Ebene gibt, ist dies der Fall Am besten ist es, ein großes in der Mitte zu haben, dann links, dann rechts

Die beste Reihenfolge ist: Zuerst oben, dann unten, zuerst links, dann rechts, zuerst außen, dann innen, zuerst ganz, dann teilweise

7. In Bezug auf Positionierung und Floating usw.

Wenn einige Schüler eine Abweichung in der Struktur haben, fügen sie den Elementen plötzlich nach Belieben Positionierungs- oder Floating-Attribute hinzu Er findet, dass es in Ordnung ist. Man kann nur sagen, dass es einen visuellen Effekt erzielt hat, aber er weiß nicht, ob die Webseitenkompatibilität gut ist oder nicht.

Das ist ein bisschen so, als würde man ein Huhn mit einem Metzgermesser töten. Es ist überqualifiziert und sehr unangemessen. Verwenden Sie also das, was verwendet werden sollte, und positionieren Sie es nicht einfach, schweben Sie es usw.

8. CSS-Schreibprobleme

Versuchen Sie, die Eltern-Kind-Beziehung zum Definieren zu verwenden, zum Beispiel: #top .left img{}, dies verbessert die Skalierbarkeit und Wird in Zukunft nicht mehr vorkommen. Die neue Klasse „left“ steht im Konflikt mit dieser left. Solange die ID nicht wiederholt definiert wird, ist sie in Ordnung.