Mit CSS3 ein Dokument Gliederung erstellen ist nützlich, wenn eine Seite eine Menge Material enthält, und Sie wollen, dass der Benutzer es leicht zu navigieren. Der Umriss stützt sich auf die verschiedenen Tags, die Sie zur Verfügung stellen. Die aktuelle Methode ein Dokument Umriss der Erstellung ist die zu verwenden

durch

Tags.

Dieser Ansatz funktioniert gut, wenn das Material von der gleichen Seite kommt oder Sie haben die Kontrolle über die Formatierung des Inhalts. Es ist nicht ganz so gut funktionieren, wenn der Inhalt von einem anderen Ort kommt, weshalb die Standards Gruppen mit einer völlig neuen Art und Weise musste kommen, um Dinge zu tun.

Das folgende Verfahren zeigt eine Technik zum Hinzufügen einer Kontur zu einer Seite, die bereits ein Menü enthält. Sie verwenden die Navigation als Ausgangspunkt.

1. Öffne das navigation.html Datei und fügen Sie den folgenden Code am Ende der Abschnitt (nach dem bestehenden Menü).

2. Hauptüberschrift 1
3. Sub Heading 1
4. Sub Heading 2
5. Hauptüberschrift 2
6. Sub Rubrik 3
7. Sub Rubrik 4



Hauptüberschrift 1

einführendes Material

Sub Heading 1

Artikel

Sub Heading 2

Artikel

Hauptüberschrift 2

einführendes Material

Sub Rubrik 3

Artikel

Sub Rubrik 4

Artikel

Die Einträge bestehen aus einem Dokument Umriss und der damit verbundenen Inhalte. Der Umriss speziell folgt der

und

Objekte in diesem Beispiel. Es gibt Methoden für diese Art der Inhalte zu erzeugen automatisch, aber alle erfordern Codierung.

Dies ist ein Fall, in dem die Verwendung von CSS ist eine manuelle Codierung beinhalten, die Sie nicht ausführen müssen, wenn andere Techniken, wie zB javascript. Allerdings ist der Vorteil, dass das Beispiel mit jedem Browser funktionieren wird, die CSS unterstützt.

8. Speichern Sie die HTML-Datei.

9. Öffnen Sie Navigation.CSS und geben Sie die folgenden Stile am Ende der Datei.

   #DocOutline {Font-family: Arial, Helvetica, sans-serif-font-size: 14px; width: 145px; height: 800px;} # DocOutline ul {margin-bottom: 20px; list-style: none; margin-left: -40px;} # DocOutline ul ul {margin-left: -20px;} # docContent {margin-top: -800px; margin-left: 150px;}

   Der Schwerpunkt liegt dabei auf dem Dokument Umriss, wo Sie formatiert Links zu den Inhalten auf den Rest der Seite zur Verfügung stellen müssen. Beachten Sie, dass die Kontur auf eine bestimmte Höhe eingestellt wird. Der Grund für diese Einstellung ist es einfacher zu machen, den Inhalt des Dokuments zu positionieren, sobald die Verbindungen angezeigt werden.

   Im Beispiel wird die #DocOutline ul Stil list-style-Eigenschaft auf keine. Sie könnten genauso gut verwenden Zahlen, Buchstaben oder andere Konturierung Index, den Sie bevorzugen.

   Diese Liste wird automatisch indent Hälfte des Abstandes der einzelnen Menüelemente, die Sie zuvor erstellt haben. Um die Links auf der linken Seite der Seite zu platzieren, müssen Sie die Liste der Einzug rückgängig machen, indem margin-left Einstellung -40px, die die Hälfte der 80px Breite der einzelnen Menüelemente ist.

   Jede Ebene wird einige zusätzliche Menge an Vertiefung erfordert, damit der Benutzer die relativen Pegel der einzelnen Einträge sehen können. Die #DocOutline ul ul ändert die Vertiefung für den Second-Level-Positionen. Wenn Sie eine dritte Ebene, deren Positionen hatte, würden Sie einen #DocOutline ul ul ul Stil schaffen es zu formatieren.

   Der Inhalt des Dokuments wird nach dem Dokument Umriss gestartet werden, wenn eines von zwei Dingen geschieht. Erstens können Sie aktuelle Spalten verwenden. Jedoch erfordert diese Funktionalität CSS3. Zweitens können Sie Pseudo-Spalten verwenden. Sie legen die margin-top-Eigenschaftswert gleich der Höhe des Dokuments zu skizzieren.

   Die Technik, die in diesem Beispiel gezeigt wird mit jedem Browser, die CSS voll unterstützt. Beachten Sie, dass Sie müssen ebenfalls eingestellt margin-left auf einen Wert, der die Breite des Dokuments Umriss entspricht (plus ein paar Pixel für Abstand.

10. Speichern Sie die CSS-Datei.

11. Laden Sie die Navigation Beispiel.

    Sie sehen die Gliederung des Dokuments und die damit verbundenen Inhalte. Dieser Umriss tatsächlich funktioniert - Sie Links klicken, können in der Gliederung präsentiert die verschiedenen Header zu gehen.