Blocuri din css sau un site fără tabele
Blocuri în CSS sau Website-ul fără tabele:
Ne-am obisnuit cu crearea unui site web, vom folosi masa. Toate celelalte metode par să ne incomode, neregulate, etc. Astăzi vă voi arăta cum să faci o cu drepturi depline pagină web, fără a utiliza tabele.
Conceptul de bază în acest saitostroitel'stva va fi conceptul unui bloc în CSS. Pentru a înțelege ce este necesar să se facă referire la modelul de formatare vizuala. Aici este linia de W3C manualul oficial.
„Conform modelului de formatare vizuala, fiecare element al arborelui documentului generează un număr arbitrar (eventual zero) a blocurilor, în conformitate cu o reprezentare model al unui document sub formă de blocuri.“
Poate că acum sună un pic confuz, dar la sfârșitul articolului vei înțelege cu totul.
Ca unitate, prezentăm elementul
în care identificatorul block_1 cuprinde toate caracteristicile blocului.
Principalele proprietăți ale blocului - este, desigur, lungimea și înălțimea (lățime și înălțime), care poate fi specificată în pixeli sau ca procent.
Apoi, trebuie să decidă cu privire la schema bloc de poziționare. Trei dintre ele: fluxul normal, muta obiecte sau de poziționare absolută. Descrierea primele două pot vedea în manualul oficial al CSS, toate acestea ne acum la nimic. Pentru a crea o pagină web cel mai bine este de a folosi de poziționare absolută - astfel încât blocurile noastre oriunde „nu va părăsi“ pentru orice rezoluție a ecranului. Pentru a stabili o astfel de poziționare este necesară pentru a folosi proprietatea poziție, cu proprietatea absolută specificată. Este de asemenea necesar să se stabilească deplasarea blocului prin proprietăți de sus, stânga, dreapta și jos. Decalajul poate fi setat atât ca pixeli sau ca procent.
Pentru a înțelege modul în care deplasarea, imaginați-vă că vom crea document HTML după cum urmează:
Dacă creați un document, se află în colțul din stânga sus va vedea o casetă gri cu inscripția „Aceasta este unitatea noastră.“
Acum, cum să-l aplice la crearea interfeței site-ului. Pentru aceasta avem nevoie de doar 4 blocuri: primul ar fi logo-ul, iar al doilea - meniul din stânga, iar al treilea - meniul din dreapta, iar al patrulea - unitatea centrală. Folosind proprietățile exemplul anterior, pentru a crea o astfel de pagină nu este dificil. Iată un exemplu: