Wie baue ich eine feste Breite Floating-Layout für die HTML5 und CSS3 Programmierung

Fluid-Layouts sind grandios. Sie sind sehr flexibel, und sie sind nicht schwer in HTML5 und CSS3 zu bauen. Manchmal aber ist es schön, ein fester Breite Layout zu verwenden, insbesondere, wenn Sie Ihr Layout zu einem bestimmten Hintergrundbild anpassen möchten.

Das primäre Merkmal einer fester Breite Layout ist die Verwendung einer festen Mess (fast immer Punkte), anstatt die prozentualen Messungen in einem Fluid Layout verwendet.

bild0.jpg

So richten Sie den HTML-Code

Wie üblich ist der HTML-Code minimal. Es enthält ein paar Namen divs.

fixedWidth.html
Feste Breite-Layout
Linke Spalte
Rechte Spalte
Fußzeile

Befestigen Sie die Breite mit CSS

Nachdem der HTML eingerichtet ist, können Sie CSS verwenden, um die Zwei-Säulen-Schema zu erzwingen.

Hier ist der CSS-Code:

#header {background-color: # e2e393-border-bottom: 3px solid black-text-align: center-width: 800px; padding-top: 1em -} # links {float: left; width: 200px; clear: left; border-right: 1px solid schwarz-height: 30em-overflow: auto-padding-right: .5em -} # rechts {float: left; width: 570px; height: 30em-overflow: auto-padding-left: .5em- } #footer {width: 800px; text-align: center-background-color: # e2e393-border-top: 3px Doppel schwarz-klar: both-}

Es ist alles ziemlich einfach:

  1. Farbe jedes Element, um zu sehen, was passiert.

    Beginnen Sie, indem sie jeweils eine andere Hintergrundfarbe div damit Sie sehen können, was geschieht.

  2. Bestimmen Sie die Gesamtbreite des Layouts.

    Wählen Sie eine Zielbreite für das gesamte Layout. 800 Pixel wurde gewählt, weil es sich um eine ziemlich Standardbreite ist.

  3. Passen Sie die Breite der Seitenbreite Elemente.

    Es ist oft am einfachsten mit Elementen wie Kopf- und Fußzeile zu starten, die oft über die gesamte Breite des Designs in Anspruch nehmen.

  4. Float die Spalten.

    Schwimmer jede Spalte auf der linken Seite.

  5. Legen Sie die Spaltenbreiten.

    Beginnen Sie, indem die Spaltenbreiten auf die Breite des gesamten Entwurfs addieren. Später werden Sie ein wenig für Ränder und Grenzen anpassen.

  6. Deaktivieren Sie in der linken Spalte.

    Achten Sie darauf, die linke Spalte hat die clear: left Regel angewendet.

  7. Set Säulenhöhen.

    Geben Sie jeder Spalte die gleiche Höhe. Das macht die Dinge richtig aussehen, wenn Sie Grenzen oder Hintergrundfarben zu den Spalten hinzufügen.

  8. Stellen Sie Grenzen und Polsterung.

    Verwenden Sie Grenzen, Polsterung und Marge Ihre Seite anpassen, um das Aussehen, die Sie wollen.

  9. Passen Sie wieder Breiten.

    Hinzufügen von Rahmen, Polsterung und Marge können die Breiten der vorhandenen Elemente zu ändern. Nachdem Sie diese Attribute geändert haben, werfen Sie einen sorgfältigen Blick auf Ihr Layout sicher zu sein, dass die unterschiedlichen Breiten bei Bedarf nicht bekommen vermasselt, und zu ändern.

Ähnliche

Menü