Das CSS-Layout erfordert, dass Sie an das gesamte Layout Ihrer Website denken und dann die Teile nehmen und zusammenfügen. Erfahren Sie, wie Sie mit CSS ein einfaches 3-Spalten-Layout erstellen.
01 von 09Zeichnen Sie Ihr Layout
Sie können Ihr Layout auf Papier oder in einem Grafikprogramm zeichnen. Wenn Sie bereits einen Drahtrahmen oder ein noch umfangreicheres Design vor Augen haben, vereinfachen Sie ihn auf die grundlegenden Boxen, aus denen die Site besteht. Dieser Entwurf, der diesem Artikel beiliegt, hat drei Spalten im Hauptinhaltsbereich sowie eine Kopf- und Fußzeile. Wenn Sie genau hinsehen, können Sie feststellen, dass die drei Spalten nicht gleich breit sind.
Nachdem Sie Ihr Layout erstellt haben, können Sie über Dimensionen nachdenken. Dieses Beispieldesign wird die folgenden grundlegenden Abmessungen haben:
- Nicht mehr als 900 Pixel breit
- 20 px Rinne auf der linken Seite
- 10 px zwischen Spalten und Zeilen
- Spalten, die 250px, 300px und 300px breit sind
- Die oberste Reihe ist 150px groß
- Die unterste Reihe ist 100px groß
Schreiben Sie Basic HTML / CSS und erstellen Sie ein Containerelement
Da diese Seite ein gültiges HTML-Dokument ist, beginnen Sie mit einem leeren HTML-Container
Fügen Sie die grundlegenden CSS-Stile hinzu, um die Seitenränder, -umrandungen und -abstände auf Null zu setzen. Es gibt zwar andere Standard-CSS-Stile für neue Dokumente, aber diese Stile sind das Minimum, das Sie für ein sauberes Layout benötigen. Fügen Sie sie dem Kopf Ihres Dokuments hinzu:
Um mit dem Erstellen des Layouts zu beginnen, fügen Sie ein Containerelement ein. Es kommt manchmal vor, dass Sie den Container später loswerden können, aber bei den meisten Layouts mit fester Breite erleichtert das Containerelement die Verwaltung in verschiedenen Webbrowsern. Also in den Körper: Und in das CSS-Stylesheet einfügen: Der Container definiert, wie breit der Inhalt der Webseite sein wird, sowie um die Außenränder und die Auffüllung innen. In diesem Dokument ist der Container 870 Pixel breit und links eine 20-Pixel-Rinne. Die Dachrinne ist mit einem Randstil eingerichtet, die Auffüllung des Containers wird jedoch auf Null gesetzt, um zu verhindern, dass Elemente so breit wie der Container sind. #container { Breite: 870px; Marge: 0 0 0 20px; / * oben rechts unten links * / Polsterung: 0; } Wenn Sie Ihr Dokument jetzt speichern, ist es schwierig, den Container zu sehen, da er nichts enthält. Wenn Sie Platzhaltertext hinzufügen, können Sie das Containerelement klarer sehen. Wie Sie sich entscheiden, die Kopfzeile zu formatieren, hängt stark von den Inhalten ab. Wenn die Kopfzeile nur eine Logo-Grafik und eine Überschrift enthält, verwenden Sie ein Überschrift-Tag ( Der HTML-Code für die Kopfzeile steht oben im Container und sieht folgendermaßen aus: Um die Stile festzulegen, wurde am unteren Rand ein roter Rand hinzugefügt, damit Sie sehen können, wo er endet, die Ränder und die Auffüllung wurden auf Null gesetzt, die Breite auf 100% und die Höhe auf 150px gesetzt: #container h1 { Marge: 0; Polsterung: 0; Breite: 100%; Höhe: 150px; Schwimmer: links; border-bottom: # c00 solid 3px; } Vergessen Sie nicht, dieses Element mit dem Float zu schwimmen: left; Eigentum. Der Schlüssel zum Schreiben von CSS-Layouts besteht darin, alles zu verschieben, selbst wenn der Container dieselbe Breite hat. Auf diese Weise wissen Sie immer, wo die Elemente auf der Seite liegen. Ein CSS-Nachkommen-Selektor wendete Stile nur auf H1-Elemente an, die sich im #container-Element befinden. Wenn Sie ein dreispaltiges Layout mit CSS erstellen, müssen Sie Ihr Layout in Zweiergruppen aufteilen. Bei diesem dreispaltigen Layout werden die mittlere und rechte Spalte gruppiert und neben der linken Spalte in einem zweispaltigen Layout angeordnet, wobei die linke Spalte 250 Pixel breit ist und die rechte Spalte 610 Pixel breit ist (jeweils 300 für die beiden Spalten) , plus 10px für die Dachrinne zwischen ihnen). Das HTML sieht so aus: Ut aliquip ex ea commodo conformat. Velit esse cillum dolore hat ein Mindestbestellwert, und Lorem ipsum dolor sit amet. In reprehenderit in voluptate quis nostrud Übung eu fugiat nulla pariatur. Dieses Produkt kann nicht mehr als ein einziges Aliquip von einer Ware zum anderen erworben werden. Nur wenige Minuten, aber Sie brauchen nicht mehr, um zu erfahren, wie ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Platzhaltertext in den Spalten macht sie beim Testen besser sichtbar. Das CSS sieht so aus: #container # col1 { Breite: 250px; Schwimmer: links; } #container # col2outer { Breite: 610px; schweben rechts; Marge: 0; Polsterung: 0; } Die linke Spalte wird nach links verschoben, die andere nach rechts. Da die Gesamtbreite beider Spalten 860 Pixel beträgt, gibt es zwischen ihnen eine 10 Pixel-Rinne. Um die drei Spalten zu erstellen, fügen Sie zwei Divs in die breitere zweite Spalte ein, so wie Sie im letzten Schritt zwei Divs in die Containerspalte eingefügt haben. Das HTML sieht so aus: Nur wenige Minuten, aber Sie brauchen nicht mehr, um zu erfahren, wie ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas sitzen aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus. Und das CSS sieht so aus: # col2outer # col2mid { Breite: 300px; Schwimmer: links; } # col2outer # col2side { Breite: 300px; schweben rechts; } Da sich diese zwei 300px breiten Boxen in einer 610px breiten Box befinden, befindet sich zwischen ihnen wieder eine 10px Rinne. Nun, da der Rest der Seite gestaltet ist, können Sie die Fußzeile hinzufügen. Verwenden Sie ein letztes div mit einer "footer" -ID und fügen Sie Inhalt hinzu, damit Sie ihn sehen können. Sie können auch oben einen Rand hinzufügen, damit Sie wissen, wo er beginnt. Das HTML: Das CSS: #container #footer {
Schwimmer: links;
Breite: 870px;
Border-Top: # c00 3px;
} 08 von 09 Nachdem Sie das Layout fertig gestellt haben, können Sie Ihre eigenen persönlichen Stile und Inhalte hinzufügen. Denken Sie daran, dass die Rahmen in der Kopf- und Fußzeile hinzugefügt wurden, um die Layoutabschnitte anzuzeigen, nicht speziell für das Design. Hier ist das gesamte Dokument, HTML und CSS: Gestalten Sie den Container
Verwenden Sie ein Headline-Tag für die Kopfzeile
) ist sinnvoller als eine
Meine Kopfzeile
Um drei Spalten zu erhalten, beginnen Sie mit dem Erstellen von zwei Spalten
Fügen Sie zwei Spalten in der breiten zweiten Spalte hinzu
Fügen Sie die Fußzeile hinzu
Fügen Sie Ihre persönlichen Stile und Inhalte hinzu
Das finale HTML / CSS
