Exemplu de aspect de bloc. Aspect bloc: ce este și de ce este necesar? Exemplu de aspect de bloc

Aspectul site-ului se realizează folosind două metode principale: tabelar și bloc div machete. Dispunerea blocului este mai funcțională și oferă mai multe caracteristici datorită utilizării CSS.

Cum funcționează blocul?

Pentru a efectua acest tip de aspect, sunt utilizate două fișiere ( index.html și style.css) care conține cod HTMLși stilul site-ului în consecință.

În primul fișier sunt scrise direct div-containere, care sunt un fel de fundație pentru aspect, iar al doilea descrie caracteristicile stilului și poziția noastră div-containere.

Pentru a observa rezultatul manipulărilor efectuate în timp real, trebuie să introduceți în bara de adrese a browserului dvs.: http://URL/test.

Bazele aspectului

Aspectul cu două coloane pe care vom încerca să îl creăm poate fi schematizat astfel:

Toate elementele aspectului nostru trebuie să fie plasate într-unul comun pentru a putea seta parametrii pentru întregul aspect în ansamblu. Conținutul containerului partajat va fi div-s care formează blocuri separate. Prin utilizarea CSS putem personaliza următorii parametri: dimensiune, poziție pe pagină, stiluri și culoare.

Blocați aspectul site-ului web

Fiecare element de aspect trebuie plasat într-un „container” separat folosind o etichetă div. În dosar CSS trebuie să adăugați proprietăți ale elementelor, definind parametrii aspectului și plasării elementelor (lățime, înălțime, font, dimensiune și așa mai departe).

Pentru a nu fi confuz, trebuie să introduceți numele acestui bloc în fiecare container, acesta va arăta cam așa:

„http://www.w3.org/TR/html4/loose.dtd”>



Aspect bloc - luați 2




Coloana din stânga

Conținutul paginii




După finalizarea manipulărilor, trebuie să deschideți fișierul Style.cssși descrieți stilurile pentru aceste containere. În primul rând, este necesar să descriem stilurile pentru etichetele principale Corp și HTML, reducând la zero marginea paginii pentru a asigura compatibilitatea între browsere:

body, html (
margine: 0px;
umplutură: 0px;
}
body, html (
margine: 0px;
umplutură: 0px;
}
#maket (
lățime: 800px;
margine:0 auto;
}
#antet(
culoare de fundal:#C0C000;
}
#stânga(
culoare de fundal:#00C0C0;
lățime: 200px;
plutește la stânga;
}
#conţinut(
culoare de fundal:#8080FF;
margine-stânga: 202px;
}
#subsol(
culoare de fundal:#FFC0FF;
}

Pentru a obține o clasă de master mai detaliată despre cum să proiectați un site web bazat pe div, puteți viziona următoarele videoclipuri:

https://www.youtube.com/watch?v=omyeH5h1lqA
https://www.youtube.com/watch?v=SQ7cWIy63yI

Aspect cu blocuri DIV are o serie de avantaje în comparație cu aspectul tabelar. Aspect cu blocuri DIV asigura o incarcare mai rapida a paginii site-ului, continutul blocurilor DIV este afisat pe masura ce se incarca (spre deosebire de un tabel, in care continutul nu va fi afisat pana nu este incarcat tot continutul acestuia), codul paginii este lizibil. Dar aspectul blocului nu este ideal, există și dezavantaje. În acest fel, nu puteți obține o reprezentare a datelor așa cum o face un tabel. Adică, tabelele trebuie folosite pentru a afișa date tabelare. Aspectul tabelar poate fi folosit și pentru a seta structura paginii, dar nu ar trebui să folosiți totul în exces. Să vedem cum poți controla poziția unui bloc DIV pe pagina unui site web.
Mai întâi, să ne uităm la proprietatea stil float, care controlează poziționarea blocului flotant. Proprietatea float poate lua valori

  • stânga - elementul de pagină este forțat să fie aliniat la stânga;
  • dreapta - elementul de pagină este forțat să fie aliniat la dreapta;
  • none - elementul de pagină nu se mișcă, va fi afișat unde ar trebui să fie (valoare implicită).
Împreună cu float, este foarte des folosită proprietatea clear style, care controlează fluxul după blocurile mutate. Proprietatea de stil clar specifică chenarele elementului de pagină nu se potrivesc cu proprietatea float a blocului flotabil care îl precede. Proprietatea clear poate lua valori
  • stânga - elementul pagină este plasat sub orice bloc anterior mutat la stânga;
  • dreapta - elementul de pagină este plasat sub orice bloc anterior mutat la dreapta;
  • ambele - elementul de pagină este plasat sub orice bloc mutat anterior;
  • nici unul - nu există restricții privind poziția blocului în raport cu blocurile mutate.
Pentru a ilustra modul în care funcționează proprietățile float și clear, precum și pentru a vă familiariza cu elementele de bază ale modului în care se realizează aspectul cu blocurile DIV, luați în considerare următorul exemplu: creați trei blocuri DIV

1

2
text
text

3
text


Browserul va afișa acest cod HTML după cum urmează:

2
text
text


Toate cele trei blocuri sunt situate unul sub celălalt și au o lățime egală cu lățimea ferestrei browser (sau lățimea elementului de pagină HTML, cu acest cod). Acum să schimbăm lățimea fiecărui bloc DIV.

1

2
text
text

3
text


Acest cod va fi afișat în browser după cum urmează:

2
text
text


Fiecare bloc va avea propria lățime, dar vor fi amplasate și unul sub celălalt. În continuare, vom specifica proprietatea stilului float pentru fiecare bloc cu valoarea rămasă:

1

2
text
text

3
text


Obținem următoarea reprezentare

2
text
text


Lățimea blocurilor a rămas aceeași ca în exemplul precedent, dar și-au schimbat poziția: s-au aliniat într-un rând orizontal. Dacă adăugați un alt bloc, acesta va fi afișat nu sub blocurile înregistrate anterior, ci într-un mod diferit. În general, nu există nicio modalitate de a determina cum va fi afișat conținutul acestuia.

1

2
text
text

3
text

4
conţinut
conţinut
conţinut


Dar în cazul nostru va fi afișat după cum urmează

2
text
text

4
conţinut
conţinut
conţinut


Pentru ca un nou bloc să fie situat sub blocurile anterioare, trebuie să setați proprietatea lui clear cu valoarea corespunzătoare, în cazul nostru, puteți seta valoarea fie la ambele, fie la stânga:

1

2
text
text

3
text

4
conţinut
conţinut
conţinut


Codul rezultat va fi afișat după cum urmează (și în diferite browsere, cum ar fi IE, Opera și Firefox, exemplul va fi afișat cu diferențe)

2
text
text

4
conţinut
conţinut
conţinut


Folosind proprietățile de mai sus, acestea creează structuri de pagină de complexitate variabilă, inclusiv cele formate din trei coloane, cu dimensiuni flexibile sau fixe.
Aspect cu blocuri DIV De asemenea, prevede centrarea unui bloc div într-un anumit element al codului HTML. Pentru a centra un bloc în browserele Opera și Firefox, trebuie să utilizați proprietățile margin-left și margin-top cu valoarea auto , de exemplu


Conținutul blocului DIV


Dar un astfel de cod nu funcționează în browserul IE6 pentru acest browser, trebuie să plasați blocul DIV centrat într-un bloc DIV suplimentar, care va avea o proprietate de stil de aliniere a textului cu centrul de valori . De exemplu



Conținut bloc DIV


Adică, în browserul IE6, puteți controla poziția blocului DIV cu proprietatea text-align folosind valorile stânga, centru, dreapta. În browserele Opera și Firefox, nu puteți controla poziția unui DIV folosind proprietatea text-align, ci doar proprietatea margine.
În general, pentru a centra un bloc DIV, vom obține cod care va fi afișat identic în diferite browsere



Conținut bloc DIV


Aspectul cu blocuri DIV nu este completă fără controlul poziției elementelor HTML folosind proprietatea de stil de poziție, care definește schema de poziționare a blocului. Proprietatea poziție poate lua valori
  • static - specifică un bloc obișnuit care nu este poziționat individual, ci este poziționat într-un flux normal. Proprietățile de sus , stânga , jos și dreapta sunt ignorate. Este valoarea implicită;
  • relativă - stabilește poziționarea relativă a blocului. Este după cum urmează. În primul rând, poziția blocului este calculată ca în fluxul normal (adică poziționarea relativă nu este luată în considerare). Blocul este apoi decalat față de poziția sa normală în funcție de valorile proprietăților de sus, stânga, jos și dreapta. Conținutul ulterior este transmis în flux ca și cum blocul poziționat relativ nu ar fi fost deplasat;
  • absolute - specifică poziționarea absolută a blocului. Blocurile poziționate absolut sunt eliminate din fluxul general și nu afectează conținutul ulterior care este scos. Poziția unui bloc poziționat absolut este specificată de proprietățile sus , stânga , jos și dreapta relativ la elementul părinte (blocul);
  • fix - stabilește o poziționare fixă ​​a blocului. Cu poziționarea fixă, poziția blocului este calculată ca și în cazul poziționării absolute, dar în viitor blocul este fix în raport cu fereastra browserului și nu derulează împreună cu restul conținutului paginii. Această proprietate este acceptată de browserele Opera și Firefox.
Pentru a seta poziția blocurilor a căror proprietate de poziție este relativă, absolută sau fixă, utilizați proprietățile sus, stânga, jos și dreapta. Să-i cunoaștem.
  • top - setează decalarea marginii superioare a blocului poziționat în jos față de marginea superioară a elementului părinte;
  • stânga - setează offset-ul marginii stângi a blocului poziționat la dreapta față de marginea stângă a elementului părinte;
  • jos - setează decalarea în sus a marginii de jos a blocului poziționat în raport cu marginea de jos a elementului părinte;
  • dreapta - specifică decalajul marginii din dreapta a blocului poziționat la stânga față de marginea din dreapta a elementului părinte.
Valorile proprietăților enumerate mai sus pot fi setate în valori absolute (de exemplu, pixeli), în valori procentuale raportate la dimensiunea elementului părinte și pot lua și valoarea auto (aceasta este implicit valoare).
Cu poziționare absolută, relativă și fixă, blocurile se pot suprapune unele pe altele, caz în care poate apărea întrebarea, care dintre ele va fi „mai înalt”? Adică ce element va fi afișat și care va fi suprapus de blocul situat „sus”. Proprietatea z-index va ajuta la rezolvarea acestei probleme. Acesta definește poziția de nivel pe care o va ocupa blocul. Valoarea sa poate fi orice număr întreg pozitiv sau negativ. În acest caz, elementele cu o valoare mare a indicelui z se vor suprapune blocurilor cu o valoare mai mică a acestei proprietăți.
Pentru a ilustra proprietățile descrise mai sus, luați în considerare un exemplu. Să creăm mai multe blocuri fără proprietăți de poziționare.

1
text


2
text


3
conţinut


Pentru a ne familiariza cu poziționarea relativă, să adăugăm proprietăți de poziționare relativă unui bloc

1
text


2
text


3
conţinut


Pentru a vă familiariza cu poziționarea absolută, vedeți cum se afișează următorul cod în browser:

1
text


2
text


3
conţinut


În ultimul exemplu, astfel încât poziția unui bloc poziționat absolut să poată fi setată de proprietățile de sus și din stânga în raport cu locul în care ar fi situat în timpul poziționării normale, a fost adăugat un bloc poziționat relativ cu id="dopoln_block" la cod.
Pentru a încheia subiectul „Aspect cu blocuri DIV”, voi oferi un șablon care vă permite să obțineți o schemă de aspect foarte comună: în partea de sus a paginii este un antet, apoi trei coloane cu conținutul principal al paginii și la partea de jos a paginii un bloc care conține de obicei informații despre drepturile de autor. Mai mult, blocul de jos va fi în partea de jos a paginii chiar dacă există puțin conținut pe pagină. De asemenea, două dintre cele trei coloane (stânga și dreapta) cu conținutul principal vor avea dimensiuni fixe, iar cea din mijloc va fi „cauciuc”, adică se va schimba lățimea în funcție de rezoluția ecranului monitorului. Un exemplu poate fi văzut pe pagină.




Șablon de aspect de pagină cu 3 coloane







Coloana centrală


Coloana din stânga





Aspectarea cu blocuri DIV vă permite să dispuneți site-uri de complexitate diferită folosind proprietățile de mai sus ale foilor de stil în cascadă. Sper că acest articol vă va ajuta să înțelegeți aspectul și să creați multe site-uri web bune și frumoase. Noroc!

Aranjament în pagină este procesul de dezvoltare a structurii unui document HTML, al cărui rezultat este o pagină web. Structura unei pagini web este determinată de etichetele HTML corespunzătoare. Etichetele - blocuri de containere dreptunghiulare pentru conținut - nu apar în fereastra browserului. Ei spun browserului despre tipul de conținut, iar browserul, pe baza acestor informații, își afișează conținutul - fișiere text sau media.

Cum se creează o structură de pagină folosind blocuri (aspect bloc)

1. Cum să împărțiți aspectul paginii în secțiuni

Pentru a crea un aspect de pagină, trebuie să selectați secțiunile (secțiunile) principale ale documentului. Puteți citi mai multe despre elementele secționale în articol.

O pagină web standard conține următoarele secțiuni:


Orez. 1. Secțiunile principale ale paginii

Nu vom folosi elementul

, deoarece nu este acceptat de toate browserele.

Elemente

,
Și
- pe bază de bloc, astfel încât vor ocupa toată lățimea blocului - elementului lor container . O pagină cu acest aspect va arăta bine pe ecranele mici, dar pe dispozitivele de înaltă rezoluție textul de pe astfel de pagini va fi greu de citit. Prin urmare, trebuie să adăugați o etichetă de container pentru conținut - conținutul fiecărei secțiuni:


Orez. 2. Secțiunile principale ale paginii cu o etichetă de container

și setați pentru aceasta lățimea maximă, căptușeală internă, care va separa conținutul de marginile ecranului dispozitivelor cu rezoluție scăzută, precum și căptușeala externă, care vă permite să aliniați containerul în mijlocul blocului părinte:

Container ( lățime: 100%; lățime maximă: 1024px; /*lățimea maximă poate avea o valoare diferită*/ umplutură: 0 15px; margine: 0 automat; )

Astfel, am primit un cadru pentru pagina noastră (înălțimea secțiunilor în acest caz este virtuală, deoarece fără conținut secțiunile au înălțime zero).

2. Aspectul antetului site-ului și poziționarea elementelor acestuia

Să începem să marcam prima secțiune, așa-numitul antet al paginii web. Element

conceput pentru a grupa informații introductive și ajutoare de navigare pe o pagină/site. Să-l adăugăm în interiorul etichetei
logo-ul site-ului și link-uri de navigare:

SIGLĂ

Orez. 3. Antetul site-ului cu logo și linkuri adăugate

Logo ( float: stânga; ) nav ( float: dreapta; ) nav ul ( margine: 0; padding: 0; list-style: none; ) nav li ( display: inline-block; /*o modalitate de a plasa elemente într-un linie */)

Există mai multe moduri de a plasa elemente de bloc într-un rând. Toate sunt date în lecție.


Orez. 4. Efectul prăbușirii blocului containerului

Observați că după ce am aplicat învelișul, antetul a dispărut. Acest lucru s-a întâmplat deoarece elementele plutitoare (cele care au setată proprietatea float) sunt eliminate din fluxul normal și containerul părinte nu le mai vede înălțimea, astfel încât elementul

iar elementul din interiorul lui cu clasa.container s-a prăbușit. Pentru a remedia această situație, să folosim curățarea fluxului pentru un element cu clasa .container:

Container:după (conținut: „”; afișare: tabel; șterge: ambele; )

De asemenea, îi vom adăuga căptușeală verticală, separând elementele din interiorul acestuia de marginile antetului. Ca rezultat, stilurile vor arăta astfel:

Container ( lățime: 100%; lățime maximă: 1024 px; umplutură: 15 px; marjă: 0 automat; )
Orez. 5. Curățarea fluxului

Să luăm în considerare o situație în care o imagine servește drept logo. Poate fi adăugat direct în interiorul etichetei sau ca imagine de fundal. Imaginea va avea propria înălțime, care poate fi foarte diferită de înălțimea meniului de navigare, așa că ne vom confrunta cu problema alinierii verticale a elementelor antetului.


Orez. 6. Imagine logo

În exemplul nostru, înălțimea logo-ului este de 38 px, așa că pentru a alinia linkurile meniului la mijlocul antetului, trebuie să le setați la înălțimea corespunzătoare a liniei:

Nav a (decor text: niciunul; înălțimea liniei: 38px; ) Fig. 7. Alinierea linkurilor meniului antet

3. Creați o grilă pentru partea principală a paginii

Partea principală a paginii este cel mai adesea o grilă de blocuri de diferite lățimi. Poziționarea unor astfel de blocuri se face și folosind proprietatea float. Vom împacheta fiecare rând de blocuri cu un bloc suplimentar cu clasa .row:


Orez. 7. Grila părții principale a paginii.col-1-2 ( lățime: 50%; float: stânga; ) .col-1-3 ( lățime: 33.3333333333%; float: stânga; ) .col-1-4 ( lățime: 25 %; float: stânga; .col-2-3 ( lățime: 66,6666666667%; float: stânga; )

Pentru un element cu clasa .row aplicăm și curățarea fluxului:

Container:după, .row:după (conținut: „”; afișare: tabel; clar: ambele; )

Pentru a separa rândurile unul de celălalt, puteți adăuga o marjă de jos:

Rând (marja-jos: 15px; )

Înălțimea blocurilor de grilă este determinată de înălțimea conținutului lor, deci poate fi diferită:


Orez. 8. Înălțimi diferite ale elementelor de grilă

Înălțimea blocurilor poate fi fixată specificând-o în mod explicit, de exemplu, .row div (înălțime: 100px) . Dar, în acest caz, trebuie să vă asigurați că atunci când adăugați adaptabilitate la aspect, conținutul blocurilor nu se va extinde dincolo de marginea blocului.

Dacă trebuie să setați culoarea de fundal pentru blocurile unui rând, atunci acest lucru se poate face după cum urmează: pentru un element cu clasa .row, adăugați o nouă clasă care vă va permite să stilați numai acest rând (se pare că . row row-one), specificați pentru acesta culoarea de fundal a unui bloc mai mic în înălțime , iar pentru blocul înalt îi vom seta propria culoare, adică în acest fel vom realiza un fundal de fundal.

Lorem ipsum dolor sit amet.
Duis lobortis tempor torttor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem sempre at.
.row-one ( fundal: albastru deschis; ) .col-2-3 ( lățime: 66,6666666667%; plutire: stânga; fundal: scoici; )
Orez. 9. Mat de fundal

Dacă secțiunea principală a paginii conține doar două blocuri, atunci rândul suplimentar de wrapper nu trebuie adăugat:

4. Aspect subsolul paginii

Subsolul paginii, sau subsolul paginii, conține de obicei informații despre drepturile de autor, link-uri suplimentare etc. Toate aceste informații sunt plasate și în coloane, care pot avea lățimi identice sau diferite.

Buna seara prieteni! Cumva, în câteva lecții despre HTML, am vorbit și am folosit un astfel de concept precum aspectul div.

Probabil că aveți întrebări, mai ales dacă sunteți începători, ce este?

În articolul de astăzi, vă voi risipi toate îndoielile și vă voi răspunde la întrebări despre ce se află blocurile div

Să începem să studiem.

Blocuri div HTML și aspect

Pentru a nu vă îngrămădi și împrăștiați creierul, voi spune doar pe scurt că anterior toți designerii și dezvoltatorii web foloseau un aspect de tabel atunci când creau pagini și site-uri, în care fiecare celulă reprezenta un element specific. Arăta cam așa:

Așa a fost crearea site-ului web. Acesta este un exemplu foarte primitiv, dar vă puteți imagina clar cum au fost create site-urile web în acele vremuri îndepărtate. Tehnologiile de internet nu stau pe loc și la un moment dat a venit la noi conceptul de layout html div. Și apoi, după cum se spune, totul a început.

Importanța sa în dezvoltarea site-ului este cu adevărat mare. Acum crearea de site-uri web și gestionarea blocurilor html a devenit mai ușoară ca niciodată. Site-urile au început să devină frumoase și interesante. Acum întreaga lume își croiește drumul.

Așa putem descrie acum într-un mod simplificat modelul de utilizare a blocurilor div html.

Comoditatea constă în independența blocurilor unul față de celălalt, sunt ușor de gestionat individual, mutați-le după bunul plac, adăugați stiluri, puteți seta stiluri comune prin reguli CSS pentru mai multe grupuri Div. Sunt de acord că acest lucru este convenabil.

Exemple de utilizare a etichetelor div

Să ne uităm la câteva exemple practice despre cum puteți aplica etichete div pe o pagină html. Într-un exemplu simplu, vom crea 4 blocuri pe pagină. Voi folosi întotdeauna Notepad++ în acest exemplu și în exemplele viitoare.

Așa că lasă-mă să explic. Avem un design < ! DOCTYPE html > este potrivit pentru browserele moderne și acceptă markup HTML 5, despre asta vom vorbi în numerele viitoare.

Apoi, se deschide un container mare „părinte”. < html > . Este împerecheat și trebuie închis la sfârșit! Apoi vine deschiderea etichetei de serviciu < head > , care este, de asemenea, asociat și conține informații de serviciu despre codificare < meta charset > , cel mai important titlu de pagină SEO, descriere (nu am inclus-o aici, pentru că nu este nevoie, analizăm un aspect pur tehnic), stiluri CSS, fonturi (biblioteca Google Fonts), JavaScript sunt și ele incluse aici.

Urmează eticheta < body > . Va stoca deja toate marcajele blocurilor noastre și toate containerele cu etichete. Amintiți-vă doar ca pe un „butoi” uriaș.

Și, în sfârșit, iată că vin containerele noastre div.

< div class = "header" > < / div >

< div class = "sidebar" > < / div >

< div class = "content" > < / div >

< div class = "footer" > < / div >

Important! De asemenea, ele trebuie să fie închise împreună cu alte etichete.

După cum puteți vedea, fiecare bloc div are un atribut de clasă, după semnul egal le puteți seta independent și arbitrar. Aceste clase sunt create special pentru CSS. Adică browserul ajunge la pagină, vede blocul div și se uită la ce informații conține și merge la fișierul CSS și caută acolo clasa necesară.

Puteți seta nu numai atributul de clasă, dar puteți utiliza și id-ul (identificatorul). Puteți pune întrebarea: „Ce diferență are pentru mine pe care îl folosesc?” Îți voi răspunde, poți folosi orice metodă pentru aspect. Cu o singură diferență - prioritate id are mai multe privilegii decât clasă .

Voi explica acest lucru în fișa video de mai jos.

Fiecare are propriul stil de a crea site-uri web, prefer să folosesc clasa, deoarece această intrare în CSS este afișată cu un punct . selector

Da, apropo, vreau să spun că antetul, bara laterală, conținutul, subsolul sunt toate selectoare CSS și vor avea deja atribute.

Deci, continuăm să curățăm mizeria din capul utilizatorilor. Am creat blocuri div cu clasa, acum să trecem la CSS.

Să deschidem regulile CSS pentru pagina noastră în interiorul etichetei head, adică o vom formata. Hai să o facem așa:

Intrarea va fi după cum urmează (doar copiați și lipiți în exemplul dvs. și căutați în browser)

Exemplu de utilizare a etichetelor div

< ! DOCTYPE HTML >

< html >

< head >

< meta charset = "utf-8" >

< title >Exemplu de utilizare a etichetelor div< / title >

< / head >

De la autor: Vă urez bun venit pe paginile blogului webformyself. Aspectul bloc este cel mai popular mod de a crea un șablon de site web astăzi. Și se pare că așa va rămâne mult timp. În acest sens, să înțelegem cum se realizează aspectul blocului folosind proprietățile CSS.

Unde sunt create blocurile?

Mai întâi trebuie să înțelegeți că css nu creează blocuri, ci le proiectează. Ei înșiși sunt formați în HTML - limbaj de marcare hipertext. În mod implicit, înălțimea blocului va ocupa spațiu egal cu înălțimea conținutului său. În ceea ce privește lățimea, va ocupa tot spațiul disponibil care se află în părinte.

De exemplu: dacă lățimea containerului părinte este de 300 de pixeli și în el este creat un bloc, atunci acesta va ocupa și această lățime (doar dacă părintele nu are padding specificat). Toate celelalte elemente care vor fi create în container nu pot fi în conformitate cu primul bloc și vor fi mutate mai departe.

Un element de bloc gol obișnuit este scris folosind o etichetă asociată - div. De la sine nu face nimic. De exemplu, să ne amintim că multe etichete au un sens specific: un paragraf face parte dintr-un text, sunt necesare subtitluri pentru a îmbunătăți navigarea și percepția etc. Dar eticheta div este pur și simplu un container.

Model de bloc cunoscut

În comportamentul lor normal, blocurile multiple create se vor urma de sus în jos. Există o problemă serioasă imediat, nu-i așa? Dar cum să creezi o coloană laterală, așa cum, până la urmă, site-urile care au 3-5 anunțuri de știri într-o singură linie și chiar și cu imagini? Aici ne vine în ajutor css, cu care poți aranja elemente de pe pagină în absolut orice mod.

Blocați aspectul site-ului folosind CSS: proprietăți de bază

După cum am văzut mai sus, blocurile sunt foarte încăpățânate în mod implicit. Nu permit altora să se apropie de ei și ocupă întreaga lățime. Desigur, acest lucru trebuie corectat uneori, deoarece structura multor site-uri o cere.

Să ne uităm mai întâi la dimensiuni. În CSS, dimensiunile elementelor pot fi scrise folosind proprietățile de lățime și înălțime. Adesea, valorile sunt specificate în pixeli, deși uneori în procente sau alte unități relative.

Să ne imaginăm că există un container părinte mare și că există un fel de element de bloc în el. Pentru a defini proprietăți pentru el printr-o foaie de stil, trebuie să o accesați cumva. Daca scriem asa:

div(lățime: 250px; )

div(

latime: 250px;

Atunci absolut toate blocurile vor obține o astfel de lățime încât, evident, nu avem nevoie de ea. Aceasta înseamnă că trebuie să adăugați o clasă de stil sau un identificator la bloc. Ele sunt adăugate folosind atributele class și id, iar valoarea este un nume arbitrar, dar trebuie să înceapă cu o literă engleză. Numerele, cratimele și caracterele de subliniere sunt, de asemenea, permise. De obicei, cele mai importante elemente dintr-o pagină primesc un identificator (antet, conținut, subsol), iar cele mai puțin importante (articole de meniu, titluri etc.) primesc clase de stil.

Aș spune chiar că nu este o chestiune de importanță, ci dacă este un element unic. Este clar că în principiu nu pot exista două antete pe un site (mă refer la antetul principal din partea de sus a site-ului), dar pot exista câte articole de meniu doriți.

Cel mai important lucru de reținut este că identificatorul este atribuit unui element, o dată, și nu poate fi scris din nou pentru niciun alt element. Aceasta este o marcă unică. O clasă de stil poate fi scrisă în cel puțin o sută de elemente și unui bloc i se poate da câte clase se dorește, separate printr-un spațiu. Ca aceasta:

Bloc cu trei clase
;

Și ce crezi că se va întâmpla cu asta acum când notăm astfel de proprietăți?

Lățime ( lățime: 250 px; ) . înălțime ( înălțime: 250 px; ) . chenar ( chenar: 10 px verde continuu; )

lățime (

latime: 250px;

Înălțime (

înălțime: 250px;

Frontieră(

chenar: 10px verde continuu;

Toate aceste reguli vor fi aplicate blocului și acum orice element ai da, de exemplu, chenarul clasei, acesta va primi un chenar verde gros de 10 pixeli.

Mai multe blocuri pe o linie

În continuare, voi vorbi pe scurt despre două proprietăți importante care vor permite aranjarea blocurilor într-o singură linie. Doar un exemplu: există un container cu o lățime de 1000 de pixeli. Sarcina ta este să înghesui 3 blocuri de 300 de pixeli lățime astfel încât să fie situate pe aceeași linie orizontală. Cum să o facă? Există două moduri.

În primul rând, fiecare bloc trebuie să primească o clasă. În general, unii dezvoltatori adaugă clase generale pentru a bloca elemente:

< div class = "block1 inline" > < / div >

< div class = "block2 inline" > < / div >

< div class = "block3 inline" > < / div >

În acest fel, fiecare element poate fi stilat diferit, dar toți pot primi aceleași instrucțiuni deoarece toate conțin clasa inline. Și în ea putem scrie așa:

Inline (afisare: inline-block; )

În linie (

afisare: inline - bloc;

Sau cam asa:

În linie (float: stânga; )

În linie (

plutește la stânga;

Prima proprietate convertește elemente în elemente de bloc inline. Nu-și pierd proprietățile, dar pot fi aranjate în linie dacă au suficientă lățime în părinte.

A doua proprietate împinge fiecare element la marginea stângă a containerului părinte. Dar, deoarece al doilea și al treilea element nu pot apăsa chiar pe margine, ele vor sta în spatele primului și vor forma, de asemenea, o linie.

Dimensiuni relative

Cum se face aspectul bloc al unui site web de cauciuc în CSS? Acest șablon are un mare avantaj față de unul fix, deoarece se poate modifica în funcție de lățimea ferestrei. Se realizează în principal conform acestui principiu: elementul container general primește o lățime fixă, iar părțile structurale sunt plasate în el, a căror dimensiune este scrisă ca procent.

  • Serghei Savenkov

    un fel de recenzie „scurtă”... de parcă s-ar grăbi undeva