✅ Layout con classi CSS da 960 Grid System

Sommario

Il Struttura del sistema di griglia CSS 960Non è altro che una standardizzazione degli stili che fornisce le classi necessarie per implementare colonne in una pagina web, di diverse dimensioni, con cui impaginare i nostri contenuti in modo semplice e ordinato.
Il 960 Grid System ha questo nome perché è un sistema a griglia per creare pagine con 960 pixel di larghezza. Le colonne che possiamo posizionare sulla griglia avranno larghezze diverse, ma la larghezza totale della pagina sarà sempre di 960 pixel.
Con queste classi CSS predefinite, possiamo usare 12 o 16 colonne per creare i nostri layout, ognuna delle colonne ha un margine sinistro e destro di 10px, per creare 20px di separazione tra le colonne. Sapendo questo, diciamo che se utilizzo 12 colonne, ogni colonna sarà di 60 pixel ciascuna e se utilizzo 16 colonne, la larghezza di ciascuna sarà di 40 pixel.
Per avere un'interfaccia grafica aggiungiamo un'immagine di come sono distribuite le colonne.
È molto facile impaginare in questo modo e guardando l'immagine ci facciamo un'idea di come farlo. Ai fini di questo tutorial, creeremo un layout per strutturare un sito Web e organizzare le informazioni.
Iniziamo il nostro esempio creando un file 960test.html e aggiungiamo il seguente css tra i tag
[colore = # 000000]

[/Colore]
Questi file sono quelli che hanno le classi del framework grid 960, se abbiamo bisogno di nuovi css, li applicheremo in un file separato, non modificheremo mai il framework per mantenerlo standard.
Ecco un semplice layout per spiegare meglio l'uso di 960 Grid

automobili

Paga in
RSS

Copertina
Notizia
Membri
promozioni
Contattaci

Qualche titolo

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 odio. Fusce ut urn eu libera luctus malesuada. Nulla quam arcu, adipiscing quis, hendrerit ac, malesuada ut, ante.

Successivamente per completare l'esempio aggiungiamo un file mystyles.css

 @charset "iso-8859-2"; / * Documento CSS * / div.spacer {height: 1em; } #top {larghezza: 100%; sfondo: # 29231e; posizione: relativa; in alto: 0; sinistra: 0; } #top ul {margine: 10px 0 10px 0; colore: #FFFFFF; } #top ul li {display: inline; } #bodyMain {background: url (… /images/nubes-background.jpg.webp) in alto al centro senza ripetizione; } #rss {background: url (… /images/rss-logo.gif.webp) no-repeat right; imbottitura: 5px 30px 5px 0; } a # logo {sfondo: url (… /images/vos-voz.gif.webp) no-repeat; larghezza: 470px; altezza: 92px; galleggiante: sinistro; margine superiore: 150 px; } img # logo-città {float: sinistra; } #header {border-bottom: 5px solid # 29231e; sfondo: url (… /images/header.jpg.webp) no-repeat; altezza: 173px; } #contentMain {sfondo: #FFFFFF; imbottitura: 10px; bordo-basso: 5px # A1DEF0 solido; } #contentMain h1, #contentMain h3 {color: # 4991a5; } #menu {sfondo: # e7f7fb; } #menu ul {padding-top: 10px; margine inferiore: 10px; } #menu ul li {display: inline; font: 20px grassetto Arial, Helvetica, sans-serif; } .article {margine sinistro: 15px; } img.border-blue {border: 5px solido # e7f7fb; margine inferiore: 10px; } #footer {dimensione carattere: 11px; }

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo