Das Framework CSS 960 Grid System ist nicht mehr als eine Standardisierung von Stilen, die über die erforderlichen Klassen verfügt, um Spalten in einer Webseite unterschiedlicher Größe zu implementieren, mit denen unsere Inhalte einfach und ordentlich gestaltet werden können.
Das 960-Rastersystem trägt diesen Namen, weil es ein Rastersystem zum Erstellen von Seiten mit einer Breite von 960 Pixel ist. Die Spalten, die wir im Raster platzieren können, haben unterschiedliche Breiten, aber die Gesamtbreite der Seite beträgt immer 960 Pixel.
Das 960-Rastersystem trägt diesen Namen, weil es ein Rastersystem zum Erstellen von Seiten mit einer Breite von 960 Pixel ist. 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 zum Erstellen unserer Layouts verwenden. Jede der Spalten hat einen linken und rechten Rand von 10 Pixel, um einen Abstand von 20 Pixel zwischen den Spalten zu erstellen. Wenn wir das wissen, sagen wir, dass wenn ich 12 Spalten verwende, jede Spalte 60 Pixel groß ist und ja, ich 16 Spalten verwende, die Breite jeder Spalte 40 Pixel.
Um eine GUI zu haben, fügen wir ein Bild hinzu, wie die Spalten verteilt sind.
Es ist sehr einfach, auf diese Weise zu entwerfen, und wenn wir das Bild betrachten, geben wir eine Vorstellung davon, wie es gemacht werden soll. In diesem Tutorial erstellen wir ein Layout zum Strukturieren einer Website und zum Organisieren von Informationen.
Wir beginnen unser Beispiel mit der Erstellung einer Datei 960test.html und fügen das folgende CSS zwischen die Tags <head> </ head> ein
[color = # 000000]
<link rel = "STYLESHEET" type = "text / css" href = "path / css / 960.css"> <link rel = "STYLESHEET" type = "text / css" href = "path / css / reset.css"> <link rel = "STYLESHEET" type = "text / css" href = "path / css / text.css">
[/ color]
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 den Standard beizubehalten.
Hier ist ein einfaches Layout, um die Verwendung von 960 Grid besser zu erläutern
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "Inhaltstyp" content = "text / html; charset = iso-8859-2" /> <title> Automobile </ title> <link href = "styles / 960.css" rel = "stylesheet" type = "text / css" /> <link href = "styles / reset.css" rel = "stylesheet" type = "text / css" /> <link href = "styles / text.css" rel = "stylesheet" type = "text / css" /> <link href = "styles / miestilo.css" rel = "stylesheet" type = "text / css" /> </ head> <body> <div id = "top"> <div class = "container_12"> <div class = "grid_3 prefix_9"> <ul> <li> Login </ li> <li id = "rss"> RSS </ li> </ ul> </ div> <! - grid_3 -> <div class = "clear"> </ div> </ div> <! - container_12 -> </ div> <! - top -> <div class = "container_12" id = "bodyMain"> <div class = "grid_12" id = "header"> </ div> <div class = "clear"> </ div> <div class = "grid_12" id = "menu"> <ul> <li> Startseite </ li> <li> Nachrichten </ li> <li> Mitglieder </ li> <li> Werbeaktionen </ li> <li> Kiste weiter </ li> </ ul> </ div> <! - menu -> <div class = "grid_12" id = "contentMain"> <div class = "grid_8 alpha"> <div class = "article"> <h1> Einige Titel </ h1> <p> Donec wehe dictum orci. Pellentesque felis arcu, Malaise eget, Convallis sed, Suscipit eget, Tellus. Nullam-Vortrag. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae Hass. </ p> </ div> <! - article -> <div class = "grid_4 alpha"> <div class = "article"> <h3> Einige Titel </ h3> <p> Donec wehe dictum orci. Pellentesque felis arcu, Malaise eget, Convallis sed, Suscipit eget, Tellus. Nullam-Vortrag. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae Hass. </ p> <p> Donec wehe dictum orci. Pellentesque felis arcu, Malaise eget, Convallis sed, Suscipit eget, Tellus. Nullam-Vortrag. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae Hass. </ div> <div class = "grid_4 omega"> <h3> Einige Titel </ h3> <img src = "images / image1.jpg" alt = "neues Auto" class = "border-blue" /> <p> Donec wehe dictum orci. Pellentesque felis arcu, Malaise eget, Convallis sed, Suscipit eget, Tellus. Nullam-Vortrag. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae Hass. Fusce ut urna eu libero luctus unwohlsein. Nulla quam arcu, Adipiscing Quis, Hendrerit AC, Unwohlsein ut, Ante. </ p> </ div> </ div> <div class = "grid_4 omega"> <h1> Einige Titel </ h1> <img src = "images / image2.jpg" alt = "Promotions" class = "border-blue" /> <p> Donec malaso dictum orci. Pellentesque felis arcu, Malaise eget, Convallis sed, Suscipit eget, Tellus. Nullam-Vortrag. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae Hass. </ p> </ div> <div class = "clear"> </ div> </ div> <! - contentMain -> <div class = "clear"> </ div> <div class = "grid_12 prefix_4" id = "footer"> <p> Automoviles.com Copyright 2014 | Werbung | Rechtliche Hinweise Kontakt </ p> </ div> <! - footer -> </ div> <! - bodyMain -> </ body> </ html>
Um das Beispiel zu vervollständigen, haben wir eine Datei miestilos.css hinzugefügt
@ Zeichensatz "iso-8859-2"; / * CSS Dokument * / div.spacer { Höhe: 1em; } #top { Breite: 100%; Hintergrund: # 29231e; Position: relativ; oben: 0; links: 0; } #top ul { Rand: 10px 0 10px 0; Farbe: #FFFFFF; } #top ul li { Anzeige: Inline; } #bodyMain { Hintergrund: URL (../ images / nubes-background.jpg) oben in der Mitte no-repeat; } #rss { Hintergrund: URL (../ images / rss-logo.gif) rechts ohne Wiederholung; Polsterung: 5px 30px 5px 0; } ein # logo { Hintergrund: URL (../ images / vos-voz.gif) no-repeat; Breite: 470px; Höhe: 92px; Schwimmer: links; Rand oben: 150px; } img # ciudad-logo { Schwimmer: links; } #header { Rand unten: 5px durchgehend # 29231e; Hintergrund: URL (../ images / header.jpg) nicht wiederholen; Höhe: 173px; } #contentMain { Hintergrund: #FFFFFF; Auffüllenoberteil: 10px; Rand unten: 5px # A1DEF0 fest; } #contentMain h1, #contentMain h3 { Farbe: # 4991a5; } #menu { Hintergrund: # e7f7fb; } #menu ul { Auffüllenoberteil: 10px; Rand-Boden: 10px; } #menu ul li { Anzeige: Inline; Schrift: 20px fett Arial, Helvetica, serifenlos; } .article { linker Rand: 15px; } img.border-azul { Rand: 5px durchgehend # e7f7fb; Rand-Boden: 10px; } #footer { Schriftgröße: 11px; }
