Demo pe ecran complet cu rezultatul final.
Structura paginii de bază
Să începem cu crearea unei pagini standard. Să creăm ceva de genul:
Structura standard a paginii. În cazul porturilor mici de vizualizare, totul se mută într-o coloană, iar la margine este afișat lateral. Pentru claritate, eticheta nav este albastră. Marcaj:
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Să adăugăm stiluri și reguli vizuale la grilă.
Creați o rețea
În primul rând, înfășurați toate elementele structurale din container - acesta va fi un container Grid. O să iau
. Acum adăugați câteva stiluri de bază pentru grilă:In cele de mai sus, declarăm că containerul trebuie să fie afișaj: grilă, au o coloană (opțional acum se adaugă, dar este complet acum prescrie). Delimitatori între celulele grilei trebuie 10px.
Pentru a face lucrurile să pară mai clare, vom adăuga câteva stiluri vizuale:
Faceți pagina adaptabilă
Adăugați o interogare media astfel încât atunci când fereastra de vizualizare ajunge la o anumită dimensiune, aspectul se modifică (ia 600px).
Acum, pe ecrane mari, grila se modifică la id-template-columns: repeat (4, 1fr), care ne dă patru coloane de aceeași lățime. Apoi, trebuie să specificați lățimea tuturor elementelor structurale. Etichetele antetului, nav și subsol vor ocupa toate cele 4 coloane, iar secțiunea doar trei. Coloana rămasă va fi plasată automat.
În cele din urmă, stilurile pentru comutarea vizualizării meniului:
Ce avem:
Creați un meniu drop-down
Un exemplu perfect de modul în care poziționarea CSS poate funcționa cu elementele structurale, chiar și în cadrul rețelei declarate. Vom lua meniul nostru, îl vom îndepărta din fluxul de documente și îl vom poziționa în afara ecranului. Restul elementelor de rețea vor fi în locurile lor.
Să mai scriem o cerere media. Avem o cerere min-lățime, acum trebuie să scriem stiluri pentru max-lățime. Imediat ce fereastra de vizualizare atinge valoarea magică de 600 pixeli, este necesar ca meniul să fie ascuns de ecran:
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Am setat meniul la o lățime fixă și l-am așezat pe stânga, astfel încât să dispară complet.
Am folosit poziția fixă, dar puteți lua și absolută. Totul depinde de faptul dacă doriți ca meniul să deruleze cu pagina sau nu.
În codul, veți observa proprietatea de tranziție, va funcționa, atunci când vom adăuga comutatorul. Vom arăta în mod continuu bara de meniu folosind transforma. Vă mulțumim Rachel Nabors și Joe Zimmerman pentru mine, care transforma mult mai bine în termeni de performanță pentru animație decât poziția amintind!
comutator
Ne-am ascuns meniul, acum trebuie să creați un comutator pentru a-l primi înapoi când este necesar. Adăugați un link la apelul din meniu și închideți-l.
Adăugați în antet:
Notă: identificatorul de fragment utilizat în acest fel face ca fiecare clic pe link să fie salvat în istoricul browserului. Este posibil ca utilizatorii dvs. să nu vă placă! Mulțumită lui Joe Zimmerman, care a subliniat acest lucru.
Adăugați codul de mai jos la interogarea cu lățime maximă:
Și asta e tot! Comutatorul este gata.
Ce avem:
concluzie
Am terminat! Am redus stilurile la un nivel minim, astfel incat sa nu interfereze cu noi. Dar nu fi timid, creați propriul design. Poate că vă place JS în loc de: țintă, atunci aveți tot ce aveți nevoie. Sper că v-ați bucurat de această mică lecție despre Grid. Urmați lecțiile noi!
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Bootstrap framework - o facem adaptabil, pur și simplu, repede!
Articole similare
Trimiteți-le prietenilor: