960 Grid System har detta namn eftersom det är ett rutsystem för att skapa sidor med 960 pixlar breda. Kolumnerna som vi kan placera i rutnätet kommer att ha olika bredder, men sidans totala bredd kommer alltid att vara 960 pixlar.
Med dessa fördefinierade css -klasser kan vi använda 12 eller 16 kolumner för att skapa våra layouter, var och en av kolumnerna har en vänster och höger marginal på 10 pixlar för att skapa 20 pixlar avskiljning mellan kolumner. När vi vet detta säger vi att om jag använder 12 kolumner kommer varje kolumn att vara 60px vardera och om jag använder 16 kolumner kommer bredden på varje vara 40px.
För att ha en gui lägger vi till en bild av hur kolumnerna är fördelade.
Det är väldigt enkelt att layouta på detta sätt och genom att titta på bilden får vi en uppfattning om hur man gör det. För denna handledning kommer vi att skapa en layout för att strukturera en webbplats och organisera information.
Vi börjar vårt exempel med att skapa en 960test.html -fil och lägga till följande css mellan taggarna
[color = # 000000]
[/Färg]
Dessa filer är de som har klasserna i 960 -nätverket, om vi behöver nytt css, kommer vi att tillämpa dem i en separat fil, vi kommer aldrig att ändra ramverket för att hålla det standard.
Här är en enkel layout för att bättre förklara användningen av 960 Grid
Bilar
- Betala in
- RSS
- Omslag
- Nyheter
- Medlemmar
- Kampanjer
- Kontakta oss
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 hatar.
Någon titel
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 hatar.
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 hatar.
Någon titel
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 hatar. Fusce ut urn eu frigör 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 hatar.
Automoviles.com Copyright 2014 | Reklam | Juridisk | Kontakt
Därefter lägger vi till en fil mystyles.css för att avsluta exemplet
@charset "iso-8859-2"; / * CSS Document * / div.spacer {höjd: 1em; } #top {bredd: 100%; bakgrund: # 29231e; position: relativ; topp: 0; vänster: 0; } #top ul {marginal: 10px 0 10px 0; färg: #FFFFFF; } #top ul li {display: inline; } #bodyMain {bakgrund: url (… /images/nubes-background.jpg.webp) övre mitten utan upprepning; } #rss {bakgrund: url (… /images/rss-logo.gif.webp) no-repeat höger; vaddering: 5px 30px 5px 0; } en # logo {bakgrund: url (… /images/vos-voz.gif.webp) no-repeat; bredd: 470px; höjd: 92px; flyta till vänster; marginal-topp: 150px; } img # city-logo {float: left; } #header {border-bottom: 5px solid # 29231e; bakgrund: url (… /images/header.jpg.webp) no-repeat; höjd: 173px; } #contentMain {bakgrund: #FFFFFF; vadderingstopp: 10px; kant-botten: 5px # A1DEF0 solid; } #contentMain h1, #contentMain h3 {color: #4991a5; } #meny {bakgrund: # e7f7fb; } #meny ul {padding-top: 10px; marginal-botten: 10px; } #meny ul li {display: inline; typsnitt: 20px fetstil Arial, Helvetica, sans-serif; } .artikel {margin-left: 15px; } img.border-blue {border: 5px solid # e7f7fb; marginal-botten: 10px; } #footer {font-size: 11px; }Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
