Share
Suntem deja familiarizați cu variantele de 12 și 16 coloane din 960.gs, dar știați că există și o alternativă cu 24 de coloane? În acest articol, veți stăpâni sistemul de grilă 960 prin disecarea demo-ului versiunii cu 24 de coloane. Dacă ați folosit doar 960gs înainte pentru machete Photoshop, luați în considerare această zi norocoasă. Până la sfârșitul acestui articol, veți putea transforma desenele dvs. în HTML și CSS în cel mai scurt timp.
Un master de sistem de rețea 960-asta vei fi după ce vei trece prin acest articol. Și, deși vom folosi varianta de 24 coloane de 960gs, veți înțelege complet cum funcționează cele două tipuri mai vechi (12 și 16 coloane), aplicând aceleași principii pe care le veți învăța aici . Dar, mai întâi, aruncăm o privire bună asupra demo-ului cu 24 de coloane din site-ul 960gs, deoarece tot ce ne trebuie în saltul spre măiestria acestui CSS popular.
Mai întâi trebuie să verificăm codul HTML al demo-ului, deci să-i vedem sursa - dacă folosești Chrome, Firefox sau Opera, trebuie doar să apăsați ctrl + U; dacă utilizați Internet Explorer, schimbați browserul! :) (pe Mac, utilizați cmd + U pentru Firefox și Firefox opt + cmd + U pentru Safari și Opera; Chrome face doar opțiunea cu clic dreapta). Păstrați fereastra codului sursă HTML pe desktop, așa cum o vom referi din când în când la el.
Apoi, va trebui să descărcați fișierele 960.gs (dacă nu ați făcut-o încă) și să deschideți fișierul CSS necomprimat 960_24_col.css. Trebuie să facem acest lucru, deoarece CSS demo-ul este comprimat și va fi dificil de inspectat. (Dacă sunteți tipul masochistic, nu ezitați să utilizați în schimb CSS demo-ul.
Asta e tot ce trebuie să ne pregătim, în afară de un creier semi-funcțional. Acum veți găsi că pagina demonstrativă deține cheia pentru înțelegerea completă a sistemului de rețea și vom începe prin examinarea celor trei secțiuni.
Cele trei secțiuni constau în următoarele:
În primul rând, avem o zonă de vârf care arată două coloane pentru fiecare rând, unde coloana din stânga crește, pe măsură ce coloana din dreapta devine mai îngustă, până când acestea sunt egale în mărime.
Apoi, avem o secțiune mijlocie care arată o pătrată de 30px care se mișcă progresiv de la stânga la dreapta, în timp ce spațiul alb înainte și după el extinde rândul pentru a prelua întreaga lățime de 960px.
În cele din urmă, există o secțiune de jos care arată două rânduri de dreptunghiuri cu dimensiuni diferite, care împart lățimea de 960px în două jumătăți.
Credeți-vă sau nu, înțelegerea completă a ceea ce au atribuit clasele atribuite în spatele acestor coloane este tot ce veți avea nevoie vreodată pentru a obține o înțelegere fermă a sistemului de rețea 960. Nu e grozav? Să examinăm fiecare secțiune mai departe.
Accentsconagua
grid_1 la grid_24 clasePrivind la codul sursă al acestei secțiuni, ne arată că, în primul rând, înainte de oricare dintre grid_xx clase au fost atribuite clasei container_24 a fost acordat divului general de împachetare:
24 Grilă de coloane
...
Importanța acestei clase nu poate fi supraestimată - ea dictează parțial lățimea coloanelor unde a grid_xx clasa este atribuită. Și după cum probabil ați ghicit, aceasta "împarte" și lățimea de 960px în 24 de coloane.
(În mod similar, punerea container_12 sau container_16 în partea de sus vor "împărți" lățimea în 12 și respectiv 16 coloane. Cuvantul divide este în citate, pentru că nu face acest lucru; veți vedea mai târziu cum se realizează acest proces.)
Mergând mai departe, veți observa că cel mai mare rând are un div divizat cu o clasă de grid_24. Rândurile rămase în secțiunea de sus au câte două diviziuni: diviziunea din stânga variază de la clasă grid_1 pâna la grid_12, iar diviziile din dreapta variază de la grid_23 până la grid_12; suma celor două clase în fiecare rând este de 24.
950
30
910
70
430
510
470
470
Acesta este modul atribuit grid_xx clase ar arăta dacă am încercat să vizualizăm fiecare nume de clasă div:
S-ar putea să fi observat în cod că, după ultima divă la rând, avem un div gol cu o clasă de clar. Ignorați-o deocamdată, vom rezolva mai târziu.
Apoi, să aruncăm o privire la ceea ce se întâmplă în spatele scenei, adică în CSS, când îi atribuim container_24 clasă:
.container_24 margin-stânga: auto; margin-dreapta: auto; lățime: 960px;
După cum puteți vedea, această clasă, care a fost atribuită divizării globale a documentului, centrează zona noastră de lucru și o dă o lățime de 960px. Destul de usor.
Apoi, iată grid_xx clase, care au fost plasate pe principalele secțiuni ale secțiunii de sus:
.grid_1, .grid_2, .grid_3, ... grid_23, .grid_24 afișare: inline; plutește la stânga; margin-stânga: 5px; margin-dreapta: 5px;
Vedem că grid_xx clasele dau coloanele stânga și dreapta margini de câte 5px fiecare, care formează un jgheab de 10px atunci când plasați coloanele una lângă cealaltă. Aceasta, la rândul său, se realizează prin faptul că le plutește pe toate stânga.
De asemenea, li se dă a afişa de in linie, pentru a împiedica declanșarea Bugului Flotor Double Margin în browserul nostru dragi. (Aparent, aceasta este declanșată atunci când plutiți un element care are marje atribuite acestuia.)
În cele din urmă, avem selectorii descendenți formați de o combinație de container_24 și grid_xx clase:
.container_24 .grid_1 lățime: 30px; .container_24 .grid_2 width: 70px; ... container_24 .grid_23 width: 910px; .container_24 .grid_24 width: 950px;
După cum puteți vedea, aceste declarații CSS sunt cele care determină de fapt lățimea coloanelor unde a grid_xx clasa este atribuită. Acesta este modul de atribuire container_24 în partea de sus "împarte" lățimea în 24 coloane - dimensiunile prestabilite ale lățimii sunt atribuite în funcție de care container_xx clasa a grid_xx clasa este combinată cu.
Pentru comparație, iată cum arată cumpărările CSS în varianta cu 16 coloane:
.container_16 .grid_1 lățime: 40px; .container_16 .grid_2 width: 100px; .container_16 .grid_3 width: 160px;
Dacă comparați codul sursă HTML al demo-ului pentru coloanele cu 12 și 16 coloane cu demo-ul cu 24 de coloane, veți observa că nu există nicio diferență în modul în care grid_xx clase au fost atribuite. Și acum știi de ce este așa - nu este grid_xx clasa care determină lățimea coloanelor, dar combinația acesteia cu a container_xx clasa, așa cum se arată în CSS de mai sus.
Un alt lucru care merită menționat aici este dimensiunea reală a fiecărui container atunci când îl atribuiți grid_xx clasă. Deși e etichetat 30, 70, 110, și așa mai departe în demo, este de fapt Mai mult de 10 pixeli din cauza marginilor din stânga și din dreapta de pe ambele părți ale containerului.
După cum puteți vedea,
A vedea acest lucru satisface matematica pe care o avem pentru lățime: coloanele de 24 de coli de 40 de pixeli sunt egale cu 960 de pixeli (adică 40 pixeli * 24 = 960 de pixeli).
Această vizualizare arată mai exact ceea ce face efectiv CSS la marcare. Deși dimensiunea recipientului este într-adevăr simplă 30px, 70px, 110px, și așa mai departe (așa cum este etichetat în demo), ajută să știm că marginile orizontale sunt motivul pentru care suma lățimilor pentru fiecare rând nu este egală cu 960 de pixeli. (Numai 940 de pixeli, cu excepția primului rând, au fost atribuite a grid_24, care se întinde pe 950 de pixeli. Cota "pierdută" de 20px pentru toate celelalte divizări este reprezentată de marjele de 5px din stânga și din dreapta și jgheabul de 10px dintre cele două coloane pentru fiecare rând.)
Dar aici este cel mai practic lucru de reținut: Atâta timp cât utilizați șablonul psd de 24 de coloane atunci când creați desenele dvs. (sau șabloanele de psd de 12 sau 16 coloane, de pildă), puteți numărați doar numărul de coloane pe care doriți pentru un anumit element de design, utilizați acel număr pentru dvs. grid_xx clasă, iar coloana este setată. De exemplu, în cazul în care logo-ul dvs. ocupă patru coloane, atunci dați conținutul div a grid_4 clasă.
Iată un exemplu de utilizare:
Deși site-ul 960.gs (prezentat mai sus) folosește de fapt varianta cu 12 coloane, am putea suprapune modelul cu 24 de coloane pe acesta și acesta se va potrivi perfect aspectului (deoarece versiunea cu 24 de coloane este, desigur, , doar versiunea cu 12 coloane cu coloane împărțită la două).
După cum puteți vedea, știind că avem o lățime de 960 de pixeli împărțită în 24 de coloane face viața mai ușoară, deoarece trebuie să aliniem doar elementele de design de-a lungul marginilor coloanelor, să numărăm numărul de coloane pe care le ocupă, grid_xx numărul de clasă și am terminat.
Dar dacă vrei o mulțime de spații goale în designul tău? Sau dacă doriți să centrați un element de design mic și să aveți doar spații albe în jurul acestuia?
Introduceți prefix_xx și suffix_xx clase.
prefix_xx și suffix_xx claseDacă bifați marcajul pentru secțiunea din mijloc, ceea ce veți vedea sunt variante ale acestui cod:
30
… Unde prefix_xx + suffix_xx = 23. (adică 0 + 23, 1 + 22, 2 + 21, 3 + 20 și așa mai departe ...)
Ce se intampla aici?
Mai întâi, veți observa că fiecare atribuire a claselor de rang este de 24 de coloane (grid_1 + valorile combinate ale prefix_xx și suffix_xx clase, care este 23).
Apoi, veți vedea că prefix_xx clasele sunt în ordine crescătoare (de la 1 la 23) în timp ce suffix_xx clasele sunt descendente (de la 23 la 1). De asemenea, când prefix_xx sau suffix_xx are o valoare de 23, nu are o contrapartidă suffix_xx sau prefix_xx clasa, deoarece nu mai are nevoie de ea (valoarea este deja 23).
În sfârșit, fiecare dintre aceste unități are o lățime de 30 de pixeli și, așa cum am văzut în grid_xx clasele de mai sus, au și marje orizontale 10px.
Știm deja că atribuirea unui element a grid_1 clasa îi dă o lățime de 30px și paduri de 5px pe fiecare parte. Dar ce face? prefix_xx și suffix_xx cursurile fac?
După cum probabil ați ghicit deja, ele oferă stânga suplimentară (prefix_xx) și dreapta (suffix_xx) padding, mărind dimensiunea unui a grid_xx unitate de clasă. Prin urmare, prefix_1, prefix_2, și prefix_3 va da paddings dvs. stânga element de 40px, 80px, și 120px, respectiv; în timp ce aceleași cantități de garnituri sunt date suffix_xx omoloage, dar în partea opusă.
.container_24 .prefix_1 padding-left: 40px; .container_24 .prefix_2 padding-left: 80px; ... container_24 .suffix_1 padding-right: 40px; .container_24 .suffix_2 padding-right: 80px;
Pentru spațiul alb în desenele dvs., trebuie doar să adăugați prefix_xx și suffix_xx clase. Ele blochează conținutul dvs. la o anumită lățime (determinată de grid_xx clasa pe care o atribuiți), în timp ce spațiul de pe ambele părți este umplut cu umplutură.
Pentru un exemplu simplu, să presupunem din nou că pagina de pornire 960.gs folosește varianta cu 24 de coloane și că grafica pentru twitter-bird este sigla site-ului.
Putem vedea că ocupă trei coloane, așa că le dăm a grid_3 clasă. Să presupunem, de asemenea, că nu există alte elemente pe rând. Așadar, și noi l-am da suffix_21 clasa (3 + 21 = 24), deoarece suprapunerea suplimentară trebuie să se întindă pe întreaga lățime.
Evident, dacă există alte elemente pe acest rând, trebuie să ajustăm suffix_xx clasa pentru a crea spațiu pentru un alt element care se întinde pe câteva grid_xx (de exemplu, un formular de căutare). De asemenea, în funcție de locul în care se află elementele de design față de marginea din stânga a rândului, este posibil să fie necesar să adăugați și a prefix_xx clasă.
Amintiți întotdeauna: numerele utilizate în clase pentru fiecare rând (fie grilă, prefix, sau sufix) ar trebui să fie egală cu 24.
Apoi, vom realiza un pic de "magie", următorul set de clase permite ca conținutul dvs. să apară diferit decât ceea ce marcajul prezice.
pull_xx și Pentru această secțiune, dacă nu utilizați Firefox în acest moment, aș vrea să vă rog să treceți la el temporar, deoarece veți înțelege mai bine conceptele următoare cu extensia de extensii Web Developer Tool (WDT) a lui Chris Pederick pentru Firefox. (Dacă nu l-ați instalat încă, acum este momentul să îl descărcați și să îl instalați. Înțeleg că există deja o versiune Google Chrome a WDT, dar, în opinia mea, nu este aproape de omologul său Firefox.)
După ce executați Firefox cu WDT deja instalat, reveniți la pagina demo de 24 coloane și derulați în jos până la partea de jos. Veți vedea cele două grupuri de cutii pe care vi le-am arătat cu ceva timp în urmă - de dimensiuni diferite, dar se potrivesc împreună pentru a forma această ultimă secțiune a demo-ului.
Acum verificați codul HTML pentru această secțiune:
230
230
30
430
30
430
230
230
Comparați din nou cu ceea ce vedeți pe pagina demo.
Ce se intampla aici? Nu trebuie să fie primul grup de cutii (230-230-30-430) înainte de ultimul grup (30-430-230-230), ca și în marcaj?
Ei bine, asta e puterea push_xx și pull_xx clase. Dar înainte de a intra în ele, mergeți la WDT, faceți clic pe informație butonul și alegeți Afișați comanda Div, doar pentru a vă asigura că vedeți în mod corect modul în care CSS afectează marcarea.
Iată o captură de ecran a ceea ce ar trebui să vedeți:
A trebuit să arăt acest lucru pentru a demonstra că cele două grupuri sunt împărțite în stânga și dreapta laterale, și nu de sus și de jos. Această eroare de percepție este ușor de făcut (așa cum am făcut-o) deoarece: (1) suntem obișnuiți să vedem grupuri div care întind întreaga lățime de 960px; și (2) cele două grupuri au cutii de dimensiuni similare care sunt ușor de confundat unul cu celălalt.
(Nathan Smith, creatorul 960gs, ar fi putut folosi probabil cutii de dimensiuni diferite - de ex. 70-390-190-270 și 230-230-30-430-pentru a obține același efect și ar fi evitat confuzia potențială, dar el nu ...)
Dar acum că ați văzut cum a fost "împins" primul grup (așa cum apare în marcaj) și cum a fost "tras" de către aceste clase, verificați CSS pentru a vedea cum o fac:
.push_1, .pull_1, .push_2, .pull_2, ... push_22, .pull_22, .push_23, .pull_23 position: relative; ... container_24 .push_1 left: 40px; .container_24 .push_2 left: 80px; ... container_24 .push_22 left: 880px; .container_24 .push_23 left: 920px; ... container_24 .pull_1 la stânga: -40px; .container_24 .pull_2 left: -80px; ... container_24 .pull_22 left: -880px; .container_24 .pull_23 left: -920px;
Mai întâi, dând aceste două clase elementelor HTML poziționează aceste elemente în mod relativ, astfel încât să putem muta divs la stânga, dreapta, top, sau fund față de locul în care ar apărea în mod normal în document. (Mai multe despre poziționarea CSS aici.)
Apoi, în combinație cu container_24 clasa, pull_xx clasele dau div negativ stânga, ceea ce face posibilă "tragerea" conținutului div în stânga. Pe de altă parte, push_xx clase, așa cum era de așteptat, face opusul și dă div a (pozitiv) padding stânga pentru a "împinge" conținutul său la dreapta (dând drumul la padding stânga).
"Dar de ce hassle?" S-ar putea întreba. "De ce să nu le puneți în ordinea corectă a marcajului în primul rând, deci nu va trebui să folosiți aceste clase inutile?"
Întrebări bune. Răspunsul constă în urmărirea marcării semantice și accesibile - desenele noastre nu ar trebui să forțeze markup-ul unei structuri care nu are sens sau nu respectă standardele atunci când stilizarea este oprită. Și CSS a fost dovedit să se ocupe de astfel de situații elegant - ne permite să realizăm aspectul desenelor noastre indiferent de modul în care a fost scris marcajul (bine, în mare măsură).
În site-ul 960gs, Nathan Smith arată antetul ca un bun exemplu de utilizare a acestor clase:
Pe suprafata, s-ar putea sa credem ca marcajul va arata mai intai logo-ul Twitter, apoi link-ul Download si in cele din urma logo-ul 960. Dar asta nu ar fi semantic - titlul site-ului (adică 960 logo-ul) ar trebui să vină în primul rând. Și după cum probabil știți, acest aranjament are și beneficii SEO. Deci, marcajele pentru antet se referă de fapt la:
960 Grid System
Descărcare - Șabloane: Focuri de artificii, Flash, ...
După cum puteți vedea, logo-ul nu vine în primul rând, și după acesta, link-ul de descărcare. (S-a găsit marcajul pentru sigla Twitter după subsol, i sa dat un id de stare de nervozitate, și este absolut poziționată. Nu i sa dat o clasă 960.gs, deci nu ne vom ocupa de ea.)
De asemenea, ați văzut în marcaj (așa cum a fost prezis) că logo-ul a fost împins și secțiunea link-ului de descărcare tras. Pentru ao vizualiza mai clar:
Și așa folosiți Apăsați sau Trage clase-știu că ei fie dau divs-ului dvs. un padding negativ sau pozitiv stânga, apoi "trage" sau "împinge" conținutul în funcție de numărul de coloane de care aveți nevoie de conținut pentru a fi tras sau împins.
Există un ultim set de clase care sunt integrate în 960.gs - și vă permit să creați aspecte complexe. O coloană care cuprinde mai multe rânduri, de exemplu. Să le abordăm în continuare.
alfașiomegaClaseDacă ați citit tutoriale sau articole pe 960.gs înainte, probabil că deja știți deja că alfa și omega clasele anulează setările orizontale stabilite de grid_xx clase. Și, cel mai probabil, știi, de asemenea, că utilizarea lor primară este atunci când ai grid_xx clase în divs imbricate.
În beneficiul celor care nu cunosc încă, hai să mergem la CSS și să vedem ce fac aceste clase la elementele cărora le sunt atribuite:
.alfa marginea-stânga: 0; .omega margin-right: 0;Destul de simplu - pur și simplu zero în stânga (alfa) și dreapta (omega) marje. Și așa cum am văzut acum ceva timp, când atribuim un element a grid_xx clasa, le oferim automat marje orizontale de 5px pe ambele părți. Cu divs imbricate, nu vrem să dublem aceste marje, așa că dăm un alfa sau an omega clasa sau ambele, în consecință.
Un div imbricat care atinge marginea din stânga divului său părinte va fi dat alfa clasă. În mod similar, omega clasa este atribuită divului imbricat care este plasat pe marginea dreaptă a părintelui div. Dar dacă avem o divă imbricată care atinge ambele margini ale divizorului părinte? Așa că îi atribuim ambelor clase.
Să mergem la un exemplu pentru a vedea cum se face.
Deși nu este prezentat în demo-ul 960.gs, aici este o prezentare a modului în care se realizează un aspect complex cu ajutorul alfa și omega clase (și divs imbricate cu grid_xx clase):
Aici avem coloane care se întind pe mai multe rânduri pe ambele părți, cu rânduri și cutii în mijloc. De asemenea, o puteți vizualiza ca un aspect tipic cu 3 coloane; dar pentru exemplul nostru folosim doar 15 coloane. Desigur, puteți să-l extindeți cu ușurință la 24 coloane.
Cheia pentru a crea astfel de machete în 960.gs este:
- Amintiți-vă că 960.gs face aspectul posibil prin divi flotant la stânga.
- Creați divs dvs. imbricate de la divs inițial float-. Asta înseamnă că vei fi plutind divs în divs flotate.
Iată o modalitate de abordare a aspectului nostru: grupează-le mai întâi în trei coloane și le atribuiți corespunzător grid_xx clase:
Apoi, atribuiți suplimentar grid_xx clase pentru divs imbricate (rețineți că nu avem vărsat div pentru coloana din dreapta):
Deoarece avem cel puțin două niveluri de grid_xx clase în divs imbricate, trebuie, de asemenea, să adăugăm alfa și omega clase în mod corespunzător:
Divs imbricate în interiorul coloanei din stânga atinge ambele marginile div divorât, așa că trebuie să adăugăm ambii alfa și omega. Același lucru este valabil și pentru divs cu grid_8 clase în secțiunea mijlocie. Dar fiecare grid_4 div pe partea de sus trebuie doar să aibă alfa sau omega, deoarece atinge numai marginea stângă sau cea dreaptă a diviziei părinte.
Așa cum ați fi putut deduce din acest exemplu simplu, aveți posibilitatea să cuipeți div grid_xx clasele la fel de adânci cum doriți (dacă designul dvs. o cere), atâta timp cât le marcați în mod corect și le dați clasele potrivite 960.gs, astfel încât acestea să fie flotate corect și eventualele marje de exces sunt anulate.
Și vorbind despre flotoare, ultimul grup de clase 960.gs, deși nu este unic pentru 960.gs, face totul posibil - ele elimină flotoarele create automat când atribuiți grid_xx clasă.
Nivelarea câmpului:
clarClaseAnterior, am observat acest lucru în markup-fiecare div care a fost dat grid_xx clasa, care a fost și ultima div pentru rândul său, a fost urmată de o div divizată cu o clasă de clar.
190
750
230
710
Motivul fără motiv pentru acest lucru este că trebuie să ștergem divurile plutitoare, pentru că odată ce le plutim, ele nu mai ocupă spațiu, făcând ca elementele de dedesubt să fie "trase", ceea ce duce în cele din urmă la o structură spartă.
Așa cum am văzut în demo, o soluție pentru această problemă potențială este de a plasa o extra diviziune non-semantică cu o clasă de clar, care face următoarele:
.clar clar: ambele; afișare: bloc; overflow: ascuns; vizibilitate: ascuns; lățime: 0; înălțime: 0;Codul de mai sus este în esență soluția proprie a lui Nathan Smith la această problemă, așa cum sa discutat în blogul său. O mulțime de designeri web nu au nici o problemă cu aceasta, cu excepția, probabil, pentru standarde care ar putea să se răzgândească la gândul de a folosi extra divizii non-semantice în markup-ul pentru o problemă de styling.
Din fericire, Nathan Smith a inclus și clearfix soluție în CSS 960.gs, discutată mai întâi pe PositionIsEverything.net. Ea elimină extra div, așa cum o puteți plasa alături de grid_xx clase și să obțină același efect:
190
750
230
710
Acesta este același exemplu de marcare de mai sus cu extra divs eliminate, și clearfix clasa adăugată. Aceasta voi faceți același lucru, astfel încât să puteți alege această metodă de compensare dacă o găsiți după preferințele dvs. Iată CSS-ul pentru el:
.clarfix: după clar: ambele; Conținutul: "; display: block; dimensiunea fontului: 0; linia-height: 0; vizibilitatea: hidden; width; 0; height: 0; / * Următoarea regulă zoom: 1 este specifică pentru IE6 + IE7. stiluri separate dacă CSS nevalid este o problemă. * / * html .clearfix, *: first-child + html .clearfix zoom: 1;Codul ar putea fi un pic diferit de cel cu care sunteți obișnuit. Acest lucru se datorează faptului că Nathan Smith sa bazat pe o intrare de blog de Jeff Star, care se presupune că actualizează hack-ul original clarfix, pentru a elimina codul destinat unui browser care a dispărut acum (adică IE pentru mac) și îl ajustează pentru cele mai noi IE6 și IE7).
Concluzie
Folosind doar demo-ul de 9 coloane din 960.gs (și, în unele cazuri, site-ul 960.gs însuși), ți-am arătat cum funcționează fiecare clasă și cum i-ai putea folosi în convertirea desenelor bazate pe 960 în HTML și CSS.
Fiecare secțiune din demo oferă lecții de învățat și, odată ce vedeți ce fac clasele la marcarea dvs. prin examinarea CSS, misterul 960.gs dispare și veți înțelege mai bine ce se întâmplă în spatele scenei. S-ar putea găsi chiar și noi modalități de utilizare a cursurilor, deoarece acum știți ce fac ei.
Aplicarea cunoștințelor dvs. noi devine ușoară, pentru că odată ce ați stabilit coloanele folosind 960.gs, va trebui să alocați id-uri pentru divs (așa cum o justifică situația) ca și cârlige pentru a ajusta în continuare pereții de perechi sau dimensiunile textul său interior.
