System 960 Grid ma tę nazwę, ponieważ jest to system siatki do tworzenia stron o szerokości 960 pikseli. Kolumny, które możemy umieścić na siatce, będą miały różne szerokości, ale całkowita szerokość strony zawsze będzie wynosić 960 pikseli.
Dzięki tym predefiniowanym klasom CSS możemy użyć 12 lub 16 kolumn do stworzenia naszych układów, każda z kolumn ma lewy i prawy margines 10 pikseli, aby utworzyć 20 pikseli separacji między kolumnami. Wiedząc to, mówimy, że jeśli użyję 12 kolumn, każda kolumna będzie miała 60 pikseli, a jeśli użyję 16 kolumn, szerokość każdej z nich wyniesie 40 pikseli.
Aby mieć interfejs użytkownika, dodajemy obraz przedstawiający rozkład kolumn.
Układanie w ten sposób jest bardzo łatwe i patrząc na obraz dowiadujemy się, jak to zrobić. Na potrzeby tego samouczka stworzymy układ, aby ustrukturyzować witrynę i uporządkować informacje.
Nasz przykład zaczynamy od utworzenia pliku 960test.html i dodania następującego css między tagami
[kolor = # 000000]
[/Kolor]
Te pliki to te, które mają klasy frameworka 960 grid, jeśli potrzebujemy nowego css, zastosujemy je w osobnym pliku, nigdy nie zmodyfikujemy frameworka, aby zachować standard.
Oto prosty układ, aby lepiej wyjaśnić użycie siatki 960
Samochody
- Zapłać w
- RSS
- Okładka
- Aktualności
- Członkowie
- Promocje
- Skontaktuj się z nami
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementm feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae nienawiść.
Niektóre tytuły
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementm feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae nienawiść.
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementm feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae nienawiść.
Niektóre tytuły
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementm feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae nienawiść. Fusce ut urn eu uwalnia luctus malesuada. Nulla quam arcu, adipisujące quis, hendrerit ac, malesuada ut, ante.
Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementm feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae nienawiść.
Automoviles.com Prawa autorskie 2014 | Reklama | Prawne | Kontakt
Następnie, aby zakończyć przykład, dodajemy plik mystyles.css
@charset "iso-8859-2"; / * Dokument CSS * / div.spacer {wysokość: 1em; } #góra {szerokość: 100%; tło: # 29231e; pozycja: względna; góra: 0; po lewej: 0; } #top ul {margines: 10px 0 10px 0; kolor: #FFFFFF; } #top ul li {wyświetlanie: inline; } #bodyMain {tło: url (… /images/nubes-background.jpg.webp) górne centrum bez powtórzeń; } #rss {background: URL (… /images/rss-logo.gif.webp) bez powtórzeń prawo; padding: 5px 30px 5px 0; } a # logo {background: url (… /images/vos-voz.gif.webp) no-repeat; szerokość: 470px; wysokość: 92px; pływak: lewy; margines górny: 150px; } img # logo-miasta {float: left; } #header {border-bottom: 5px solid #29231e; tło: url (… /images/header.jpg.webp) bez powtórzeń; wysokość: 173px; } #contentMain {tło: #FFFFFF; wyściółka: 10px; obramowanie-dół: 5px # A1DEF0 stałe; } #contentMain h1, #contentMain h3 {kolor: # 4991a5; } #menu {tło: # e7f7fb; } #menu ul {padding-top: 10px; margines-dolny: 10px; } #menu ul li {wyświetlanie: inline; czcionka: 20px pogrubiona Arial, Helvetica, bezszeryfowa; } .article {margin-lewy: 15px; } img.border-blue {border: 5px solid # e7f7fb; margines-dolny: 10px; } #stopka {rozmiar-czcionki: 11px; }Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
