Hvordan bruke en 960 Grid
Den 960 grid system er en vanlig webside layout rammeverk som er basert på en 960-pixel bredt DIV container delt inn i 12 eller 16 kolonne enheter. kolonne enhetsbredder og marginer er definert ved hjelp av CSS-kode som jevnt deler 960 piksler bred inneholder DIV element. Ved å kombinere 12 eller 16 kolonneheter inn i en to eller flere kolonner, kan du lage en nettside layout som inkluderer et hovedinnhold område, og en eller flere sidefelt. Med noen få linjer med CSS-kode, kan du lage en 960 rutenett som kan brukes flere ganger.
Bruksanvisning
1 Åpne dokumentet websiden i en HTML eller tekst editor. For å bruke innfødte Windows tekst editor, høyreklikk på dokumentet og klikk på «Åpne med." Klikk for å velge "Notisblokk" eller "WordPad" fra listen over programmer, og klikk deretter "OK".
2 Klikk for å plassere markøren mellom "<head>" og "</ head>" koder nær toppen av websiden dokumentet.
3 Type "<style type =" text / css ">" for å lage CSS åpningen skriptmerket.
4 Type ".wrapper {width: 960 x;}" og trykk "Enter" for å definere klassen for hoved DIV beholder som vil holde 960 rutenettet.
5 Type ".column {margin: 0 10px 0 10px; float: left;}" for å lage standardklasse for kolonnene. Hver kolonne enhet i 960 nett har en venstre og høyre marg på 10 piksler, og fløtes til venstre side av "omslaget" DIV beholder.
6 Type "</ style>" for å lage CSS avsluttskriptmerket.
7 Plasser markøren mellom "<body>" og "<body>" koder i websiden dokumentet.
8 Type "<div class = 'wrapper'>" og trykk "Enter" for å lage hoved DIV beholderåpningen tag.
9 Del 960 grid container mentalt inn i 12 eller 16 kolonner enheter. Hvis dele 960 rutenettet i 12 kolonne enheter, er hver enhet 60 piksler bredt. (60 piksler multiplisert med 12 kolonne enheter, minus 10 pixel venstre og høyre marg for hver kolonne enhet, utgjør 960 piksler.) For en 12-kolonne enhet layout, kolonne pixel bredde alternativer du har tilgjengelig de er 940, 860, 780, 700, 620, 540, 460, 380, 300, 220, 140 og 60. Hvis dele 960 rutenettet i 16 kolonne enheter, er hver enhet 40 piksler bredt. (40 piksler multiplisert med 16 kolonne enheter, minus 10 pixel venstre og høyre marg for hver kolonne enhet, utgjør 960 piksler.) For en 16-kolonne enhet layout, kolonne pixel bredde alternativer du har tilgjengelig de er 940, 880, 820, 760, 700, 640, 580, 520, 460, 400, 340, 280, 220, 160, 100 og 40.
10 Sette inn to eller flere DIV beholdere ved bruk av kolonnen klassen i henhold til kolonnebredder i det foregående trinn blir. Kolonnebredder bør legge opp til 960 piksler, inkludert 10-pixel venstre og høyre margbreddene for hver kolonne. For et eksempel på en 12-kolonne enhet layout med to kolonner, skriver du "<div class = 'kolonne' style = 'width: 700 piksler;'> </ div> <div class = 'kolonne' style = 'width: 200px; '> </ div> ". For et eksempel på en 16-kolonne enhet layout med, type "tre kolonner <div class = 'kolonne' style = 'width: 220px;"> </ div> <div class =' kolonne 'style =' width: 460px; '> </ div> <div class =' kolonne 'style =' width: 220px; '> </ div> ".
11 Type "</ div>" for å lage hoved DIV container avsluttende koden.
12 Klikk på "File" -menyen og klikk "Lagre".