✅ Aspect cu clase CSS din 960 Grid System

Cuprins

Cadrul CSS 960 Grid SystemNu este altceva decât o standardizare a stilurilor care oferă clasele necesare pentru a implementa coloane într-o pagină web, de diferite dimensiuni, cu care să dispunem conținutul nostru cu ușurință și în mod ordonat.
960 Grid System poartă acest nume deoarece este un sistem de grilă pentru a crea pagini cu lățimea de 960 pixeli. Coloanele pe care le putem plasa pe grilă vor avea lățimi diferite, dar lățimea totală a paginii va fi întotdeauna de 960 pixeli.
Cu aceste clase CSS predefinite, putem folosi 12 sau 16 coloane pentru a crea aspectele noastre, fiecare dintre coloane are o margine stângă și dreaptă de 10 px, pentru a crea 20 px de separare între coloane. Știind acest lucru, spunem că, dacă folosesc 12 coloane, fiecare coloană va avea 60px fiecare și dacă folosesc 16 coloane, lățimea fiecărei va fi de 40px.
Pentru a avea un gui adăugăm o imagine a modului în care sunt distribuite coloanele.
Este foarte ușor de așezat în acest fel și uitându-ne la imagine ne facem o idee despre cum să o facem. În scopul acestui tutorial, vom crea un aspect pentru a structura un site web și a organiza informații.
Începem exemplul nostru creând un fișier 960test.html și adăugăm următorul css între etichete
[culoare = # 000000]

[/Culoare]
Aceste fișiere sunt cele care au clasele cadrului de rețea 960, dacă avem nevoie de css noi, le vom aplica într-un fișier separat, nu vom modifica niciodată cadrul pentru a-l menține standard.
Iată un aspect simplu pentru a explica mai bine utilizarea 960 Grid

Automobile

Plătiți
RSS

Coperta
Știri
Membri
Promoții
Contactează-ne

Unele titluri

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.

În continuare, pentru a termina exemplul, adăugăm un fișier mystyles.css

 @charset "iso-8859-2"; / * Document CSS * / div.spacer {height: 1em; } #top {width: 100%; fundal: # 29231e; poziție: relativă; sus: 0; stânga: 0; } #top ul {margin: 10px 0 10px 0; culoare: #FFFFFF; } #top ul li {display: inline; } #bodyMain {background: url (… /images/nubes-background.jpg.webp) centru de sus fără repetare; } #rss {background: url (… /images/rss-logo.gif.webp) nu se repetă dreapta; umplutură: 5px 30px 5px 0; } un # logo {background: url (… /images/vos-voz.gif.webp) fără repetare; lățime: 470px; înălțime: 92px; plutește la stânga; marginea-sus: 150px; } img # city-logo {float: left; } #header {border-bottom: 5px solid # 29231e; fundal: url (… /images/header.jpg.webp) fără repetare; înălțime: 173px; } #contentMain {background: #FFFFFF; căptușeală: 10 px; marginea de jos: 5px # A1DEF0 solid; } #contentMain h1, #contentMain h3 {color: # 4991a5; } #meniu {background: # e7f7fb; } #menu ul {padding-top: 10px; marginea de jos: 10 px; } #menu ul li {display: inline; font: 20px bold Arial, Helvetica, sans-serif; } .article {margin-left: 15px; } img.border-blue {border: 5px solid # e7f7fb; marginea de jos: 10 px; } #footer {font-size: 11px; }

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv