✅ Layout med CSS -klasser från 960 Grid System

Innehållsförteckning

De CSS 960 Grid System -ramverkDet är inget annat än en standardisering av stilar som ger de nödvändiga klasserna för att implementera kolumner på en webbsida, i olika storlekar, för att enkelt utforma vårt innehåll på ett ordnat sätt.
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

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.

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