2010-01-19 6 views
15

Desidero utilizzare il sistema di griglia 960 per generare il layout per il mio sito web. Ho scaricato una versione fluida a 24 colonne dal generatore personalizzato dal loro sito.buoni tutorial per il layout della griglia 960?

Ora voglio sapere ogni piccola cosa che posso fare con esso. Ho guardato il file css e ho trovato alcuni nomi di classe come .suffix_x .prefix_x .push_x .pull_x .clear .clear_fix ecc

Dove posso trovare un tutorial che spiega tutti questi? Come fare la barra di sinistra, il div principale e così via.

Strano che non ti insegna come utilizzare effettivamente il sistema di rete sulla loro pagina web. E non sono riuscito a trovare un buon tutorial che spiegasse tutto su google.

Sarebbe bello se qualcuno potesse consigliare tali tutorial.

Se alcuni di voi hanno utilizzato il sistema di griglia fluida 960, sarebbe ottimo anche con collegamenti a buoni tutorial.

risposta

9

Nella parte inferiore di their site hanno pochi collegamenti ai tutorial.

penso troverete this Nettuts+ one di valore nel giocare con 960.

0

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?