✅ Layout mit CSS-Klassen von 960 Grid System

Inhaltsverzeichnis

Das CSS 960 Grid-System-FrameworkEs ist nichts anderes als eine Standardisierung von Stilen, die die notwendigen Klassen bereitstellt, um Spalten unterschiedlicher Größe in einer Webseite zu implementieren, mit denen unsere Inhalte einfach und geordnet gestaltet werden können.
Das 960 Grid System hat diesen Namen, weil es ein Rastersystem ist, um Seiten mit 960 Pixel Breite zu erstellen. Die Spalten, die wir im Raster platzieren können, haben unterschiedliche Breiten, aber die Gesamtbreite der Seite beträgt immer 960 Pixel.
Mit diesen vordefinierten CSS-Klassen können wir 12 oder 16 Spalten verwenden, um unsere Layouts zu erstellen, jede der Spalten hat einen linken und rechten Rand von 10px, um eine Trennung zwischen den Spalten von 20px zu erreichen. Wenn ich dies weiß, sagen wir, dass, wenn ich 12 Spalten verwende, jede Spalte 60 Pixel groß ist und wenn ich 16 Spalten verwende, wird die Breite jeder Spalte 40 Pixel betragen.
Um eine GUI zu haben, fügen wir ein Bild hinzu, wie die Spalten verteilt sind.
Das Layout ist auf diese Weise sehr einfach und durch das Betrachten des Bildes bekommen wir eine Vorstellung davon, wie es geht. Für die Zwecke dieses Tutorials werden wir ein Layout erstellen, um eine Website zu strukturieren und Informationen zu organisieren.
Wir beginnen unser Beispiel, indem wir eine 960test.html-Datei erstellen und das folgende CSS zwischen den Tags hinzufügen
[Farbe = # 000000]

[/Farbe]
Diese Dateien haben die Klassen des 960-Grid-Frameworks. Wenn wir neues CSS benötigen, werden wir sie in einer separaten Datei anwenden. Wir werden das Framework niemals ändern, um es standardmäßig zu halten.
Hier ist ein einfaches Layout, um die Verwendung von 960 Grid besser zu erklären

Autos

Einzahlen
RSS

Titelseite
Nachrichten
Mitglieder
Werbeaktionen
Kontaktiere uns

Einige Titel

Donec malesuada dictum orci. Pellentesque Felis Arcu, Malesuada Eget, Convallis Sed, Suscipit Eget, Tellus. Nullam lectus. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae hassen. Fusce ut urn eu befreit luctus malesuada. Nulla quam arcu, adipöser quis, hendrerit ac, malesuada ut, ante.

Als nächstes fügen wir eine Datei mystyles.css hinzu, um das Beispiel zu beenden

 @charset "iso-8859-2"; / * CSS-Dokument * / div.spacer {height: 1em; } #top {Breite: 100%; Hintergrund: # 29231e; Position: relativ; oben: 0; links: 0; } #top ul {Rand: 10px 0 10px 0; Farbe: #FFFFFF; } #top ul li {display: inline; } #bodyMain {background: url (… /images/nubes-background.jpg.webp) top center no-repeat; } #rss {Hintergrund: URL (… /images/rss-logo.gif.webp) no-repeat right; Polsterung: 5px 30px 5px 0; } a # Logo {Hintergrund: URL (… /images/vos-voz.gif.webp) no-repeat; Breite: 470 Pixel; Höhe: 92px; Schwimmer: links; Rand oben: 150px; } img # city-logo {float: left; } #header {border-bottom: 5px solid #29231e; Hintergrund: URL (… /images/header.jpg.webp) keine Wiederholung; Höhe: 173px; } #contentMain {Hintergrund: #FFFFFF; Polsterung-Oberseite: 10px; Rahmen unten: 5px # A1DEF0 solide; } #contentMain h1, #contentMain h3 {color: # 4991a5; } #menu {Hintergrund: # e7f7fb; } #menu ul {padding-top: 10px; Rand-unten: 10px; } #menu ul li {display: inline; Schriftart: 20px fett Arial, Helvetica, Sans-Serif; } .article {margin-left: 15px; } img.border-blue {border: 5px solid # e7f7fb; Rand-unten: 10px; } #Fußzeile {font-size: 11px; }

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben