Sie können absolute Positionierung verwenden, um anHTML5 und CSS3 Seitenlayout erstellen. Dieser Prozess beinhaltet einige Kompromisse. Sie neigen dazu, eine bessere Kontrolle über Ihre Seite mit absoluter Positionierung zu bekommen (im Vergleich zu Floating-Techniken), aber absolute Layout mehr Planung und mehr Liebe zum Detail erfordert.

Die Technik zum Erzeugen einer absolut positioniert Layout ist ähnlich zu dem Floating-Technik (im allgemeinen Sinne).

Übersicht der absoluten Layout

Bevor Sie Ihre Seite zusammen mit der absoluten Positionierung beginnen setzen, ist es gut, den gesamten Prozess zu planen. Hier ist ein Beispiel dafür, wie der Prozess gehen sollte:

1. Planen Sie die Website.

   aussehen wird eine Zeichnung zu haben, das, wie Sie Ihre Website-Layout spezifiziert ist wirklich wichtig. In der absoluten Positionierung ist Ihre Planung noch wichtiger als die Floating-Designs, da Sie die Größe und Position jedes Elements angeben.

2. Geben Sie eine Gesamtgröße.

   Diese besondere Art von Layout hat eine feste Größe. Erstelle ein alle div Gehäuse alle anderen Elemente und die Größe dieses div (in einer festen Einheit für jetzt angeben, in der Regel px oder em).

3. Erstellen Sie die HTML.

   Die HTML-Seite eine benannte div für jeden Teil der Seite haben sollte (wenn Sie also Header haben, Spalten und Fußzeilen, benötigen Sie ein div für jeden).

4. Bauen Sie ein CSS-Stylesheet.

   Die CSS-Stile können interne oder verknüpft sein, sondern weil die absolute Positionierung ein wenig mehr Markup als schwebend, externe Arten bevorzugt sind, zu verlangen, neigt.

5. Identifizieren jedes Element.

   Es ist einfacher zu sehen, was los ist, wenn Sie einen anderen farbigen Rand zu jedem Element zugeordnet werden.

6. Machen Sie jedes Element absolut positioniert.

   Set position: absolute in dem CSS für jedes Element in der Anordnung.

7. Geben Sie die Größe der einzelnen Elemente.

   Stellen Sie den Höhe und Breite jedes Element nach Ihrem Diagramm. (Sie tat machen ein Diagramm, nicht wahr?)

8. Bestimmung der Position jedes Elements.

   Verwenden Sie die links und oben Attribute, um zu bestimmen, wobei jedes Element in der Anordnung hinausgeht.

9. Tune-up Ihr ​​Layout.

   Sie wollen wahrscheinlich Ränder und Grenzen einzustellen. Sie müssen möglicherweise einige Anpassungen machen es alle Arbeit zu machen.

Wie die HTML zu schreiben

Der HTML-Code ist ziemlich einfach:

 
Layout mit Absolute Positionierung
 

Die HTML-Datei ruft ein externes Stylesheet namens absLayout.css.

Fügen Sie die CSS

Der CSS-Code ist etwas langatmig, aber nicht zu schwer:

/ * AbsLayout.css * / # all {border: 1px solid black-width: 800px; height: 600px; position: absolute-left: 0px; top: 0px;} # Kopf {border: 1px solid green-Position: Absolut- Breite: 800px; height: 100px; top: 0px; left: 0px; text-align: center -} # Menü {border: 1px solid rot-position: absolute-width: 140px; height: 500px; top: 100px; links: 0px; padding-left: 5px; padding-right: 5px;} # content {border: 1px solid blue-position: absolute-width: 645px; height: 500px; top: 100px; links: 150px; padding-left: 5px; }

Ein statisches Layout mit absoluter Positionierung erstellt hat einige wichtige Funktionen im Auge zu behalten:

• Sie sind verpflichtet, alles zu positionieren. Nachdem Sie die absolute Positionierung beginnen, müssen Sie es auf Ihrer Website zu nutzen. Alle wichtigen Seitenelemente erfordern absolute Positionierung, da der normale Fluss Mechanismus ist nicht mehr vorhanden.

  verwenden Sie können immer noch das Layout Floating innerhalb ein Element mit absoluter Position, aber alle Ihre Hauptelemente (Überschrift, Säulen und Fundament) müssen absolute Position haben, wenn einer von ihnen tut.

• Sie sollten Größe und Position angeben. Mit einem schwimmenden Layout, sind ermutigend Sie immer noch eine gewisse Menge an Flüssigkeit. Absolute Positionierung bedeutet, Sie nehmen die Verantwortung sowohl für die Form und Größe der jeder Element im Layout.

• Absolute Positionierung ist weniger anpassungsfähig. Mit dieser Technik sind Sie ziemlich gebunden an eine bestimmte Bildschirmbreite und Höhe. Sie werden Schwierigkeiten haben, zu Tabletten und Handys anzupassen.

• Alle Breiten und die Höhen zu addieren. Wenn Sie die Größe Ihrer Anzeige ermitteln, werden alle Höhen, Breiten, Ränder, Polsterung und Rahmen müssen addieren, oder Sie werden einige seltsame Ergebnisse. Wenn Sie die absolute Positionierung verwenden, sind Sie wahrscheinlich auch einige Zeit mit Ihrem Rechner zu verbringen, alle Breiten herauszufinden und die Höhen.