Dacă știți etichete HTML și ați învățat un CSS puțin, puteți stăpâni lent aspectul, combinând diferite moduri.
De exemplu, puteți crea o piesă de lucru goală și puteți adăuga blocuri noi pentru a vedea ce sa întâmplat.
Puteți adăuga în continuare diverse paragrafe și imagini. Dar veți obține o structură liniară, care este adecvată atunci când plasați orice document fără înregistrare. Site-urile au, de asemenea, un anumit aspect: o pălărie, un subsol, elemente laterale etc. Aceste elemente sunt formate din div. Să încercăm să le declarăm mai întâi în interiorul corpului.
Ca rezultat, obținem cele patru linii obișnuite unul câte unul. Dar aceasta este o impresie înșelătoare. De fapt, ele sunt deja blocuri, dar cu setările implicite.
Pentru a face ca blocurile să fie un material de construcție, trebuie să le adăugați CSS. De obicei, proprietățile CSS sunt scrise într-un fișier separat și conectate la pagină. Dar pentru studiul de caz, vom descrie stilurile direct în dosar în zona capului. Stilurile create sunt plasate în eticheta de stil.
Actualizați pagina. Acum avem patru dreptunghiuri cu graniță neagră. Toate blocurile au aceleași setări: culoarea, dimensiunile, lățimea cursei. În realitate, fiecare bloc este individual. Pentru a distinge între ele, utilizați identificatori și clase. Să începem cu identificatorii. Creați noi reguli utilizând grila #. Blocurile necesare vor fi atribuite identificatori. Acum codul va fi după cum urmează.
Rezultatul nu va fi foarte frumos, dar aveți deja o idee generală despre modul în care puteți gestiona blocurile.
Pentru a împiedica ieșirea din bloc a frontierei, o puteți adăuga la stiluri:
Acum, lățimea cadrului este luată în considerare în lățimea întregului bloc și nu este adăugată la acesta. Avem o pălărie, o coloană laterală și partea principală într-o singură linie, iar sub ea există un subsol.
Pentru a centra eșantionul creat, trebuie să fie înconjurat de un bloc suplimentar.
Adăugați un nou bloc div cu ID-ul de împachetare. care ar trebui să înconjoare toate celelalte blocuri.
Am stabilit lățimea recipientului și marginile exterioare. Prima cifră specifică o indentare de jos și de sus, iar cea de-a doua - din stânga și din dreapta. În consecință, cuvântul cheie auto creează astfel de elemente de umplutură astfel încât elementul să fie aliniat chiar în centru.
Am setat stilul pentru toate elementele div la începutul layout-ului. Se va aplica ambalajului. că nu au vrut deloc. Prin urmare, folosind pseudo-clasa: nu, specificăm că regulile ar trebui să se aplice tuturor blocurilor, cu excepția blocului cu identificatorul de înfășurare.
De obicei, în coloana laterală, antetul și subsolul, cantitatea de informații nu se schimbă, deci puteți seta o înălțime fixă. Conținutul principal depinde de cantitatea de text și poate fi diferit. Prin urmare, este mai bine să puneți acest bloc la o înălțime minimă folosind min-height.
Aspectul pregătit are anumite deficiențe, pe care le puteți elimina prin acumularea de experiență. Apoi, puteți personaliza culoarea, fontul etc.
Versiunea finală, care este departe de a fi ideală.
Articole similare
Trimiteți-le prietenilor: