✅ Layout med CSS -klasser fra 960 Grid System

Indholdsfortegnelse

Det CSS 960 Grid System frameworkDet er intet mere end en standardisering af stilarter, der giver de nødvendige klasser til at implementere kolonner på en webside i forskellige størrelser, som vi nemt og ordentligt kan indrette vores indhold på.
960 Grid System har dette navn, fordi det er et gittersystem til at lave sider med 960 pixels brede. De kolonner, vi kan placere på gitteret, vil have forskellige bredder, men sidens samlede bredde vil altid være 960 pixels.
Med disse foruddefinerede css -klasser kan vi bruge 12 eller 16 kolonner til at oprette vores layout, hver af kolonnerne har en venstre og højre margin på 10px, for at skabe 20px adskillelse mellem kolonner. Når vi kender dette, siger vi, at hvis jeg bruger 12 kolonner, vil hver kolonne være 60px hver, og hvis jeg bruger 16 kolonner, vil bredden af hver være 40px.
For at få en gui tilføjer vi et billede af, hvordan kolonnerne er fordelt.
Det er meget let at layoute på denne måde, og ved at se på billedet får vi en idé om, hvordan man gør det. I forbindelse med denne vejledning skal vi oprette et layout til at strukturere et websted og organisere oplysninger.
Vi starter vores eksempel med at oprette en 960test.html -fil og tilføje følgende css mellem tags
[farve = # 000000]

[/Farve]
Disse filer er dem, der har klasserne i 960 grid -rammen. Hvis vi har brug for ny css, vil vi anvende dem i en separat fil, vi vil aldrig ændre rammen for at holde den standard.
Her er et enkelt layout til bedre at forklare brugen af 960 Grid

Biler

Betal ind
RSS

Forside
Nyheder
Medlemmer
Kampagner
Kontakt os

Noget 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 hader. Fusce ut urn eu frigør luctus malesuada. Nulla quam arcu, adipiscing quis, hendrerit ac, malesuada ut, ante.

Næste for at afslutte eksemplet tilføjer vi en fil mystyles.css

 @charset "iso-8859-2"; / * CSS -dokument * / div. Mellemrum {højde: 1em; } #top {bredde: 100%; baggrund: # 29231e; position: relativ; top: 0; venstre: 0; } #top ul {margin: 10px 0 10px 0; farve: #FFFFFF; } #top ul li {display: inline; } #bodyMain {baggrund: url (… /images/nubes-background.jpg.webp) øverste center, ingen gentagelse; } #rss {baggrund: url (… /images/rss-logo.gif.webp) ikke-gentag højre; polstring: 5px 30px 5px 0; } et # logo {baggrund: url (… /images/vos-voz.gif.webp) no-repeat; bredde: 470px; højde: 92px; flyde: venstre; margin-top: 150px; } img # city-logo {float: left; } #header {border-bottom: 5px solid # 29231e; baggrund: url (… /images/header.jpg.webp) no-repeat; højde: 173px; } #contentMain {baggrund: #FFFFFF; polstringstop: 10px; kant-bund: 5px # A1DEF0 solid; } #contentMain h1, #contentMain h3 {farve: #4991a5; } #menu {baggrund: # e7f7fb; } #menu ul {padding-top: 10px; margin-bund: 10px; } #menu ul li {display: inline; skrifttype: 20px fed Arial, Helvetica, sans-serif; } .artikel {margin-venstre: 15px; } img.border-blue {border: 5px solid # e7f7fb; margin-bund: 10px; } #footer {font-size: 11px; }

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt