În această lecție, voi atinge pe scurt lucruri precum blocuri plutitoare. În general. Cu ajutorul blocurilor plutitoare, puteți crea diferite efecte și chiar designul paginilor, așa-numitele. bloc de design. Cele mai multe site-uri moderne sunt construite pe bază de bloc. Prin urmare, mi se pare. că este foarte important să înțelegeți cum funcționează acest lucru!
Deci, blocurile plutitoare în CSS sunt definite de proprietatea float.
Această proprietate determină dacă blocul plutește și în ce mod se va mișca. Proprietatea poate lua următoarele valori.
- stânga - blocul se mișcă spre stânga. Restul conținutului documentului va fi afișat de-a lungul părții drepte a blocului, pornind de la partea superioară.
- dreapta - blocul se mișcă spre dreapta. Restul conținutului documentului este afișat de-a lungul părții din stânga a blocului, pornind de la partea superioară.
- nici una - blocul nu se mișcă (valoarea implicită).
Ei bine, de exemplu, după cum va fi localizat în mod implicit, trei blocuri pătrate, cu o latură de 200 de pixeli.
Dupa cum puteti vedea, fiecare bloc urmator este in mod implicit sub cel anterior.
Folosind proprietatea float, puteți face fiecare bloc să plutească spre stânga, adică acesta va arata astfel:
Așa va arăta dacă blocurile vor apărea spre dreapta:
Un exemplu clasic de aplicare este când trebuie să faceți ca textul să apară în coloane. Lăsați coloana să fie trei.
În codul HTML, încheiem pur și simplu textul necesar în coloanele corespunzătoare, cu etichetele DIV
Există un adevăr universal în crearea site-ului web: Pentru a face un site web.
Dacă sunteți ca marea majoritate a oamenilor care se gândesc.
Există un adevăr universal pe site.
Vorbind despre blocurile plutitoare, este necesar să menționăm și proprietatea proprietății specifice CLEAR, care permite să poziționați blocurile plutitoare într-un anumit mod.
- stânga - blocul trebuie plasat sub toate blocurile plutitoare pe partea stângă.
- dreapta - blocul trebuie plasat sub toate blocurile plutitoare din partea dreaptă.
- atât - blocul trebuie plasat sub toate blocurile plutitoare.
- niciunul - nu sunt plasate restricții asupra poziției blocului în raport cu obiectele mutate.
Să presupunem că există două blocuri plutitoare în stânga (float: left;) care se înfășoară în jurul textului.
Dacă închideți tot textul în bloc și dați-i proprietatea CLEAR: atât. astfel încât acesta să fie plasat sub toate blocurile plutitoare, puteți scăpa de împachetarea textului în jurul blocurilor.
Există un adevăr universal pe site.
Rețineți că blocurile pot conține orice (imagini, liste, text, etc.).
Iată un exemplu, când un bloc este plasat sub altul și ambele blocuri sunt înfășurate în text.
Există un adevăr universal pe site.
În general, pot exista multe aplicații. Experimentați, dacă doriți.
Dacă doriți să vedeți cum să utilizați blocuri plutitoare pentru a crea un schelet al site-ului, faceți clic aici.
↑ Sus ↑
Articole similare
Trimiteți-le prietenilor: