Web-Rekonstruktionstechniken und Lösungen für häufige Probleme
1. xhtml+CSS-Kenntnisse
●Vorbereitende Arbeiten vor dem Refactoring:
1. Holen Sie sich ein PSD-Rendering. Es muss PSD sein, damit Sie es selbst freier schneiden können.
2. Erstellen Sie zunächst eine Webseite, ohne die PSD aufzuteilen, und nennen Sie sie index_psd.html (diese Seite dient als Referenz);
3. Bereiten Sie mehrere erforderliche Ordner „images“ (für Bilder), „css“ (für Dateien im CSS-Stil) und „js“ (für JS-Dateien) vor.
●Nachdem die Vorbereitungen abgeschlossen sind, analysieren Sie zunächst die Struktur der gesamten Seite. Um die Struktur der Seite zu analysieren, betrachten Sie zunächst das Ganze und dann die Teile. Schauen Sie sich zunächst an, wie die größten Abschnitte der Seite zusammenhängen, ob sie oben und unten nebeneinander angeordnet oder links und rechts gekachelt sind. Nachdem Sie die große Abschnittsstruktur der Seite deutlich gesehen haben, können Sie die grundlegendsten Blöcke der Seite erstellen. Wenn unsere Seite beispielsweise eine obere, mittlere und untere Struktur hat, können wir schreiben:
<div id=“header“></div>//Kopfzeile und Navigation usw. platzieren.
<div id="content"></div>//Themeninhalt der Seite
<div id=“footer“></div>//Seitenfuß-Copyright-Erklärung usw.
● Beim Schreiben von CSS müssen Sie die Datei index_psd.html verwenden und den Ansichtsmodus auswählen. Sie können die Länge und Breite jedes Blocks messen, um eine Referenz zum Festlegen von CSS bereitzustellen Dies hat den Vorteil, dass die rekonstruierte Seite auf 1 Pixel genau sein kann.
●Jedes Mal, wenn Sie einen Block schreiben, müssen Sie IE und ff verwenden, um den Effekt zu testen, damit Probleme sofort erkannt und gelöst werden können. Wenn jeder Block keinen Inhalt hat, ist es am besten, ihm eine Hintergrundfarbe hinzuzufügen.
●Nachdem Sie den großen Abschnitt geschrieben haben, analysieren Sie den Inhalt des großen Abschnitts. Das gleiche Prinzip besteht darin, mit dem Ganzen und dann mit den Teilen zu beginnen. Die Inhaltsseite sieht beispielsweise so aus, als gäbe es zwei Abschnitte auf der linken und rechten Seite Zeit können wir den Code wie folgt schreiben:
<div id=“header“></div>//Kopfzeile und Navigation usw. platzieren.
<div id="content">//Themeninhalt der Seite
<div class="content-2-1"></div>//Links
<div class="content-2-2"></div>//right
</div>
<div id=“footer“></div>//Seitenfuß-Copyright-Erklärung usw.
Tabelle 2 in Inhalt 2-1 ist in zwei Spalten unterteilt, wobei 2-1 die linke Spalte und 2-2 die rechte Spalte darstellt. Diese Spaltenteilungsmethode kann die Anzeige des Seitencodes intuitiver gestalten Spalten, dies Die Vorteile liegen auf der Hand.
●Nachrichtenlisten, Artikellisten usw. werden am besten verwendet:
<ul>
<li>News Titel 1< >
<li>News Titel 2< >
…………
<li>News Titlen< >
</ul>
●Die Spaltenliste plus Beschreibung wird am besten verwendet:
<dl>
<dt>Spalte 1</dt>
<dl>Beschreibung von Spalte 1</dl>
<dt>Spalte 2</dt>
<dl>Beschreibung von Spalte 2</dl>
</dl>
●Am besten fügen Sie die folgende Anweisung am Anfang der CSS-Dateidefinition hinzu
body,html{ height:100% }
*{ margin:0px; padding:0px }
●Für große Blöcke ist es am besten, overflow::hidden festzulegen, um sicherzustellen, dass der Container nicht gestreckt wird und dadurch das Layout der gesamten Seite zerstört wird.
2. DIV+CSS-Probleme
1. IE6 unerwartetes leeres Problem:
Wenn mehrere kleine Blöcke nebeneinander in einem großen Block angeordnet sind, ist die Summe der Breiten der kleinen Blöcke gleich der Breite des großen Blocks. Dies ist in anderen Browsern wie FF kein Problem, in IE6 jedoch nur Wenn er nicht angezeigt werden kann, wird er darunter geschoben. Zu diesem Zeitpunkt können Sie das CSS des kleinen Blocks so einstellen, dass Folgendes angezeigt wird: inline. Wenn dies nicht funktioniert, reduzieren Sie die Breite jedes Blocks um 1 oder 2 Pixel.
2. IE6-Ghosting-Problem:
In IE6 werden manchmal einige Zeichen am Ende des Div-Inhalts wiederholt am Ende eines großen DIV angezeigt, was in anderen Browsern wie FF nicht angezeigt wird. Es gibt zwei Möglichkeiten, dieses Problem zu lösen: 1) Löschen Sie den Kommentar. 2) Fügen Sie <div class="clear"></div> nach diesem DIV hinzu. Definieren Sie den CSS-Stil von clear als:
.klar {
Schriftgröße: 1px;
klar: beides;
Sichtbarkeit: verborgen;
Breite: 1px;
}
Es wird empfohlen, die zweite Methode zu verwenden. Wenn die Kommentare entfernt werden, wird die Lesbarkeit des Codes beeinträchtigt.
3． Problem damit, dass IE6 nicht zentrieren kann:
Im Allgemeinen können Sie, solange Sie den CSS-Stil für ein Div festlegen (seine ID auf 1 setzen): margin:0px auto;, das Div in dem Container zentrieren, in dem es sich befindet (seine ID auf 0 setzen). wie folgt:
<div id="0">
<div id="1"> … </div>
</div>
Aber IE6 funktioniert nicht. Zu diesem Zeitpunkt können Sie das CSS von div0 festlegen: text-align: center;
4. Unerwartete Ränder erscheinen auf verknüpften Bildern in IE6
In IE6 haben verknüpfte Bilder manchmal einen hässlichen Rand, der durch <a> verursacht wird. Dies kann durch Setzen eines { border:0px;} in CSS beseitigt werden.
5. Der Inhalt im DIV in FF ist entgleist
Manchmal sind Inhalte, die im IE normal aussehen, in FF zu sehen, der Inhalt innerhalb des DIV ist jedoch nach außen verschoben. Diese Situation ist besonders offensichtlich, wenn das Div einen Rand hat. Dies liegt daran, dass nach dem Festlegen der Höhe des Div im IE die Höhe des Div automatisch zunimmt, wenn der Inhalt im Div höher als das Div ist. Aber FF ist nicht so flexibel, solange die Höhe begrenzt ist, ändert es sich nicht von selbst. Zu diesem Zeitpunkt können Sie dieses Problem lösen, indem Sie die Höhe zurücksetzen oder die Höhe auf „Automatisch“ einstellen.
6． Bereich verschwindet unerwartet in FF
Ein normales Layout im IE ist in FF verschwunden. Dieses Problem tritt häufig im Copyright-Block in der unteren Ecke der Seite auf. Dies kann durch Hinzufügen von „clear:both;“ zu diesem Bereich gelöst werden.
Andere Probleme fallen mir im Moment nicht ein. Während des Rekonstruktionsprozesses wird es immer einige unerklärliche Probleme geben. Solange Sie gut nachdenken, sich die Mühe machen und online suchen, werden Sie immer eine Lösung finden. Die Lösung jedes Problems ist ein großer Gewinn.