Sunt angajat în Occident de site-uri pentru o lungă perioadă de timp (desigur, acesta este modul de a arăta), cronici vor spune cel mai probabil că 5 ani nu este un termen. Nu vreau să le contest deloc și vestea bună este că tot ceea ce au făcut în urmă cu 5 ani în tabele nu a fost încă inversat. Tabele - pentru date tabulare, divas - pentru oricine altcineva! Așa că m-am hotărât acum 4 ani și de atunci am puțină cunoștință pentru a face site-uri fără hack-uri.
IE6 este cel mai important validator al aspectului dvs., este foarte sensibil chiar și la cele mai mici inexactități în stiluri, fără a vorbi deja despre etichetele neînchise, pe care toate browserele moderne sunt pur și simplu ignorate. Dacă site-ul dvs. este bine afișat și nu intră în IE-6, atunci în alte browsere acesta va fi afișat fără probleme.
Ei bine, atunci sunt puțin deranjat de subiectul de astăzi (vă rog să mă scuzați pentru o introducere atât de lungă), este timpul să-mi împărțesc toate cărțile de atu și să vă învăț cum să tastați fără a utiliza hack-uri.
Regulile de bază pentru realizarea canapelelor
Spre deosebire de masă - un aspect învechit, divuri aspect (atunci când tabela este utilizat numai pentru scopul propus: pentru a afișa date de tip text tabelare, mai degrabă decât ca un cadru pentru paginile web) coder oferă mult mai multe posibilități. În special se referă la ordinea descărcării conținutului.
Crearea unui element flotant (float: left sau float: dreapta) nu l numiți în calitate de marginalizare și Budinca (marja, padding), în special din partea opusă a fluxului în jurul valorii de, sau probleme cu compatibilitate cross-browser și cu un display simplu va tine in buzunar.
Iată un exemplu de aspect greșit:
De obicei, aceasta se datorează faptului că designerii web novice încearcă să creeze aspectul principal al site-ului (blocul de mijloc am ratat, pentru a face mai ușor de înțeles). Aici există o grămadă de erori: în diferite browsere și marginalizării elemente flotante Budinca sau adăugate sau scăzute unul de altul, astfel încât inițial folosind această opțiune, trebuie să adăugați pozhzhe într-un întreg buchet de diferite stiluri de CSS hacks (pentru fiecare browser în parte).
Dar aspectul corect:
# GOOD-example // lățimea poate fi orice număr în pixeli, procente sau puncte (pt)
.Left_float
.Right_float // în loc de margini în aceste elemente plutitoare, puteți atribui paddings pe același model.
Cel mai important lucru: nu combinati aceste proprietati in elemente flotante in acelasi timp. NU atribuiți NICIODATĂ căptușeală sau margini în direcția în care elementul plutește!
Crearea plutitoare (pluteau) elemente HTML numai în unități fixe (este lipsit de importanță în ceea ce: pixeli sau procente) lățime, adăugând apoi proprietatea blocului părinte: ascuns-overflow vă curăța automat fluxul și pentru a evita crearea suplimentară de curățare, (de obicei div suplimentare, sau chiar eticheta de rupere a liniei cu clasa clearfix) a elementelor.
Dar unul dintre exemplele unui cadru destul de complex al întregului șablon de site, pe care de multe ori îl aplic.
#Wrapper // În continuare va exista un element plutitor, așa că curățăm fluxul în prealabil. Și sunt mai înclinat să creez zăbrele de la margini: lățime: 98%; marja: 0 auto;
# Exemplul meu
#MAIN // lățimea acestui bloc nu este setată, desigur dacă aveți un model de cauciuc, dar dacă lățimea este fixă, atunci este mai bine să o desemnați.
.Left_float_sidebar
.Left_float_sidebar2.
Și asta e tot codul! Și deja în interiorul acestor blocuri, atribuiți oricăror elemente elementelor dvs. orizontale și margini. În orice caz, site-ul nu se răspândește. Desigur, dacă aveți totul în ordine cu matematica și vă puteți împărți, multiplica, scădea și adăuga fără erori grosiere. În acest caz, sfatul meu cu privire la paradoxul de a vă face cel mai mare regret nu-mi ajută.
Vezi deasemenea: site-uri de design html css layout
Trimiteți-le prietenilor: