Das größte Problem bei der Verwendung von Ebenen auf einer zentrierten Seite ist die Positionierung der Ebene. Wenn die Anzeigeauflösung geändert wird, ändert sich die Position der Ebene relativ zu anderen zentrierten Elementen. In diesem Artikel werden Möglichkeiten vorgestellt, wie Sie verhindern können, dass Ebenen relativ zu anderen zentrierten Elementen falsch ausgerichtet werden.
Absolute Positionierung und relative Positionierung
von Ebenen Absoluter Positionierungscode für Ebenen:
<div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"> </div>
Relativer Positionierungscode der Ebene:
<div id="Layer1" style="position: relative; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
Fügen Sie auf der zentrierten Seite den relativen Positionierungsebenencode ein, und die Position der Ebene befindet sich in der Mitte der Seite. Aber es wurde unbeweglich und unpraktisch in der Handhabung.
Fügen Sie einen absoluten Positionierungscode ein. Wenn links und oben positive und negative Werte enthalten, kann die Ebene nicht zentriert werden. Wenn die Attribute „Links“ und „Oben“ gelöscht sind, kann die Ebene zentriert werden und es gibt keine Fehlausrichtung relativ zu anderen zentrierten Elementen auf der Seite.
Der Unterschied zwischen Zeichnungsebenen und Einfügeebenen
: Verwendung von Zeichnungsebenen:
Verwenden Sie auf einer zentrierten Seite den Code, der die Ebene rendert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div</title>
</head>
<Körper>
<div id="Layer1" style="position:absolute; left:40px; top:30px; width:265px; height:75px; z-index:1"></div>
<div align="center"></div>
</body>
</html>
Einfügeebene verwenden:
Verwenden Sie auf einer zentrierten Seite den Code zum Einfügen einer Ebene:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div2</title>
</head>
<Körper>
<div align="center">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"></div>
</div>
</body>
</html>
Da der mit „Zeichnungsebene“ generierte Code nicht im Zentrierungscode enthalten ist, muss eine Einfügungsebene verwendet werden, um sicherzustellen, dass die Ebene relativ zu anderen Elementen auf der zentrierten Seite nicht falsch ausgerichtet ist.
Bei zentrierten Seiten werden üblicherweise zwei Methoden verwendet, um sicherzustellen, dass es keine Fehlausrichtung der Ebenen relativ zu anderen zentrierten Elementen gibt.
Verwendung der Einfügeebene
1. Platzieren Sie auf einer zentrierten Seite die Einfügemarke im Dokument. Platzieren Sie die Einfügemarke im Beispiel in der Tabelle.
2. Wählen Sie das Menü „Einfügen“/„Ebene“.
3.Eine Ebene wird in das Dokument eingefügt. Im Beispiel wird eine Ebene in die Tabelle eingefügt. Beim Test im IE-Browser und bei Änderung der Auflösung wird der Inhalt der Ebene relativ zu anderen zentrierten Elementen nicht falsch ausgerichtet.
Überprüfen Sie die Eigenschaften dieser Ebene im Eigenschaftenfenster. Diese eingefügte Ebene löscht die Werte „links“ und „oben“.
Diese Methode wird häufig zum Erstellen von Popup-Menüs verwendet.
Verwendung verschachtelter Ebenen
Eine verschachtelte Ebene ist eine Ebene, deren Code in einer anderen Ebene enthalten ist.
Bevor Sie verschachtelte Ebenen verwenden können, müssen Sie zunächst einige Parameter für die Ebene festlegen. Wählen Sie das Menü „Bearbeiten“/„Einstellungen“ und wählen Sie im Dialogfeld „Einstellungen“ die Option „Netscape 4-Kompatibilität: Feste Größe beim Einfügen von Ebenen“, damit die erstellten verschachtelten Ebenen mit dem Netscape 4-Browser kompatibel sein können. Und aktivieren Sie „Verschachtelung: Verschachtelung verwenden, wenn in der Ebene“.
Öffnen Sie das Ebenenbedienfeld und deaktivieren Sie „Überlappung verhindern“.
Verschachtelte Ebene:
Fügen Sie eine Tabelle in eine zentrierte Seite ein und fügen Sie eine Ebene in die Tabelle ein. Diese Ebene wird relativ zur Tabelle nicht falsch ausgerichtet. Verwenden Sie in dieser Ebene den Befehl „Einfügen“/„Ebene“, um eine Unterebene (verschachtelte Ebene) einzufügen. Unabhängig davon, wie Sie diese Unterebene auf der Seite verschieben, wird ihre Position relativ zu anderen zentrierten Elementen nicht verschoben.
In eine eingefügte Ebene können Sie mehrere verschachtelte Ebenen einfügen und die verschachtelten Ebenen dann an die erforderlichen Stellen verschieben, sodass Sie die Ebenen auf der zentrierten Seite nach Belieben verwenden können.
Fazit: Zentrieren Sie die Seite, erstellen Sie Popup-Menüs, verwenden Sie den Befehl „Einfügen/Ebene“, verwenden Sie das Ebenenlayout und platzieren Sie Inhalte in Ebenen, verwenden Sie verschachtelte Ebenen.