Mi az elrendezés a blokk? Hogyan elő egy oldalt a webhely a saját?

Van egy vágy, hogy megtanulják, hogy saját oldalain oldalak? Akkor nézzük, mi már elsajátították a blokk elrendezés. Layout kezdő megfeleljen a számos nehézség, hogy van egy csomó kérdést. Nézzük meg, mi van blokk kódolás.

Egy fontos tipp

Használja a WYSIWYG szerkesztő, így minden világosabb. Azok, akik ismerik a HTML is, a munka a notebook, mert megértik, mindent. És a kezdők kihasználhatják programok, mint a FrontPage, vagy például a Dreamweaver.

Típusú elrendezés oldalak

Vannak többféle elrendezése:

1. Táblázatos.
2. Block.
3. Vegyes.

Mi érdekli a blokk elrendezés. Mi különbözteti meg a tábla? Blokknál elrendezés segítségével DIV tag vannak bizonyos előnyei:

1. Töltse a blokkok gyorsabb.
2. Megjelenített tartalmat blokkok (ellentétben a táblázatokat), a letöltés bekövetkezik. Mint ismeretes, ezek a táblázatok megjelenítik csak a teljes táblázatot.
3. Kód div-ek könnyebb olvasni.

Ez nem minden előnyével, amely híres a blokk elrendezés.

Hogyan változtassuk meg a helyét a div-blokkok?

Ez segít nekünk, hogy lebegnek - ingatlan, amely képes a következő:

1. Igazítása balra - balra.
2. Összehangolni jobb - jobb.
3. Element marad, ahol volt, nem fog mozogni, ha az adott sem. Ez az érték lesz az alapértelmezett.

Egy másik fontos jellemzője, hogy szükségünk van - világos. Lehet, hogy 4 értékek:

1. A telepítéshez az előző elem mozog jobbra, blokk - jobb.
2. Bal készletek elmaradt az előző elem, mely a bal oldalra kerül.
3. Mindkét - A telepítés korábbi kényszerült blokk.
4. Semelyik hiányát jelzi korlátozások a helyzetét a blokk viszonyított azokat az elemeket, amelyek mozgatják.

példa

Gondold át, hogyan fog kinézni, mint egy blokk elrendezés div. Írunk a kódot:

Kóddal látja az eredményt. Így alapján több tulajdonságok lehet szabályozni a blokk elrendezés, mint kívánatos. Ugrás a következő pillanatban. Van használt text-align: center, összehangolni az egyes blokk bármely böngészővel.

Mint látható, ez elég egyszerű blokk elrendezés a helyszínen. Fontos, hogy tanulmányozza és a gyakorlat a több tulajdonságát, hogy létre fog hozni egy rugalmasabb szerkezet a lapok.

Valami sokkal fontosabb

Van egy népszerű szolgáltatás, hogy használják az elrendezés - helyzet, hogy használják helyezésére.

Az értékeket a tulajdonságait összesen:

1. Relatív - állítja a helyzet az elemek relatív eredeti helyükre. Alkalmazás bal, felső, righ, fenékelem mozog egy bizonyos irányba.
2. Statikus - normál kijelző elemet. Semmi értelme, hogy a jobb / bal, alsó / felső - ez vezethet semmit.
3. Abszolút - abszolút pozicionálás elem.
4. Fix - hasonló mértékben. Ez van kötve egy bizonyos pontot a képernyőn, de ez nem változtatja meg álláspontját, még ha lapozhat.

Sok elrendezés észrevette, hogy amikor egy fix, abszolút és relatív helymeghatározás a blokkok egymásra. És akkor érdekes tudni, hogy melyik a blokkok, és az alábbi módon. Ahhoz, hogy erre a kérdésre válaszolni, amire szükség z-index. Ez hozta elrendezés blokkok egy új szintre. Ez lehetővé teszi, hogy nem csak, hogy az elhelyezése a gépen, hanem segítségével a harmadik Z tengely értéke egy ilyen tulajdonság lehet pozitív vagy negatív.

Készítsen 3 blokk. Ezután kísérletet abszolút pozicionálás.

Mint látható, könnyen változtatni a helyzetét a blokkokat. Alapján az a tény, hogy most már tudja, hogy az elemi blokk elrendezés oldalon. Alkalmazása a több tulajdonságát akkor javítsa a képességeit.