L'articolo tutor Web è molto buono, ma ho ancora qualcosa da condividere. Learning Grid960 è stato molto doloroso per me. La maggior parte di questo è reiterare l'articolo tuts netto. Questo dà l'intuizione per i neofiti, dato che era un mal di testa:
Sinossi
Giornali e riviste di sistemi a griglie utilizzare con grondaie in mezzo, e rende la pagina di un aspetto molto più gradevole alla vista quando si utilizza le tecniche di progettazione. La griglia ti guiderà perfettamente. Prima di iniziare è necessario comprendere l'annidamento CSS/HTML.
<div class="a">
I include all the items A.
<div class="b">
I include all the items of B with all of A.
</div>
<div class="c">
I include all the items of C with all of A. B is not here, but it is on the same level.
<div class="d">
I include all the items of A with C and D
</div>
</div>
sguardo al file di esempio per vedere come si può rompere il vostro disegno in una griglia.
Utilizzare l'ispettore premendo F12 in Chrome + IE + Firefox (Grazie Larry!). Evidenzia le caselle per vedere come viene modificato il css.Trovo molto difficile immergersi direttamente nei file CSS di Grid960. Vedrai come viene creata ogni griglia
Dichiarare una griglia di 12 dimensioni come una div principale. Le div per bambini devono aggiungere fino a 12 e puoi spezzare la pagina in qualsiasi modo tu voglia. Esempio: 3 griglia + 3 griglia + 6 griglia = 12 griglia. 3 griglia + 4 griglia + 4 griglia + 1 griglia = 12 griglia. Puoi vedere questo se usi F12 in Chrome. Evidenzia la griglia nel file di esempio. Non dimenticare di aggiungere il div clear quando hai finito con una riga e vuoi iniziarne uno nuovo.
<div class="container_12">
<div class="grid_12"><a href="images/header.png" alt=""></a></div>
<div class="clear"></div>
<div class="grid_12" id="navbar">A</div>
<div class="clear"> </div>
<div class="grid_7">B</div>
<div class="grid_5">C</div>
<div class="clear"></div>
<div class="grid_12 spacer">D</div>
<div class="clear"></div>
<div class="grid_3">E</div>
<div class="grid_3">F</div>
<div class="grid_3">G</div>
<div class="grid_3">H</div>
<div class="clear"></div>
<div class="grid_12 spacer">I</div>
<div class="clear"></div>
<div class="grid_4">J</div>
<div class="grid_4">K</div>
<div class="grid_4">L</div>
</div>
suffisso e prefisso:
dire che si desidera la griglia per iniziare nel mezzo. Non è sufficiente dichiarare una griglia 3 da sola. Devi dargli un pezzo in più di informazioni che affermi che voglio "fluttuare". È qui che entrano il suffisso e il prefisso. Prefisso significa saltare la quantità di div e il suffisso significa saltare la quantità di div dopo di essa.
Da tuts netti
Alfa e Omega:
Se voglio applicare uno stile e lo hanno raggiunto nell'arco di diversi griglie tra cui lo spazio per il margine. Alpha è il primo e omega è l'ultimo div a cui è applicato.
Dalle tuts netti
spingere e tirare
Questo è per Larry! Push and pull è per gli sviluppatori che vogliono riorganizzare le pagine per SEO.
http://www.clubosc.com/960-grid-tutorial-understanding-push-and-pull-classes.html
Notate come il rosa e giallo le classi sono invertiti, tuttavia i div sono disposti in modo opposto?
ma dove spiegano tutti i selettori è possibile utilizzare: .suffix_x .prefix_x .push_x .pull_x .clear .clear_fix – ajsie