Informatică Dezvoltare web
Exercitii CSS pozitionare elemente
Exercițiile CSS pentru poziționarea elementelor învață cum să plasezi și să controlezi elementele pe o pagină web. Acestea includ utilizarea proprietăților precum position, display și float. Prin practică, poți crea layout-uri complexe și responsive.
Exerciții cu proprietatea position
- 1 Creează un div cu position: relative; Adaugă un div în HTML și setează-i CSS: position: relative; top: 20px; left: 30px; pentru a-l muta relativ de la poziția inițială.
- 2 Folosește position: absolute; Plasează un element în interiorul unui părinte cu position: relative; și setează-i position: absolute; top: 0; right: 0; pentru a-l poziționa în colțul din dreapta-sus.
- 3 Experimentează cu position: fixed; Creează un buton care rămâne vizibil în partea de jos a ferestrei, indiferent de scroll, folosind position: fixed; bottom: 10px; right: 10px;
Exerciții cu display și float
- 1 Aliniază elemente cu display: inline-block; Transformă mai multe div-uri în inline-block pentru a le aranja pe orizontală, setând display: inline-block; width: 100px;
- 2 Folosește float pentru layout Creează două div-uri și setează-le float: left; și float: right; pentru a le poziționa pe laturile opuse ale containerului.
- 3 Curăță float cu clear Adaugă un element după cele flotante și setează-i clear: both; pentru a preveni suprapunerea cu alte elemente.
Rezolvă aceste exerciții într-un fișier HTML și CSS separat pentru a înțelege cum funcționează fiecare proprietate.