Care este aspectul utilizat pentru catalogul de produse
În acest articol ne vom concentra pe site-urile cu aspect de cauciuc sau de adaptare. astfel încât cerințele de directorul de bunuri vor fi oferite corespunzător.
Dacă am folosit șablonul cu un aspect fix. și ar fi nici o problema cu catalog nu a fost. Pre-cunoscut lățime aspect ne permite tuturor să calculeze cu exactitate și indică dimensiunile specifice pentru directorul grupuri de mărfuri, astfel încât această metodă nu vor fi luate în considerare și analiza metode mai complexe și mai sofisticate de HTML marcare în combinație cu CSS.
Un număr fix de elemente pe fiecare rând
Deci, avem tendința la faptul că, în zilele noastre pe site-ul dvs. poate merge utilizatorii care monitorizează rezoluția este încă destul de modestă - 1024x768, dar, de asemenea, o bună șansă ca site-ul va scadea de vizitatori, a cărui autorizație are de 2 ori mai mult și mai departe vom merge mai departe, cele mai multe astfel de cazuri sunt în practică.
Catalog de produse care conțin 3 elemente pe fiecare linie va arata bine pe monitoare mai mici, dar în cazul în care lățimea ecranului pentru a întinde de două ori, aceste 3 elemente pierdut doar pe un fond alb și va arata prea rarefiat. Dar noi încă considerăm pentru a începe acest tip de aspect, de când am început să vorbesc despre asta.
Condamnarea la catalogul de produse cu ajutorul tabelului
În cazul în care directorul de aspect tabular este foarte simplu - în primul rând avem nevoie pentru a determina cât de multe elemente vor fi amplasate pe fiecare rând. Să presupunem că de data aceasta ei vor fi 3. Cel mai important lucru în acest caz - nu uitați să setați lățimea de masă până la 100%, adică să implicit, acest element nu se comportă ca un bloc, și așa cum a construit ...
Este demn de remarcat faptul că coloanele de pagini aliniate în lățime între ele în mod automat. În cazul în care, în orice coloană va avea mai multe informații, va deveni mai larg pe alții, dar în cazul nostru, toate coloanele vor fi poze cu aceeași lățime, așa că nici măcar nu va trebui să specificați o lățime de 33% pentru fiecare coloană.
Mai mult decât atât, nu uitați să specificați alinierea la centru, în interiorul coloanei. Pe acest fapt și toate. director aspect tabular este cel mai simplu și fiabil, dar o astfel de metodă nu permite să se adapteze numărul de elemente pe linie, în funcție de dimensiunea ecranului utilizatorului. Prin urmare, să trecem mai departe. Pentru a rezuma, vom enumera punctele cheie:
- Lățimea mesei trebuie să fie de 100%;
- alinierea coloanelor trebuie efectuate pe centrul orizontală și marginea superioară a verticală.
Utilizarea bullet și afișare de proprietate: inline-bloc pentru aspectul catalogului de produse
În general, nici un pește, nici carne, dar noi facem este doar și necesară în acest caz. Deci nu te duci! Creați o listă cu marcatori și o simplă mișcare a mâinii transforma într-un catalog. Punctul-cheie în acest proces este de a seta afișajul de stil: inline-bloc, în caz contrar nu se întâmplă nimic. Este cu siguranță posibil să se stabilească și display: inline, dar atunci va fi imposibil să se stabilească stiluri caracteristice ale elementelor la nivel de bloc, care avem nevoie de siguranta in directorul de aspect.
În acest proces, există câteva puncte-cheie:
- trebuie să resetați padding externă și internă pentru glonțul folosind marja de proprietăți și padding;
- dezactiva lista de markeri folosind proprietatea lista de stil;
- elemente li face jumătate bloc jumătate și montat de afișare de proprietate;
- aranja toate intrările directorului pe o singură linie fără transport în silabe (foarte important);
- specificați lățimea pentru articolele din catalog;
- să stabilească o lățime minimă pentru elemente, egal cu lățimea imaginilor atașate;
Și asta o listă solidă de nuanțe se termină în cele din urmă. Deci, să clarifice unele detalii.
Despre padding zero, interne și externe este clar, și anume. A. Bulleted listează implicit vin cu indentat de la marginea din stânga, și suntem în structura catalogului nu este necesar.
Marcatorii nu au nevoie de noi, de asemenea, astfel încât să le dezactivați folosind proprietățile lista de stil. dându-i nici unul.
În ceea ce privește display: inline-bloc, am discutat un pic mai mare, așa că nu se va repeta.
Toate elementele listei trebuie să fie pe aceeași linie, în caz contrar nu va funcționa. Faptul că am terminat elementul de jumătate de bloc și jumătate construit, așa că, dacă fiecare element din structura directorul va fi plasat pe o linie nouă, browser-ul va adăuga automat decalajul invizibil în capătul liniei, ceea ce duce la faptul că al treilea element din șirul încetează să se potrivească de lângă primele două, și va fi transferat. Puteți vedea pentru tine, experimentarea cu căruciorul de transfer pentru elemente încorporate.
Lățimea elementelor se indică în procente. În cazul a trei elemente în fiecare rând specificați directorul de 33% în cazul de 4 - 25%, și așa mai departe.
Lățimea minimă de elemente catalog, trebuie să ne asigurăm că acestea nu sunt comprimate prea mult atunci când se utilizează un nivel scăzut monitoare de rezoluție sau dispozitive mobile.
Utilizarea flotoare pentru directorul de aspect
În exemplul anterior, am făcut o mare și universale rezultate folosind glonțul, dar noi nu dorim să ne oprim acolo și a decis să facă același lucru, doar un mod ușor diferit. Este vorba despre cutii care sunt create prin utilizarea proprietățile float plutitoare (din float engleza -. Float, float). Marcarea un director nu va fi puțin diferită de versiunea anterioară, ci ca stiluri. Principala diferență - un principiu care stă la baza acestei metode.
Deci, să ia în considerare măsurile care trebuie luate:
- trebuie să resetați padding externă și internă pentru glonțul folosind marja de proprietăți și padding;
- dezactiva lista de markeri folosind proprietatea lista de stil;
- specificați lățimea elementelor catalog;
- să stabilească o lățime minimă pentru elemente, egal cu lățimea imaginilor atașate;
- elemente plutitoare face li utilizând proprietățile float;
- anula învelitoarea la sfârșitul listei de proprietate clară.
În această metodă, există capcane - dacă nu opriți învelitoarea la sfârșitul listei, urmând articolele din catalog sunt suprapuse pe ea într-un plan vertical, ca și în cazul în care înălțimea director este zero și nu există în DOM-e. Pentru a evita acest lucru, vom avansa pentru a crea o .clear clasă specială, care se curata înfășurați pe ambele parti de proprietate clar: ambele.
modalitate flexibilă de aspect catalogul de produse
Și acum, ca un bonus, vom lua în considerare modul cel mai versatil pentru layout directorul, care este potrivit pentru ambele dispozitive mobile și un monitor cu rezoluție foarte mare - 26 sau mai multe inci. Ca bază luăm modul în care ne place cel mai mult - o listă cu marcatori în combinație cu display: inline-bloc, dar puteți utiliza blocuri plutitoare. Totul depinde de metoda pe care o preferați.
Deci, acum avem de a impune un director în care numărul de produse pe linie, teoretic, poate varia de la 1 la infinit. În acest caz, nu va fi uitat nici un dispozitiv și nici un ecran, indiferent de rezoluția el poate poseda.
În acest exemplu, ar trebui să acorde o atenție la un detaliu important - dacă setați dimensiunea de Li ca procent, este într-o contracție puternică a intrărilor din directorul de ecran va deveni prea mic, care, în acest caz, este inacceptabilă. Prin urmare, vom specifica lățimea în pixeli, dar au capacitatea de a schimba în funcție de fereastra browser-ului curent cu ajutorul java script. De asemenea, nu uitați să setați lățimea minimă pentru elementele de director pentru a evita comprimarea excesivă a acestora.
Caracteristica principală a acestei metode este dimensiunea instabilă a intrărilor de director, care vor fi calculate ca procent din dimensiunea ecranului curent. Suntem în primul rând interesat în lățime, desigur. În scenariul nostru, am luat 10% din lățimea ferestrei browser-ului, a găsi o dimensiune cea mai potrivită și estetic plăcut. Cu cât ecranul devine, elementele catalogul va mai mare.
Deci, suntem principalele metode de director layout-ul, care pot fi aplicate cu succes în practică. Cel mai simplu mod de a dovedit de masă, dar a suferit universalitatea și validitatea layout.
Metoda noastră cea mai preferată este de la aspectul folosind liste cu marcatori, din care elemente sunt atribuite proprietățile elementelor pe jumătate construite și jumătate de bloc. Codul în acest caz arată compact, iar punerea în aplicare este destul de simplu.
Deci, știi cât de ușor într-adevăr este posibil să se impună o diferite rezoluții de ecran, folosind numărul minim de stiluri și un aspect simplu.