Blog web design stúdió «hogy egy oldal»
Mi az elrendezés a termékhez használt katalógus
Ebben a cikkben fogunk összpontosítani oldalakon gumival vagy adaptív elrendezése. így a követelmények a könyvtár áru lesz kapható megfelelő.
Ha használt sablon fix elrendezés. és ez nem lenne probléma a katalógusban nem volt. Előre ismert elrendezés szélessége lehetővé teszi számunkra, hogy mindenki pontosan kiszámítani, és azt mutatják, a konkrét méreteket az árucsoportok könyvtárban, így ezzel a módszerrel nem lehet figyelembe venni, és elemezni bonyolultabb és kifinomultabb módszerekkel HTML-jelölés kombinálva CSS.
A rögzített elemek száma minden sorban
Tehát, hajlamosak vagyunk arra, hogy a mi mindennapi webhely mehet a felhasználókat, akik nyomon felbontás is elég szerény - 1024x768, hanem egy jó esély arra, hogy a helyszínen csökken a látogatók, akinek engedélye van 2-szer nagyobb és minél messzebb haladunk előre, annál több ilyen esetek a gyakorlatban.
Árukatalógus tartalmazó 3 elem minden sorban jól néz ki a kisebb monitorok, de ha a képernyő szélességének nyúlik kétszer, a 3 elem csak elveszett, fehér alapon, és néz ki túl kifinomult. De még mindig úgy kezdeni ezt a fajta elrendezés, mióta elkezdtem beszélni róla.
Kivetése a termék katalógus segítségével az asztalra
Abban az esetben, táblázatos elrendezés könyvtár nagyon egyszerű - először meg kell határozni, hogy hány elem lesz található minden sorban. Tegyük fel, hogy ebben az időben lesznek 3. A legfontosabb dolog ebben az esetben - ne felejtsük el, hogy állítsa be a táblázat szélessége 100% -ra, azaz az alapértelmezett, ez az elem nem úgy viselkedik, mint egy blokk, és a beépített ...
Érdemes megjegyezni, hogy az oldal oszlopok igazított szélessége egymással automatikusan. Ha bármely oszlopban lesz több információt, akkor egyre szélesebb körben mások, de a mi esetünkben, az összes oszlop lesznek képek az azonos szélességű, így nem is kell, hogy adja a szélessége 33% minden oszlopban.
Továbbá, ne felejtsd el megadni középre igazítást az oszlopot. Ezen tény és minden. Táblázatos elrendezés könyvtár a legegyszerűbb és megbízható, de ez az eljárás nem teszi lehetővé, hogy beállítsa a tételek számát on-line, attól függően, hogy a felhasználó a képernyő mérete. Ezért menjünk tovább. Összefoglalva, felsoroljuk a legfontosabb pontok:
- szélessége a táblázat legyen 100%;
- összehangolása az oszlopok kell végezni a közepén a vízszintes és a felső éle a függőleges.
Segítségével golyó és a tulajdon display: inline-block az elrendezés a termék katalógus
Általában nem hal, sem húst, de mi ez csak és ebben az esetben szükséges. Tehát ott megy! Készítsen egy felsorolás és csuklómozdulattal kapcsolja be a katalógusban. A lényeg ebben a folyamatban meg a stílus display: inline-block, különben nem történik semmi. Ez természetesen lehetséges beállítani és display: inline, de akkor lehetetlen lesz beállítani a stílus jellemző blokk szintű elemeket, amit feltétlenül szükség van az elrendezés könyvtárban.
Ebben a folyamatban, van néhány kulcsfontosságú pontot:
- akkor vissza kell állítania a külső és belső párnázás a golyó a tulajdonságok használatával margin és padding;
- tiltsa le a listát markerek segítségével az ingatlan list-style;
- li elemek teszik fél blokk fél, és beépíteni a tulajdonság kijelző;
- gondoskodjon az összes könyvtár bejegyzéseket egyetlen vonalon tagolás nélkül kocsi (nagyon fontos);
- A szélesség katalógus tételek;
- megállapíthat egy minimális szélessége az elemek, egyenlő a szélessége a csatolt képek;
És ez szilárd listáját árnyalatok lezárul. Úgyhogy tisztázni néhány részletet.
Mintegy nulla külső és belső párnázás világos, azaz a. A. felsorolások alapértelmezés jön tagolt a bal szélen, és mi az elrendezés a katalógusban nem szükséges.
Markers nem kell nekünk is, ezért letiltja azokat a tulajdonságokat list-style. így ez sem.
Ami a display: inline-block, beszélgettünk egy kicsit magasabb, így nem fogom megismételni.
Minden elem a listában kell lennie ugyanabban a sorban, különben nem fog működni. Az a tény, hogy mi történik elem egy fél blokk és fél épült, így ha minden elem az elrendezés a könyvtárban kerül egy új sort, a böngésző automatikusan hozzáadja a láthatatlan szakadék a sor végére, ami azt a tényt, hogy a harmadik eleme a húr megszűnik, hogy illeszkedjen az első mellé kettőt, és kerül át. Akkor nézd meg magad, kísérletezik a kocsihoz beágyazott elemeket.
A szélessége az elemek kell tüntetni százalékos. Abban az esetben, három elem minden sorban adja könyvtár 33% esetében 4-25%, és így tovább.
A minimális szélessége katalógus elemek, gondoskodnunk kell arról, hogy nem tömöríti túlságosan, amikor egy alacsony felbontású monitor vagy mobil eszközök.
Segítségével úszók elrendezés könyvtár
Az előző példában, tettünk egy nagy és egyetemes eredmények felhasználásával a golyó, de nem akarjuk, hogy megáll ott, és úgy döntött, hogy nem ugyanaz, csak egy kicsit másképp. Arról van szó, hogy a lebegő dobozok segítségével létrehozott tulajdonságait úszó (az angol úszó -. Float, float). Jelölés a könyvtár nem lesz kicsit eltér a korábbi verzió, de a stílus. A fő különbség - elv, amely alapján ezt a módszert.
Tehát nézzük meg, milyen lépéseket kell tenni:
- akkor vissza kell állítania a külső és belső párnázás a golyó a tulajdonságok használatával margin és padding;
- tiltsa le a listát markerek segítségével az ingatlan list-style;
- szélességének megadásához katalógus tételek;
- megállapíthat egy minimális szélessége az elemek, egyenlő a szélessége a csatolt képek;
- úszó elemek do li használatával tulajdonságok float;
- megszünteti a pakolás végén a listában az ingatlan világos.
Ebben az eljárásban vannak buktatók - ha nem kapcsolja ki a csomagolást a végén a lista, miután a katalógus elemek ráhelyezve egy függőleges síkban, mintha a könyvtár magassága nulla, és nem létezik a DOM-e. Ennek elkerülése érdekében, haladunk, hogy hozzon létre egy különleges besorolású .clear, amely törli csomagolja mindkét oldalán a tulajdonság egyértelmű: mindkettő.
Sokoldalúan elrendezés a termék katalógus
És most, mint a bónusz, figyelembe vesszük a legsokoldalúbb módja elrendezése a könyvtár, amely alkalmas mind a mobil eszközök és a monitor nagyon nagy felbontás - 26 vagy több centi. Ennek alapján vesszük az utat, hogy a legjobban szeretünk - egy felsorolás kombinálva a display: inline-block, de használható lebegő blokkal. Minden attól függ, hogy melyik módszert részesíti előnyben.
Tehát most kell előírni a könyvtárat, ahol a termékek számát soronként elméletileg 1-től a végtelenig. Ebben az esetben, akkor nem szabad elfelejteni, nincs eszköz, és nincs képernyőn, amit felbontású ő is rendelkeznek.
Ebben a példában azt kell figyelni, hogy egy fontos részletet - ha a méret li százalékában, az erős összehúzódása a képernyő címtárbejegyzéseket lesz túl kicsi, ami ebben az esetben elfogadhatatlan. Ezért adja meg a szélessége pixelben, hanem a képesség, hogy változtassa meg az aktuális böngésző ablak segítségével java script. Továbbá ne felejtsük el, hogy a minimális szélessége a könyvtár elemeit annak érdekében, hogy elkerüljék a túlzott tömörítés.
A fő jellemzője ennek a módszernek, instabil mérete könyvtárbejegyzéseket, amelyet százalékában számítják ki az aktuális képernyő mérete. Elsõsorban során szélességét. A script, vettünk 10% -a szélessége a böngésző ablakot, találni egy méret a legmegfelelőbb és esztétikus. Minél nagyobb a képernyő, annál nagyobb lesz a katalógusban terméket.
Így vagyunk a fő módszerei elrendezés könyvtár, amely sikeresen lehet alkalmazni a gyakorlatban. A legegyszerűbb módja bizonyult asztalra, de szenvedett egyetemessége és érvényességét az elrendezés.
A legkedveltebb módszer elrendezés segítségével felsorolások, amelynek elemei vannak rendelve a tulajdonságait félig épített, félig blokkot tartalmaz. A kód ebben az esetben úgy néz ki, kompakt és végrehajtása igen egyszerű.
Tehát tudja, milyen egyszerű ez tényleg lehetséges, hogy szabjon ki különböző képernyőfelbontás, a minimális számú stílusok és egyszerű elrendezést.