Aké je rozloženie bloku? Ako uložiť jednu stránku vašich webových stránok na vlastnú päsť?

Tam je túžba naučiť sa robiť svoje vlastné stránky lokalít? Tak to zvládli, čo rozvrhnutie bloku. Layout nováčik spĺňať rad ťažkostí, majú veľa otázok. Pozrime sa, čo je blok kódovania.

dôležitý tip

Použite editor WYSIWYG, takže všetko bolo jasnejšie. Tí, ktorí poznajú HTML dobre, práca na notebooku, pretože chápu všetko. A začiatočníci môžu využiť programov, ako je FrontPage, alebo napríklad, Dreamweaver.

Druhy rozvrhnutie stránok

Existuje niekoľko typov rozložení:

1. Tabuľková.
2. Block.
3. Zmiešané.

Zaujímame sa o rozvrhnutie bloku. To, čo odlišuje od stola? Na rozloženie bloku pomocou DIV tag má určité výhody:

1. Načítať s dizajnom blokov rýchlejšie.
2. Obsah zobrazené bloky (na rozdiel od tabuliek), ako dochádza k download. Ako je známe, tieto tabuľky zobrazí iba po celom stole.
3. Kód sa div-s čitateľnejšie.

Je to nie všetky výhody, ktorá je známa pre rozvrhnutie bloku.

Ako zmeniť umiestnenie div bloky?

To nám pomôže plávať - túto vlastnosť, ktorá je schopná z nasledujúcich spôsobov:

1. Zarovnanie vľavo - vľavo.
2. Zladiť právo - právo.
3. Prvok zostáva tam, kde bol, nebude pohybovať, ak daný nič. Táto hodnota bude nastavená ako predvolený.

Ďalším dôležitým prvkom, ktorý potrebujeme - jasné. Ten môže mať 4 hodnoty:

1. Pre inštaláciu pod predchádzajúcej položky presunúť do pravého bloku - vpravo.
2. Ľavé sady pod predchádzajúceho prvku, ktorý sa pohybuje smerom doľava.
3. Oba - Inštalácia predchádzajúceho vytlačenej bloku.
4. Žiadne indikuje neprítomnosť obmedzenie polohy bloku vzhľadom tých prvkov, ktoré sa pohybujú.

príklad

Zvážiť, ako to bude vyzerať ako blokové usporiadanie div. Píšeme náš kód:

Pod kódom vidíte výsledok. Tak, na základe niekoľkých vlastností môže byť riadená blokové usporiadanie, ako je požadované. Prejsť na ďalšom okamihu. Použili sme text-align: centrum, vyrovnať každého bloku pre ľubovoľný webový prehliadač.

Ako vidíte, je to celkom jednoduché blokové usporiadanie webu. Je dôležité študovať a praktizovať ďalšie vlastnosti, ktoré budú vytvárať pružnejšie štruktúru stránok.

niečo dôležitejšie

Existuje jedna veľmi obľúbená funkcia, ktorá sa používa v rozvrhnutie - poloha, sa používa pre polohovanie.

Hodnoty vlastností polohy:

1. Relatívna - nastavuje pozíciu prvkov vzhľadom k ich pôvodných miestach. Aplikácia vľavo, hore, righ, spodná prvok sa pohybuje v určitom smere.
2. Static - normálny položka displej. Nemá zmysel používať vpravo / vľavo, horné / dolná - to môže viesť k ničomu.
3. Absolútna - absolútna polohovacie prvok.
4. Opravené - podobne ako absolútny. Je viazaný na určitý bod na obrazovke, ale to nič nemení svoju polohu, aj keď otáčať stránky.

Mnohí layout si všimol, že pri použití pevnej, absolútnej a relatívnej polohy blokov prekrývajú. A potom zaujímavé vedieť, ktoré z nižšie uvedených blokov, ktoré vyššie. Ak chcete odpovedať na túto otázku, je potrebné z-index majetku. To prinieslo bloky rozvrhnutie na novú úroveň. To umožňuje nielen k polohovanie lietadla, ale aj prostredníctvom tretej osi Z. Hodnota takéhoto majetku môže byť pozitívne alebo negatívne.

Vytvorte 3 bloky. Ďalej experiment s absolútnou polohy.

Ako môžete vidieť, je ľahké zmeniť polohu blokov. Na základe skutočnosti, že ste teraz schopní, aby sa všetky základné blok rozloženie stránky. Aplikovanie viac vlastností budete zlepšiť svoje zručnosti.