Blokk div elrendezés CSS tulajdonságok - létrehozzon egy olyan honlapot alapuló div blokkok
Div Layout egy valódi modell területek létrehozása.
A hálózat mindig vannak új helyszínek - hírportálok, blogok és a személyes oldalak. Szinte mindegyikük jön létre alapján a blokk modellt, amely a blokkok DIV. Ma fogunk foglalkozni ez a technológia, úgy az alapvető árnyalatok div elrendezés.
Az áramlás a HTML dokumentum
Ha arra gondolunk, hogy a HTML nyelv segítségével kell felépíteni egy hipertext információt, világossá válik, hogy bármely oldalon, lényegét tekintve, egy sor egységek: képek, szövegek, linkek, és így tovább. Mi nem beszélünk konkrétan a DIV blokk, de ez szorosan kapcsolódó témák.
Tehát, van egy adatfolyamot, amelyek a folyamatban lévő és a HTML oldalt. Abban a pillanatban, van két típusú strukturális elemek: blokk és kisbetűs. Block, normál HTML patak vannak elrendezve egymás mögött a függőleges sorrendben. Ebben az esetben az alapértelmezett szélesség a blokk elfoglalt összes rendelkezésre álló teret, viszonyítva az oldal vagy szülő elem. Az viszont, kis elemek vannak elrendezve egymás mögött egy vízszintes módon.

Ennek megfelelően, ha ez egy normális HTML áramlás, a div elemek kerülnek egymás alatt, és a span sorban.
DIV elrendezés oldalon
Tehát, hogy jelölje meg a helyszínen kezdték használni DIV blokkokat. Segítségével őket, akkor raschertit volt alapvető elrendezést, és további egységek minden releváns tartalom típusokat.
Lássuk ezt a folyamatot, mint például a szabványos oldal, beleértve a kupakot, blokk tartalmát, oldalsáv és lábléc.

Mint látható a képen, az elrendezés az elrendezés már használják az alábbi fő összetevőből áll:
A főegység használják, mint egy konténer a teljes tartalmat. Header - banner. Nav - navigációs egység. Tartalom - Általános információk és tartalmak. Lábjegyzet - site pince.
Mindegyik blokk egy konténer DIV. De az elmélet, a blokkok kell menni egymás után. Azt is meg kell, hogy az elrendezés a fent tárgyalt, hogy a tömbök szerkezete a következő:
És plusz minden, ami kell elhelyezni az oldalon ugyanúgy, mint láttuk, a sablont. Hogyan érhetjük el ezt? Erre a célra fogjuk használni tulajdonságait DIV blokkot, amely lehetővé teszi számunkra, hogy gondoskodjon őket a kívánt, egymáshoz képest, és az oldal egészét.
De a kezdők, hozzunk létre az alapjait a HTML elrendezés, és adja meg a nevét a blokkokat, hogy képes legyen dolgozni stíluslapok.
HTML frame
Ha kihagyja az összes szolgáltatást tag, a csontváz a helyén fog kinézni.
Minden blokkban kijelölt osztályban. Vele, akkor meg a stílus az egység - ez segít bennünket, hogy elérjük a kívánt helyre az oldalon.
Itt az ideje, hogy megismerjék a stílusok és tulajdonságok, amelyek a div elrendezés a helyszínen.
Ha valaki nem ismeri, a helyszíni építési már a CSS stíluslapok. Ezek segítségével meg lehet változtatni bármelyik eleme az oldalon. Ez vonatkozik mind a látványterv a blokk, és a helyét és méretét.
Kezdetnek, menjünk megismerjék a tulajdonság, amely lehetővé teszi, hogy helyezze el a DIV blokk jobbra vagy balra az oldal vagy a szülő konténer.
Egy kis kitérőt. Mindig, amikor kijelöl egy stílust egy blokk, ez megváltoztatja a tulajdonságait (méret, elhelyezkedés) képest a szülő tartályba.
A float tulajdonság négy értékei: none, jobbra, balra, öröklik.
Mi érdekli az értéke „bal” és „jobb”.
Lebegőpontos érték azt jelzi, hogy melyik oldalon fog megjelenni a blokk. Minden más blokkok fog folyni körül a szemközti oldalon.
Ebben az esetben a navigációs készüléket, meg kell adnia az értéket balra. értéke az elsődleges jog tartalmát. Itt van, hogyan fog kinézni a stílus fájlban:
By the way, akkor meg a tulajdonság csak a navigációs készüléket. Tartalom blokk automatikusan be lesz állítva a jogot navigációt. Ezt úgy érjük el csomagolásnak köszönhetően amelyet úgy kapunk, tulajdonságainak beállítása úszó.
Padding CSS: margin és padding
Most hadd magyarázza a két fontos tulajdonságot használják az elrendezés alapján div blokkokat. Ezek felelősek a kitöltés. Ahhoz, hogy megértsük a lényegét munkájukat a legegyszerűbb példa.
Képzeljük el, hogy meg kell csinálni, hogy a fő egység FŐ. Volt egy kis eltéréssel a fejléc az oldalon. Ezt meg lehet tenni hozzárendelésével a blokk a fő div class. margin tulajdonság. Ez felelős a külső padding blokk.
Margó területén a következő értékeket: [value | kamat | auto] | öröklik.
Így, akkor adja meg a kitöltés pixel, százalék, felváltva mindkét oldalon.
Lehetőség van megadni csak bizonyos behúzás, például a felső oldalán. Ez pontosan mi esetünkben. Itt van, hogyan kell végrehajtani:
Most a fő egység lesz egy felső behúzás 10 pixel.
Most felhívni egység navigációs és tartalmát. Képzeljük el, hogy már van egy honlap. Az összes link navigációs nagyon közel van a bal oldalán. A szöveget a tartalom blokk éppen ellenkezőleg, nagyon közel van a jobb oldalon. Nem elég egy szép design. Meg kell, hogy a szivacs.
Mert a padding tulajdonság. amely a következő értékeket: [value | érdeklődés] | örököl
Itt ugyanaz az elv, mint az ingatlan fedezet - beállíthatja a francia mindkét oldalon külön-külön.
Nézzük először otodvinem navigációs linkek a bal széltől 15 pixel. Ezután a szöveg tartalmi blokk 20 pixel a jobb oldalon. Ennek eredményeként, a CSS kód egy kicsit hozzá:
Ezekkel az alapvető tulajdonságokat, akkor érheti el a kívánt DIV elrendezést. Ennek eredményeként, akkor készülj elrendezése a helyén, és csak akkor kell kitölteni a szükséges információkat.
következtetés
Megvizsgáltuk csak az alapvető tulajdonságait. A valóságban, amelyből sok más. De minden esetben, az információ felhasználható egy div elrendezés mindig.