Bloc div aspect cu proprietăți CSS - a crea un site bazat pe blocuri div

Div Layout este un model real de creare a site-urilor.

În rețea există întotdeauna site-uri noi - portaluri de știri, bloguri și pagini personale. Aproape fiecare dintre ele este creat pe baza modelului de bloc, care se bazează pe blocuri DIV. Astăzi vom face în această tehnologie, ia în considerare nuanțele de bază ale aspect div.

Fluxul unui document HTML

Dacă ne amintim că limbajul HTML vă permite să structureze o informație hipertext, devine clar faptul că orice site, în esența sa, este un set de unități: imagini, text, link-uri, și așa mai departe. Noi nu vorbim în mod specific despre blocuri DIV, dar este strâns subiecte conexe.

Deci, avem un flux de date, din care merge și pagina HTML. În momentul de față, există două tipuri de elemente structurale: bloc și litere mici. Block, în fluxul HTML normal sunt dispuse unul în spatele celuilalt, în ordinea verticală. În acest caz, lățimea implicită a blocului ocupat tot spațiul disponibil, în raport cu elementul de pagină sau părinte. La rândul său, mici elemente sunt dispuse unul în spatele celuilalt într-o manieră orizontală.

Bloc div aspect cu proprietăți CSS - a crea un site bazat pe blocuri div

Prin urmare, în cazul în care acesta este un flux normal HTML, toate elementele div sunt plasate sub unul pe altul, și în linia de interval.

site-ul aspect DIV

Deci, pentru a marca site-ul a început să se utilizeze blocuri DIV. Utilizarea lor, puteți raschertit a fost aspectul de bază, și de a crea unități suplimentare pentru toate tipurile de conținut relevante.

Să vedem acest proces ca un exemplu al unei pagini standard, inclusiv capacul, conținutul de bloc, bara laterală și subsol.

După cum puteți vedea în imagine, pentru aspectul layout-am folosit următoarele componente principale:

Unitatea principală este utilizată ca un container pentru întregul conținut. Antet - banner. Nav - unitate de navigație. Conținut - Informații generale și de conținut. Subsol - pivniță site-ul.

Fiecare dintre aceste blocuri este un DIV container. Dar, pe teoria, blocurile trebuie să meargă după unul pe altul. De asemenea, avem nevoie pentru a obține aspectul discutat mai sus că blocurile au următoarea structură:

Și în plus la toate, vor fi plasate pe pagina în același mod așa cum am văzut în șablon. Cum putem realiza acest lucru? În acest scop, vom folosi proprietatile pentru blocuri DIV care ne va permite să le aranjeze așa cum se dorește, în raport cu celălalt, iar pagina în ansamblu.

Dar, pentru început, să creeze însăși baza aspectul nostru HTML, și să dea numele blocurilor pentru a putea lucra cu foi de stil.

HTML cadru

Dacă săriți peste toate etichetele de serviciu, scheletul site-ului va arata.

Pentru fiecare bloc am numit clasa. Cu aceasta, vom stabili stilul pentru unitatea - acest lucru ne va ajuta să atingă locația dorită pe pagină.

Este timpul să se familiarizeze cu stiluri și proprietăți care sunt folosite pentru a div structurarii site-ului.

Dacă cineva nu știe, în construirea site-ul deja folosind foi de stil CSS. Cu ajutorul lor, puteți schimba orice element pe pagină. Acest lucru se referă atât la designul vizual pentru blocul, și localizarea și dimensiunea acesteia.

Pentru început, să se familiarizeze cu proprietatea care vă permite să poziționați blocul DIV la dreapta sau la stânga a paginii sau a containerului părinte.

O mică digresiune. Întotdeauna când vom atribui un stil de la un bloc, se va modifica proprietățile sale (mărimea, localizarea), în raport cu containerul părinte.

Proprietatea float are patru valori: nici unul, dreapta, stânga, moștenesc.

Suntem interesați de valoarea de „stânga“ și „dreapta“.

Valoarea float indicand care parte se va arăta blocul nostru. Toate celelalte blocuri vor curge în jurul ei pe partea opusă.

În acest caz, unitatea de navigație, trebuie să specificați valoarea din stânga. o valoare pentru conținutul dreptul primar. Iată cum va arăta în fișierul stil:

Apropo, puteți seta proprietatea numai pentru unitatea de navigație. blocul de conținut va fi setat automat dreptul de navigare. Acest lucru va fi realizat datorită unui ambalaj care este obținut prin setarea proprietăților de float.

Padding în CSS: marjă și padding

Acum, să ne explicăm două proprietăți importante utilizate în blocurile div bazate pe aspect. Ele sunt responsabile pentru umplutură. Pentru a înțelege esența muncii lor pe cel mai simplu exemplu.

Să ne imaginăm că trebuie să facem astfel încât unitatea noastră principală MAIN. a avut un mic decalaj față de antetul site-ului. Acest lucru se poate face prin atribuirea la blocul cu clasa principală div. proprietate marja. Acesta este responsabil pentru blocul de umplutură extern.

Marja de proprietate are următoarele valori: [valoarea | interes | Auto] | moștenesc.

Astfel, puteți specifica capitonarea în pixeli, procente, alternativ pe fiecare parte.

Este posibil să se specifice numai anumite indentare, de exemplu, pe partea de sus. Acesta este exact cazul nostru. Iată cum va fi pus în aplicare:

Acum, unitatea noastră principală va avea o crestătură superioară 10 pixeli.

Acum să atragă unitate cu navigare și conținut. Imaginați-vă că avem deja un site web. Toate link-urile din navigația strâns adiacente în stânga paginii. Un text în blocul de conținut din contră, foarte apropiate de pe partea dreapta. Nu este destul de un design placut. Trebuie să facem padding.

Pentru că este în proprietatea padding. având următoarele valori: [valoare | interes] | moșteni

Aici același principiu ca și cu marja de proprietate - puteți seta liniuță pentru fiecare parte separat.

Să primele link-uri de navigare otodvinem de marginea din stânga 15 pixeli. Apoi, textul din blocul de conținut este de 20 de pixeli de pe partea dreapta. Ca rezultat, codul nostru CSS un pic add:

Folosind aceste proprietăți de bază, puteți obține aspectele DIV dorite. Ca rezultat, veți obține aspectul gata a site-ului, și va trebui doar să-l umple cu informațiile necesare.

concluzie