- Web Templates
- E-commerce Templates
- CMS und Blog Templates
- Facebook Templates
- Website-Builder
FAQs
General Tutorials
og体育首页ONE Subscrioption
CSS. Grid 960 System
September 16, 2011
Wenn Sie einen Quellcode und Stylen vom Template anschauen, finden Sie wahrscheinlich die Klassen wie: “grid_6”, “grid_8”. Das ist die Klassen vom Grid 960 System. Dann schauen wir mal, was es eigentlich ist und was es anbieten kann.
Das 960 Grid System (sogenannte Raster-System) ist bestimmt eines der meist verwendeten CSS Grid-Systeme. Der Darstellungsbereich des 960 Grid System ist auf 960 Pixel Breite festgelegt. Es gibt verschiedene Varianten des Layouts. Die meist verwendeten sind 12- ,16- und 24- spaltigen Grids.
Hier ist ein Beispiel-Template, das auf einem 24-spaltigen Raster basiert ist:
Wie Sie sehen, passen die Layout-Blöcken die Grid-Spalten an. Mit den verfügbaren-Klassen lässt sich das Website-Layout mit nur wenigen Handgriffen Ihren aktuellen Wünschen anpassen.
Verwendung
Jedes Template mit Grid-System hat eine grid.css Datei, wo sich die spezifischen Klassen befinden. Mal sehen, wie man mit dem Grid-System arbeiten kann.
Zunächst öffnen Sie die grid.css Datei
Am Anfang dieser css-Datei stehen:
columns:24
Column width:30
Gutter width:10
Auf der Informationsseite der initialen Dateien gibt es den Anzahl der verwendeten Spalten, die Spaltenbreite und die Abstandbreite zwischen den Spalten.
Dann finden Sie die Klasse .container_24{} – diese Klasse benutzt man für den Container, wo den ganzen Inhalt Ihrer Webseite ist.
Hinweis: die Hauptklasse soll den Name container_12 oder container 16 haben (Es hängt vom Anzahl der Spalten an)
Danach sind die Klassen .grid_1, .grid_2 usw. – diese Klassen legen die Breite von inneren Blöcke fest. Die Blöcke mit den grid-Klassen sollten innerhalb von Blöcken mit der container_24 Klasse platziert werden.
Die Klasse definieren die Breite von Blöcken:
1 2 3 | .container_24 .grid_2 {<br>width:70px;<br>} |
Zum Beispiel ist es den Code vom nachfolgenden Layout:
1 2 3 4 5 6 | <div class="container_24"><br><div class="grid_9">Some content</div><br><div class="grid_15">Some content</div><br><div class="grid_12">Some content</div><br><div class="grid_12">Some content</div><br></div> |
Es gibt die folgende grid-Klassen in diesem HTML-Layout:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .container_24 { margin-left: auto; margin-right: auto; width: 960px;}.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px;}.container_24 .grid_9 { width:350px;}.container_24 .grid_12 { width:470px;}.container_24 .grid_15 { width:590px;} |
Sie können auch extra-Klassen verwenden. Zum Beispiel:
.prefix_1, .prefix_2 usw. – fügen ein Abstand von zwei Spalten vor dem Container ein. (links);
.suffix_1, .suffix_2 usw. – hängen leere Spalten nach dem Container an (rechts );
Mehr Info über Grid960 System finden Sie auf der offizielle Webseite http://960.gs/.
