960 Grid System má tento název, protože je mřížkovým systémem pro vytváření stránek o šířce 960 pixelů. Sloupce, které můžeme umístit na mřížku, budou mít různé šířky, ale celková šířka stránky bude vždy 960 pixelů.
S těmito předdefinovanými třídami css můžeme k vytvoření rozvržení použít 12 nebo 16 sloupců, každý ze sloupců má levý a pravý okraj 10 pixelů, pro vytvoření 20 pixelů oddělení mezi sloupci. Když to víme, říkáme, že když použiji 12 sloupců, každý sloupec bude mít 60 pixelů každý a pokud použiji 16 sloupců, šířka každého z nich bude 40 pixelů.
Abychom měli gui, přidáme obrázek, jak jsou sloupce distribuovány.
Rozložení tímto způsobem je velmi snadné a pohledem na obrázek získáme představu, jak to udělat. Pro účely tohoto tutoriálu vytvoříme rozvržení pro strukturování webu a organizaci informací.
Náš příklad začneme vytvořením souboru 960test.html a mezi značky přidáme následující css
[barva = # 000000]
[/Barva]
Tyto soubory jsou ty, které mají třídy mřížkového rámce 960, pokud potřebujeme nový css, použijeme je v samostatném souboru, nikdy nebudeme upravovat rámec, aby byl standardní.
Zde je jednoduché rozložení, které lépe vysvětluje použití 960 Grid
Automobily
- Zaplaťte
- RSS
- Titulní strana
- Zprávy
- Členové
- Propagační akce
- Kontaktujte nás
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 nenávist.
Nějaký titul
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 nenávist.
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 nenávist.
Nějaký titul
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 nenávist. Fusce ut urn eu osvobozuje 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 nenávist.
Automoviles.com Copyright 2014 | Reklama | Právní | Kontakt
Dále pro dokončení příkladu přidáme soubor mystyles.css
@charset "iso-8859-2"; / * Dokument CSS * / div.spacer {výška: 1em; } #top {šířka: 100%; pozadí: # 29231e; poloha: relativní; nahoře: 0; vlevo: 0; } #top ul {margin: 10px 0 10px 0; barva: #FFFFFF; } #top ul li {display: inline; } #bodyMain {background: url (… /images/nubes-background.jpg.webp) top center no-repeat; } #rss {background: url (… /images/rss-logo.gif.webp) no-repeat right; polstrování: 5px 30px 5px 0; } a # logo {background: url (… /images/vos-voz.gif.webp) no-repeat; šířka: 470px; výška: 92px; plavat vlevo; margin-top: 150px; } img # city-logo {float: left; } #header {border-bottom: 5px solid # 29231e; pozadí: url (… /images/header.jpg.webp) no-repeat; výška: 173px; } #contentMain {pozadí: #FFFFFF; padding-top: 10px; spodní okraj: 5px # A1DEF0 plná; } #contentMain h1, #contentMain h3 {barva: #4991a5; } #menu {pozadí: # e7f7fb; } #menu ul {padding-top: 10px; margin-bottom: 10px; } #menu ul li {display: inline; písmo: 20px tučně Arial, Helvetica, bezpatkové; } .article {margin-left: 15px; } img.border-blue {border: 5px solid # e7f7fb; margin-bottom: 10px; } #footer {velikost písma: 11px; }Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
