✅ Layout med CSS -klasser fra 960 Grid System

Innholdsfortegnelse

De CSS 960 Grid System -rammeverkDet er ikke annet enn en standardisering av stiler som gir de nødvendige klassene for å implementere kolonner på en webside, i forskjellige størrelser, for å legge innholdet vårt enkelt og på en ryddig måte.
960 Grid System har dette navnet fordi det er et rutenettsystem for å lage sider med 960 piksler brede. Kolonnene vi kan plassere på rutenettet vil ha forskjellige bredder, men den totale bredden på siden vil alltid være 960 piksler.
Med disse forhåndsdefinerte css -klassene kan vi bruke 12 eller 16 kolonner til å lage oppsettene våre. Hver av kolonnene har en venstre og høyre margin på 10 piksler, for å lage 20 piksler mellom kolonner. Når vi vet dette, sier vi at hvis jeg bruker 12 kolonner, vil hver kolonne være 60px hver, og hvis jeg bruker 16 kolonner, vil bredden på hver være 40px.
For å ha en gui legger vi til et bilde av hvordan kolonnene er fordelt.
Det er veldig enkelt å sette opp på denne måten, og ved å se på bildet får vi en ide om hvordan du gjør det. I forbindelse med denne opplæringen skal vi lage et oppsett for å strukturere et nettsted og organisere informasjon.
Vi starter vårt eksempel med å lage en 960test.html -fil og legge til følgende css mellom taggene
[color = # 000000]

[/Farge]
Disse filene er de som har klassene i 960 grid -rammeverket. Hvis vi trenger ny css, bruker vi dem i en egen fil, vi vil aldri endre rammen for å holde den standard.
Her er en enkel layout for å bedre forklare bruken av 960 Grid

Biler

Betale i
RSS

Forside
Nyheter
Medlemmer
Kampanjer
Kontakt oss

Noen tittel

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 hate. Fusce ut urn eu liberates luctus malesuada. Nulla quam arcu, adipiscing quis, hendrerit ac, malesuada ut, ante.

Ved siden av eksemplet legger vi til en fil mystyles.css

 @charset "iso-8859-2"; / * CSS -dokument * / div. Mellomrom {høyde: 1em; } #top {bredde: 100%; bakgrunn: # 29231e; posisjon: slektning; topp: 0; venstre: 0; } #top ul {margin: 10px 0 10px 0; farge: #FFFFFF; } #top ul li {display: inline; } #bodyMain {bakgrunn: url (… /images/nubes-background.jpg.webp) topp senter no-repeat; } #rss {bakgrunn: url (… /images/rss-logo.gif.webp) nei-gjenta høyre; polstring: 5px 30px 5px 0; } en # logo {bakgrunn: url (… /images/vos-voz.gif.webp) no-repeat; bredde: 470px; høyde: 92px; flyte: venstre; margin-top: 150px; } img # city-logo {float: left; } #header {border-bottom: 5px solid # 29231e; bakgrunn: url (… /images/header.jpg.webp) no-repeat; høyde: 173px; } #contentMain {bakgrunn: #FFFFFF; polstringstopp: 10px; kant-bunn: 5px # A1DEF0 solid; } #contentMain h1, #contentMain h3 {color: #4991a5; } #meny {bakgrunn: # e7f7fb; } #meny ul {padding-top: 10px; margin-bunn: 10px; } #meny ul li {display: inline; font: 20px fet skrift Arial, Helvetica, sans-serif; } .artikkel {margin-venstre: 15px; } img.border-blue {border: 5px solid # e7f7fb; margin-bunn: 10px; } #footer {font-size: 11px; }

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng