May 10
Il sistema a griglia 960 è un quadro layout di pagina Web di uso comune che si basa su un contenitore DIV larga 960 pixel suddiviso in 12 o 16 unità di colonna. Le larghezze mobile a colonna e dei margini sono definiti utilizzando il codice CSS che divide in modo uniforme l'elemento DIV 960-pixel di larghezza contenente. Grazie alla combinazione di 12 o 16 unità di colonna in una due o più colonne, è possibile creare un layout sito web che include una zona contenuto principale, e uno o più barre laterali. Con poche righe di codice CSS, è possibile creare un layout 960 griglia che può essere utilizzato più volte.
1 Aprire il documento pagina Web in un editor HTML o testo. Per utilizzare l'editor di testo di Windows nativo, fare clic destro del documento, quindi fare clic su "Apri con". Fare clic per selezionare "Blocco note" o "WordPad" dall'elenco delle applicazioni, quindi fare clic su "OK".
2 Fare clic per posizionare il cursore tra la "<head>" e "</ head>" tag vicino alla parte superiore del documento pagina Web.
3 Digitare "<style type =" text / css '> "per creare il tag CSS script di apertura.
4 Tipo ".wrapper {width: 960px;}" e premere "Invio" per definire la classe per il contenitore DIV principale che conterrà la griglia 960.
5 Tipo ".column {margin: 0 10px 10px 0; float: left;}" per creare la classe predefinita per le colonne. Ogni unità colonna nella griglia 960 ha un margine sinistro e destro di 10 pixel ed è flottato a sinistra del contenitore DIV "involucro".
6 Tipo "</ style>" per creare il tag script di chiusura CSS.
7 Posizionare il cursore tra il "<body>" e "<body>" tag nel documento della pagina Web.
8 Digitare "<div class = 'wrapper'>" e premere "Invio" per creare il tag di apertura del contenitore DIV principale.
9 Dividere il contenitore 960 griglia mentalmente in 12 o 16 unità colonne. Se dividendo la griglia 960 in 12 unità di colonna, ogni unità è largo 60 pixel. (60 pixel moltiplicati per 12 unità della colonna, meno il pixel 10 margini sinistro e destro per ogni unità di colonna, ammonta a 960 pixel). Per un layout unità a 12 colonne, le opzioni di larghezza di colonna di pixel che avete a disposizione sono 940, 860, 780, 700, 620, 540, 460, 380, 300, 220, 140 e 60. Se dividendo la griglia di 960 in 16 unità di colonna, ogni unità è largo 40 pixel. (40 pixel moltiplicati per 16 unità della colonna, meno il pixel 10 margini sinistro e destro per ogni unità di colonna, ammonta a 960 pixel). Per un layout unità a 16 colonne, le opzioni di larghezza di colonna di pixel che avete a disposizione sono 940, 880, 820, 760, 700, 640, 580, 520, 460, 400, 340, 280, 220, 160, 100 e 40.
10 Inserire due o più contenitori DIV utilizzando la classe colonna secondo la larghezza delle colonne nel passaggio precedente. La larghezza delle colonne dovrebbero aggiungere fino a 960 pixel, comprese le larghezze di margine di 10 pixel a sinistra ea destra per ogni colonna. Per un esempio di layout di unità a 12 colonne con due colonne, digitare "<div class = 'colonna' style = 'width: 700px;'> </ div> <div class = 'colonna' style = 'width: 200px; '> </ div> ". Per un esempio di layout di unità a 16 colonne con tre colonne, digitare "<div class = 'colonna' style = 'width: 220px;'> </ div> <div class = 'colonna' style = 'width: 460PX; '> </ div> <div class =' colonna 'style =' width: 220px; '> </ div> ".
11 Tipo "</ div>" per creare il tag di chiusura div contenitore principale.
12 Fare clic sul menu "File", quindi fare clic su "Salva".