Az alap div blokk elrendezése
ElőzőTartalom
- A DIV címke és a float tulajdonság
- Az egyértelmű tulajdonság
- Behúzások a blokk elrendezésben
Bármely weboldal a rajta elhelyezkedő elemekből áll, és ezek elhelyezéséért szinte mindig a blokk elrendezés div felelős. Természetesen létezik táblázatos elrendezés is
, és még arról is viták vannak, hogy melyik a jobb blokk- vagy táblázatos rendszer használata. A valóságban azonban jelenleg nem találkozik a modern, népszerű és kényelmes webhelyekkel, amelyek csak táblázatos elrendezést használnak. A legjobb esetben csak arra használjuk, amire szánták - vagyis táblázatok készítésére, de nem magának az oldal szerkezetének kialakítására. |
A helyzet az, hogy a webhely div elrendezése lehetővé teszi számos css tulajdonság beállítását, amelyek nem állnak rendelkezésre a táblákhoz. Emellett a táblázatrendszer fő hátránya, hogy a táblázat addig nem jelenik meg a képernyőn, amíg a böngésző teljesen be nem tölti. Ha a teljes oldal egy táblázatban készült, akkor az csak az oldal teljes html kódjának teljes betöltése után jelenik meg a kijelzőn.
A DIV címke és a float tulajdonság
A blokkrendszer alapja egy címke, amely egy tartalomtároló. Más tartályokat is tartalmazhat.
A DIV címke használata nem bonyolultabb, mint az MP3 címkék szerkesztése. A webhely szabványos szerkezete általában a következőképpen alakul: van egy fő tároló (gyakran hozzárendelnek egy wrapper, konténer, fő stb. nevű osztályt). Ebben a tárolóban találhatók a menü blokkjai, a tematikus rész és az oldalsáv.
Alapértelmezés szerint minden új blokk egy új sorba kerül. Annak érdekében, hogy egy blokkot balra vagy jobbra helyezzen elegyébként (például az oldalsáv jobb oldali elhelyezéséhez) a float tulajdonságot használjuk. Alapértelmezés szerint a "nincs" értéke van, de beállíthatja a "bal" és a "jobb" értékeket is.
Tekintsük ezt a tulajdonságot egy két blokkos példával.
Letiltás a tartalomért Blokk az oldalsávhoz
Ez a kód a következő kimenetet produkálja:
Az egyértelmű tulajdonság
Fontos figyelembe venni, hogy a float tulajdonság nem csak magára a blokkra vonatkozik, amelybe be van írva, hanem a következő elemre is, amely ezt a blokkot követi. Vagyis ha a fent leírt két blokkhoz adunk még egy blokkot anélkül, hogy tulajdonságot adnánk meg, akkor az nem egy új sorban fog elhelyezkedni, hanem a második blokktól jobbra indul.
Ennek elkerülése érdekében a blokk elrendezés div a clear tulajdonságot használja, amelyet az új sorból elhelyezni kívánt blokkhoz kell beállítani. Leggyakrabban erre a "mindkettő" értékre van állítva, de beállíthatjuk a "bal" vagy "jobb" értéket is, ha nem csak a blokkot akarjuk új sorba helyezni, hanem az igazítását is. .
Adjunk hozzá egy új elemet a fenti példához:
Letiltás a tartalomért Letiltás az oldalsávhoz Alul egy új blokk található
Eredmény:
Behúzások a blokk elrendezésben
A blokkok elhelyezkedése mellett fontos a behúzások hozzárendelése mind a blokkok között, mind azokon belül. Ehhez a margó és a padding tulajdonságokat használják.
A behúzások külön vannak beállítva az elem felső, jobb, alsó és bal oldali részére. Egy sorban adhatók meg négy érték felsorolásával:
margó: 20 képpont 10 képpont 0 40 képpont
Az ilyen paraméterekkel rendelkező blokk 20 képponttal a legmagasabb elem alatt helyezkedik el, tíz pixelre az álló elemtől,alulról nulla kitöltés lesz, balról pedig 40 képpontos margó lesz.
Ha ugyanazok a mutatók vannak megadva a kitöltés tulajdonságban, akkor ezek lesznek a tartalom belső behúzásai annak a blokknak a határaihoz képest, amelyben az található.
Az egyes oldalak egyedi tulajdonságait is beállíthatja a margó-felső margó-alsó, margó-bal, margó-jobb (és hasonlóképpen a kitöltés) használatával. Ebben az esetben, ha az egyik oldal nincs megadva, akkor az oldalán lévő behúzás nulla lesz, vagy az oldalon lévő blokkokhoz megadott általános css tulajdonságok határozzák meg.
KövetkezőOlvassa el tovabba:
- Üdülőközpont üzleti terve, turisztikai központ Töltsön le ingyen egy turisztikai központ üzleti tervét
- Ideje üzletasszonynak lenni
- Hogyan készítsünk szokatlan kertet túl sok gond nélkül (tippek a képeken)
- Hogyan kezeljük a stresszt
- Hogyan nyithatunk kávézót