960 Grid System ima ovaj naziv jer je mrežni sustav za izradu stranica širine 960 piksela. Stupci koje možemo postaviti na rešetku imat će različite širine, ali ukupna širina stranice uvijek će biti 960 piksela.
S ovim unaprijed definiranim css klasama, možemo koristiti 12 ili 16 stupaca za kreiranje izgleda, svaki od stupaca ima lijevu i desnu marginu od 10 piksela, za stvaranje 20 piksela razdvajanja između stupaca. Znajući to, kažemo da ako koristim 12 stupaca, svaki će stupac biti 60px svaki, a ako koristim 16 stupaca, širina svakog bit će 40px.
Da bismo imali gui, dodajemo sliku distribucije stupaca.
Vrlo je jednostavno postaviti na ovaj način i gledajući sliku dobivamo ideju kako to učiniti. Za potrebe ovog vodiča, stvorit ćemo izgled za strukturiranje web stranice i organiziranje informacija.
Naš primjer započinjemo stvaranjem datoteke 960test.html i dodajemo sljedeći css između oznaka
[boja = # 000000]
[/Boja]
Ove datoteke imaju klase 960 grid okvira, ako nam zatreba novi css, primijenit ćemo ih u zasebnoj datoteci, okvir nikada nećemo mijenjati kako bi bio standard.
Evo jednostavnog izgleda za bolje objašnjenje uporabe 960 Grida
Automobili
- Uplatite
- RSS
- Naslovnica
- Vijesti
- Članovi
- Promocije
- Kontaktirajte nas
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 hate.
Neki naslov
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 hate.
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 hate.
Neki naslov
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 hate. Fusce ut urn eu oslobađa luctus malesuada. Nulla quam arcu, adipiscing quis, hendrerit ac, malesuada ut, ante.
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 hate.
Automoviles.com Autorsko pravo 2014 | Oglašavanje | Pravni | Kontakt
Zatim dovršimo primjer dodajući datoteku mystyles.css
@charset "iso-8859-2"; / * CSS dokument * / div.spacer {visina: 1em; } #top {width: 100%; pozadina: # 29231e; položaj: relativan; vrh: 0; lijevo: 0; } #top ul {margin: 10px 0 10px 0; boja: #FFFFFF; } #top ul li {display: inline; } #bodyMain {background: url (… /images/nubes-background.jpg.webp) gornji centar bez ponavljanja; } #rss {background: url (… /images/rss-logo.gif.webp) bez ponavljanja udesno; punjenje: 5px 30px 5px 0; } a # logo {background: url (… /images/vos-voz.gif.webp) no-repeat; širina: 470px; visina: 92px; plovak: lijevo; margin-top: 150px; } img # city-logo {float: left; } #header {border-bottom: 5px solid # 29231e; pozadina: url (… /images/header.jpg.webp) bez ponavljanja; visina: 173px; } #contentMain {pozadina: #FFFFFF; padding-top: 10px; rub-dno: 5px # A1DEF0 solid; } #contentMain h1, #contentMain h3 {color: #4991a5; } #meni {pozadina: # e7f7fb; } #menu ul {padding-top: 10px; margin-bottom: 10px; } #menu ul li {display: inline; font: 20px podebljano Arial, Helvetica, sans-serif; } .članak {margin-left: 15px; } img.border-blue {border: 5px solid # e7f7fb; margin-bottom: 10px; } #footer {font-size: 11px; }Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod
