✅ Lay-out met CSS-klassen van 960 Grid System

Inhoudsopgave

De CSS 960 Grid System-frameworkHet is niets meer dan een standaardisatie van stijlen die de nodige klassen biedt om kolommen in een webpagina van verschillende groottes te implementeren, waarmee onze inhoud gemakkelijk en op een ordelijke manier kan worden ingedeeld.
Het 960 Grid System heeft deze naam omdat het een gridsysteem is om pagina's van 960 pixels breed te maken. De kolommen die we op het raster kunnen plaatsen zullen verschillende breedtes hebben, maar de totale breedte van de pagina zal altijd 960 pixels zijn.
Met deze vooraf gedefinieerde CSS-klassen kunnen we 12 of 16 kolommen gebruiken om onze lay-outs te maken, elk van de kolommen heeft een linker- en rechtermarge van 10px, om 20px scheiding tussen kolommen te creëren. Dit wetende, zeggen we dat als ik 12 kolommen gebruik, elke kolom elk 60px zal zijn en als ik 16 kolommen gebruik, de breedte van elk 40px zal zijn.
Om een gui te hebben, voegen we een afbeelding toe van hoe de kolommen zijn verdeeld.
Het is heel gemakkelijk op deze manier in te delen en door naar de afbeelding te kijken, krijgen we een idee hoe het moet. Voor deze tutorial gaan we een lay-out maken om een website te structureren en informatie te ordenen.
We beginnen ons voorbeeld door een 960test.html-bestand te maken en de volgende css tussen de tags toe te voegen:
[kleur = # 000000]

[/Kleur]
Deze bestanden zijn degenen die de klassen van het 960-rasterraamwerk hebben, als we nieuwe css nodig hebben, zullen we ze in een apart bestand toepassen, we zullen het raamwerk nooit wijzigen om het standaard te houden.
Hier is een eenvoudige lay-out om het gebruik van 960 Grid beter uit te leggen

auto's

Betaal in
RSS

Voorblad
Nieuws
Leden
Promoties
Neem contact met ons op

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

Om het voorbeeld af te maken voegen we een bestand toe mystyles.css

 @charset "iso-8859-2"; / * CSS-document * / div.spacer {hoogte: 1em; } #top {breedte: 100%; achtergrond: # 29231e; positie: relatief; boven: 0; links: 0; } #top ul {marge: 10px 0 10px 0; kleur: #FFFFFF; } #top ul li {display: inline; } #bodyMain {achtergrond: url (… /images/nubes-background.jpg.webp) midden bovenaan niet herhalen; } #rss {achtergrond: url (… /images/rss-logo.gif.webp) niet-herhaalrecht; opvulling: 5px 30px 5px 0; } een # logo {achtergrond: url (… /images/vos-voz.gif.webp) no-repeat; breedte: 470px; hoogte: 92px; zweven: links; marge-top: 150px; } img # city-logo {float: left; } #header {border-bottom: 5px effen # 29231e; achtergrond: url (… /images/header.jpg.webp) no-repeat; hoogte: 173px; } #contentMain {achtergrond: #FFFFFF; opvulling-top: 10px; border-bottom: 5px # A1DEF0 effen; } #contentMain h1, #contentMain h3 {kleur: # 4991a5; } #menu {achtergrond: # e7f7fb; } #menu ul {padding-top: 10px; marge-onder: 10px; } #menu ul li {display: inline; lettertype: 20px vet Arial, Helvetica, schreefloos; } .article {marge-links: 15px; } img.border-blue {rand: 5px effen # e7f7fb; marge-onder: 10px; } #footer {lettergrootte: 11px; }

Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven