Continuăm seria de postări pe tema aspectului adaptiv al site-ului și astăzi va fi o rețea flexibilă pentru aspectul paginilor dvs. Conceptul de grilă în designul web a venit la noi de la tipografia, acolo a fost la început că a fost regula de a construi totul pe coloane și marginile clare ale blocurilor vizibile și nevăzute.
Este un clasic al construcției moderne de design adaptiv, și nu numai modern. Orice designer care a desenat de mult site-uri web știe de la un astfel de concept ca un aspect de rețea pe baza căruia se construiește un aspect frumos cu proporții. Numărul de coloane din rețea poate fi diferit, în majoritatea cazurilor este de 12 sau 16, dar există 15 și o altă cantitate. Totul depinde de designer care a atras aspectul.
Este important să înțelegeți că dimensiunile rețelei se modifică și sunt rearanjate în funcție de dimensiunea ecranului. Adică, în cazul unor mici modificări, lățimea se micșorează, este ca de la un monitor de birou la dimensiunea unui laptop, iar deja când se trece la ecranele mobile, este redistribuită radical.
Grid System - baza
Se ia ca bază sistemul de 12 coloane, dacă luăm în considerare că lățimea maximă de 100% a paginii, apoi a afla lățimea coloanei este foarte ușor de 100/12 = 8.333333333333333% aceasta este lățimea o coloană ca procent. În timpul aspectului vom avea nevoie de toate cele 12 coloane și, prin urmare, toate dimensiunile lor în procente. Pentru aceasta vom crea 12 coloane în stilurile noastre, atribuindu-le fiecărei lățimi, dar înainte de aceasta, să ne gândim la structura paginii în sine.
Noi deja cu toții că orice elemente de pagină trebuie să fie plasate în unitatea principală, care poate fi desemnat un înveliș sau un conținut de clasă sau ID-ul, și să-l creeze în html nostru și stiluri prescrie clase pentru 12 coloane din grila. Ca rezultat, veți obține acest html:
În care suntem cu toții familiarizați și este genul de cod în stiluri despre care vom vorbi în detaliu:
Dacă totul este clar cu HTML, atunci CSS creează o mulțime de întrebări și presupuneri. Cred că un astfel de conteiner și ce proprietăți nu ar trebui explicate, dar vom vorbi despre .container. Cols. În această regulă, sunt scrise proprietăți care vor fi aplicate absolut tuturor coloanelor rețelei noastre și ne amintim că vor exista 12 dintre ele. De asemenea, pentru claritate, am întrebat von fiecare coloană și liniuță, precum și a alinierii textului în centru, și, desigur, ei trebuie să urmeze reciproc, astfel încât face toate plutească.
Și aici, mai jos este cel mai interesant, am creat 12 clase pentru viitorul aspect coloane și a indicat fiecare dintre ele dimensiunea ca procent, a fost a calculat foarte simplu, primul 8.333333333333333, 8.333333333333333 secunde + = 8.333333333333333 16.66666666666667, etc. . Ca rezultat, avem 12 coloane cu dimensiunile lor.
Ei bine, odată ce avem mai mult de 12 coloane de timp pentru a încerca să impună ceva, vom merge la html noastră și vom face în sus inut aproximativ kartinuzdes trei canapele, care au coloane corespunzătoare clasei 4, timp de 3 * 4 = 12, și asta cum arată în HTML nostru
Asta înseamnă că au înregistrat trei divas în care au plasat colții principali de clasă și unul suplimentar pentru aceste blocuri col-4. care este responsabil pentru lățimea a 4 coloane. După salvarea și navigarea la fereastra browserului, vom vedea un lucru nu foarte plăcut, și anume: De ce sa întâmplat acest lucru, deoarece .col-4. că în multiplicare cu trei dă 100%, iar punctul aici este doar în indentările noastre, pe care le-am adăugat pentru toate coloanele noastre, dar și principiul construirii modelului cutiei clasice influențează aici. în care la dimensiunile blocului se adaugă o altă marjă de marjă padding, este o veste atât de neplăcută.
Din fericire, există o economie de proprietate CSS3 box-dimensionare, care elimină asta e problema, citiți despre proprietate și valoarea sa poate fi vazut pe un htmlbook site-ul remarcabil, și ne-am aplica această proprietate este absolut toate elementele site-ului nostru. Aceasta este, la începutul stilurilor noastre, unde se află steaua, adăugăm această proprietate
După cum puteți vedea, l-am înregistrat pentru motorul webkit și pentru creier, deci pentru securitate, același lucru se poate citi mai multe despre aceste programe de completare pe Internet. Și acum sistemul nostru bloc nu merge nicăieri și totul este într-o singură linie, e minunat, nu-i așa?
Din moment ce totul merge atât de ușor, încercăm să facem al doilea rând și aici nu folosim 3 blocuri, ci să folosim 4 blocuri.
Dar acest lucru nu este suficient, trebuie să prescrieți stilurile care vor face purificarea fluxului, așa-numita clarfixă. mai multe detalii despre care puteți citi aici. Voi adăuga-o la stilurile noastre și veți obține acest cod fără alte explicații:
Acum, după salvare, totul funcționează perfect pentru noi.
Metoda Deci, astăzi suntem demontate de a construi o grilă de adaptare flexibilă, să vă spun sincer că faci singur nu are nici un sens, pentru că o mulțime acolo cadru css, care, practic, au deja grila, dar teoria este teoria și în practică, pentru a înțelege că este întotdeauna un plus .
Ei bine, pentru a consolida cunoștințele propun să impună câteva mai multe linii cu blocuri folosind diferite variante, de la 1 la 12 în construcția liniei, în cazul în care cineva a fost dificil să înțeleagă procesul de cod construire a da un link la codul sursă al unui gata html css a codului. Pe toate acestea, o dispoziție bună și succesul în studierea aspectului.
Articole similare
-
Dispatcher microsoft manager de sistem centru de servicii - partea 4 prima utilizare a produsului
-
Fluid pentru păr colorat wella sistem profesionist de finisare a culorii 125 ml
Trimiteți-le prietenilor: