Példák html oldalak blokk elrendezésére. CSS-elrendezés blokkolása. Megkülönböztető jellemzők az asztal elrendezéséből

A webhely elrendezése két fő módszerrel történik: táblázatos és blokkos div elrendezések. A blokk elrendezés funkcionálisabb és több funkciót biztosít a CSS használatának köszönhetően.

Hogyan működik a blokk?

Az ilyen típusú elrendezés végrehajtásához két fájlt használnak ( index.html és style.css) kódot tartalmaz HTMLés ennek megfelelő webhelystílus.

Az első fájlban közvetlenül vannak írva div-konténerek, amelyek egyfajta alapot jelentenek az elrendezéshez, a második pedig leírja a stílusjegyeinket és helyzetünket. div- konténerek.

Az elvégzett manipulációk eredményének valós időben történő megfigyeléséhez be kell írnia a böngésző címsorába: http://URL/teszt.

Elrendezés alapjai

A kétoszlopos elrendezést, amelyet megpróbálunk létrehozni, a következőképpen ábrázolhatjuk:

Elrendezésünk minden elemét egy közösben kell elhelyezni, hogy a teljes elrendezés egészére paramétereket lehessen állítani. A megosztott tároló tartalma lesz div-ok, amelyek külön blokkokat alkotnak. Használva CSS a következő paramétereket tudjuk testre szabni: méret, pozíció az oldalon, stílusok és színek.

A webhely elrendezésének blokkolása

Minden elrendezési elemet külön „tárolóba” kell helyezni egy címke segítségével div. Fájlban CSS hozzá kell adnia az elemek tulajdonságait, meghatározva az elemek megjelenésének és elhelyezésének paramétereit (szélesség, magasság, betűtípus, méret stb.).

Annak érdekében, hogy ne keveredjen össze, minden egyes tárolóba be kell írnia a blokk nevét, így fog kinézni:

"http://www.w3.org/TR/html4/loose.dtd">

Blokk elrendezés – vegye 2

Egy sapka

Bal oldali oszlop

Az oldal tartalma

Pince

A műveletek befejezése után meg kell nyitnia a fájlt Stílus.cssés írja le ezeknek a tárolóknak a stílusait. Először is le kell írni a fő címkék stílusait Törzs és HTML, az oldalmargó nullázása a böngészők közötti kompatibilitás biztosítása érdekében:

törzs, html (
margó:0px;
padding:0px;
}

törzs, html (
margó:0px;
padding:0px;
}
#maket (
szélesség: 800 képpont;
margó:0 auto;
}
#fejléc(
háttérszín:#C0C000;
}
#bal(
háttérszín:#00C0C0;
szélesség: 200 képpont;
balra lebeg;
}
#tartalom(
background-color:#8080FF;
margó-bal:202px;
}
#footer(
háttérszín:#FFC0FF;
}

Hogy részletesebb mesterkurzust kapjunk arról, hogyan kell weboldalt tervezni az alapján div, a következő videókat tekintheti meg:

https://www.youtube.com/watch?v=omyeH5h1lqA
https://www.youtube.com/watch?v=SQ7cWIy63yI

Az óra célja: Bevezetés a blokk alapú CSS-elrendezésbe. Készségek elsajátítása blokk alapú weboldalelrendezés használatában

Amikor rétegekkel vagy más szóval blokkokkal és div elemekkel dolgozik, a fő teher a CSS-re hárul, mert Tulajdonságok nélkül a rétegek gyakorlatilag semmik.
Sajnos továbbra is probléma van a böngészők közötti kompatibilitással, ha blokkokkal dolgozik. Azok. ugyanazok a tulajdonságok különböző eredményeket adnak a különböző böngészőkben. Az ilyen problémák leküzdésére úgynevezett hackek léteznek. Csapkod- ez egy technikák halmaza, amikor az egyes böngészőket olyan kóddal látják el, amelyet csak ez a böngésző ért, mások figyelmen kívül hagynak.

Megkülönböztető jellemzők az asztal elrendezéséből

Tegyük fel, hogy létre kell hoznia egy oldalsablont, amely fejlécből, láblécből és két oszlopból áll.
Különbségek:

Fix kialakítású ill
merev blokk elrendezés (két oszlop)

A rögzített elrendezés adott szélességű rétegek használatát jelenti, amelyet a felhasználó monitorának felbontása határoz meg.
Mivel a hálózati felhasználók körében a legnépszerűbb monitorfelbontás az 1024×768, ezért célszerű erre koncentrálni. A blokkok teljes szélessége ebben az esetben 900-1000 pixel (a képpontok egy kis része a görgetősávokhoz és a böngészőablak szegélyéhez szükséges).
A tartalommal rendelkező fő blokk középen van elhelyezve, akkor a szélek körüli „szabad” margók még nagy monitorfelbontás mellett is jól mutatnak.

1. ábra. Rögzített tervezési példa

A teljes szélességet a tervező választhatja meg, amit „szemmel” vagy bármilyen további információ begyűjtése után neveznek meg.

Példa: a fenti kép alapján készítsen fix weboldal dizájnt

Teljesítmény:

Az oldal összes fő elemét blokkokra „bontjuk” az alábbiak szerint:
- blokk 1— első réteg (id="shapka"),
- 2. és 3. blokk egyetlen blokkban találhatók (id="container"),
- blokk 2— réteg menüvel (id="menu"),
- blokk 3— tartalommal rendelkező réteg (id="content"),
- blokk 4— réteg az id="bottom" elemmel.

Ábrázoljuk sematikusan a blokkok elrendezését:

1. Állítsa be a „fejléc” tulajdonságait (1. blokk)

A rétegek teljes szélességét „szemmel” választjuk ki - 750 pixel.

margó-jobb: auto; margó-bal: auto;

vagy állítsa be a magasságot a behúzással

Például:

padding-top : 15px ; padding-bottom : 15px ;

padding-top: 15px; padding-bottom: 15px;

A fejléc összes kódja:

#shapka( text-align: left; /* A belső tartalom igazítása balra */ szélesség: 750 képpont; /* Blokkszélesség és teljes szélesség */ háttér: #900000; /* Háttérszín */ magasság: 50 képpont; /* Magasság blokk */ jobb oldali behúzás: auto /* Automatikus behúzás jobbra */ bal oldali behúzás automatikus

2. Hozzon létre tároló tulajdonságait

Állítsa be a tároló szélességét: 750 képpont + 20 képpont (teljes elrendezési szélesség + kitöltés a teljes elrendezési szélességben). Azok. a tárolónak nincs párnázata, ezért növelje a szélességét 10 képponttal a bal oldalon és 10 képponttal a jobb oldalon
Ha az elrendezésnek illeszkednie kell a képernyő bal oldalához, a böngésző ezt automatikusan megteszi. Esetünkben a konténerblokkot középre fogjuk helyezni

#container ( szélesség: 770 képpont; /* Réteg szélessége vagy (elrendezés szélessége+20) */ margó jobbra: auto; /* Automatikus behúzás jobbra */ margó balra: auto; /* Automatikus behúzás balra */ )

3. Hozzon létre tulajdonságokat a 2. blokk menühöz

2. számú réteg 200 pixel szélességgel (szélesség)
Ugyanahhoz a réteghez (menühöz) beállítjuk a szomszédos blokk körüli áramlást, azaz. ingatlan float: bal
Belső margókat állítunk be, hogy a szöveg ne „ragadjon” a réteg szélére (padding tulajdonság)
Állítsa be a szöveg és a háttér színét (háttér, szín)

#menü ( szélesség: 200 képpont; /* Réteg szélessége */ lebegés: balra; szín: fehér; /* Szöveg színe */ háttér: #008080; /* Háttérszín */ kitöltés: 10 képpont; /* Belső margók a tartalom körül */ )

4. Hozzon létre tulajdonságokat a 3. blokkhoz – tartalom

Állítsa be a réteg szélességét 770 képpont – 200 képpont = 570 képpont arányra, De! Mivel a 2. és 3. blokkban is beállítottuk a kitöltést, további 40 pixelt kell levonnunk: 20-at a menüblokk kitöltéséhez, 20-at a tartalomblokk kitöltéséhez. Legyen a rétegszélesség 770px - 200px - 40px = 530px
A burkolást float-ra állítottuk: left , kivéve az Internet Explorer böngésző hibáját: ha nem állítja be a tulajdonságot, rés lesz a rétegek között. Ráadásul, ha nem állítja be ezt a tulajdonságot, akkor a blokk a menüblokk mögött jelenik meg, és csak a tartalma (szövege) fog körbefolyni a jobb oldali menüblokk körül.
Állítsa be a háttérszínt (háttér) és a belső margókat (padding)

#content ( /* Jobb oszlop */ szélesség: 550 képpont; /* Réteg szélessége */ lebegés: balra; /* Burkolat a szomszédos réteggel */ kitöltés: 10 képpont; /* Belső margók a tartalom körül */ háttér: #e0e0e0; /* Háttérszín */ )

5. Hozzon létre tulajdonságokat a 4. blokkhoz - "pince"

Állítsa a réteg szélességét 750 képpontra
Ennél a blokknál el kell távolítani a burkolatot, pl. állítsa be a tiszta tulajdonságot
Belső padding margók beállítása
Állítsa be a háttér (háttér) és a szöveg (szín) színét
Középre a blokk (margó jobbra és margó balra)

#bottom( width:750px; /* Rétegszélesség */ clear:left; /* a blokkolás visszaállítása és a réteg elhelyezése a bal oldalon */ kitöltés: 10px; /* Belső margók a tartalom körül */ háttér:#444; /* háttér */ szín :#fff /* szöveg színe */ jobb oldali behúzás /* Automatikus behúzás balra */

Végső kód: minden együtt

Eredmény:

2. ábra. Merev blokk elrendezés két oszloppal

Fix kialakítás három oszlophoz

A háromoszlopos elrendezés rögzített kialakítása esetén a moduláris rács felépítésének két fő megközelítése van:

A tulajdonság használata oszlopok egymás mellé helyezésére.
A rétegek pozicionálására szolgáló CSS-tulajdonságok halmazának használata.

Nézzük az első esetet.

A float tulajdonság használata háromoszlopos elrendezéshez

Tovább rizs. 3— az ingatlan háromoszlopos elrendezéshez való felhasználásának eredménye. Valójában 6 réteget használnak – külön az oszlopfejlécekhez és külön magukhoz az oszlopokhoz.

Rizs. 3. Javított három oszlopos kialakítás

Példa: hozzon létre egy weboldalt az alábbi három oszlopos elrendezéssel rizs. 3. Használjon rögzített blokk-elrendezési technikákat

Teljesítmény:

Adjunk meg három réteget a fejlécekhez (#header...) és három réteget az oszlopokhoz (#col...).
Mivel az oszlopok és fejléceik két különböző sorban helyezkednek el, tárolókba fogjuk egyesíteni őket (class="container").
A blokkok elrendezésének sematikus ábrázolását kapjuk:

A következő html szerkezetet kapjuk:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<test > <div class = "tároló" > <div id = "fejléc1" > Jevgenyij Jevtusenko</div> <div id = "fejléc2" > Valerij Brjuszov</div> <div id = "fejléc3" > Eduard Aszadov</div> </div> <div class = "tároló" > <div id = "col1" > Egy régi barátról álmodom<br/> aki ellenséggé vált<br/> de nem álmodom ellenségről,<br/> hanem ugyanaz a barát.<br/> Nincs velem<br/> de most mindenhol ott van<br/>és a fej megy<br/> az álmoktól mindenfelé.</div> <div id = "col2" > A nagy megfoghatatlan a közelben,<br/> Csak távolról nézve ünnepélyes,<br/><br/> </div> <div id = "col3" ><br/><br/><br/> </div> </div> </body>

Jevgenyij Jevtusenko

Valerij Brjuszov

Eduard Aszadov

Egy régi barátról álmodom
aki ellenséggé vált
de nem álmodom ellenségről,
hanem ugyanaz a barát.
Nincs velem
de most mindenhol ott van
és a fej megy
az álmoktól mindenfelé.

A nagy megfoghatatlan a közelben,
Csak távolról nézve ünnepélyes,
Mindannyian elhaladunk a nagyok előtt
És csak egy véletlenszerű linket látunk.

Minden ügyben maximális nehézségekkel
Még mindig van egy megközelítés a problémára:
A vágy lehetőségek sokasága,
A vonakodásnak pedig sok oka van.

2. Stílusok hozzáadása a fejlécekhez (fejléc... választó) és oszlopokhoz (oszlop... választó)

Az oszlopok és a címsorok szélességét mindenkinél azonosra tesszük. Mivel 3 oszlop van, és az átlagos oldalszélességnek körülbelül 700-900 képpontnak kell lennie, az oszlopszélességet 250 képpontra állítjuk.

#header1, #header2, #header3, #col1, #col2, #col3 (szélesség: 250px; /* Oszlopszélesség */ )

Adjunk hozzá belső margókat (behúzások a szövegtartalomból) - padding és külső behúzások, hogy helyet biztosítsanak az oszlopok között. Mivel a tulajdonságok az összes oszlopra egyszerre vannak beállítva, és maga a teljes elrendezés nem középre, hanem balra igazított, a behúzást csak az egyik oldalon - a bal oldalon - állítjuk be az összes oszlophoz egyszerre (margó-bal ).

A tetejére külső margót is adunk, amely függőleges rést biztosít a címsorok és az oszlopok között, valamint margót a címsorok számára az oldal tetejétől (margin-top).

#header1, #header2, #header3, #col1, #col2, #col3 ( ... float: balra; )

Adjon hozzá szegélyt a blokkokhoz, és állítsa be a betűtípus-paramétereket (font-family, font-weight, font-size, color).

#fejléc1, #fejléc2, #fejléc3, #col1, #col2, #col3 ( ... szegély: 1px tömör fekete; /* Szegély a réteg körül */ font-family: Verdana, Arial, sans-serif; /* Nem serif vagy vágott betűtípus */ font-weight: bold-size: 80% /* Betűméret */ szín: fehér */ )

Megkapjuk a kódot:

#fejléc1 , #fejléc2 , #fejléc3 , #col1 , #col2 , #col3 (szélesség : 250px ; /* Oszlop szélesség */ padding: 5px; /* Margók a szöveg körül */ /* Felső párnázás */ balra lebeg; /* Oszlopok vízszintes összekapcsolása */ /* Szegély a réteg körül */ /* Nem soros vagy sans serif betűtípus */ betűsúly: félkövér; /* Félkövér címszöveg */ betűméret: 80%; /* Betűméret */ fehér szín ; /* Cím szöveg színe */ }

#fejléc1, #fejléc2, #fejléc3, #oszlop1, #oszlop2, #col3 ( szélesség: 250 képpont; /* Oszlopszélesség */ kitöltés: 5 képpont; /* Margók a szöveg körül */ margó balra: 5 képpont; /* Bal margó * / margin-top: 2px; /* Felső margó: balra /* Oszlopok összekapcsolása */ szegély: 1px tömör fekete /* Keret a réteg körül */ betűcsalád: Verdana, Arial, sans-serif; /* Nem serif vagy sans serif font */ font-weight: bold /* Bold title text */ font-size: 80% /* Betűméret */ szín: fehér */ )

Állítsuk be a hátteret minden választóhoz külön.

#header1 ( háttér : #B38541 ; ) #header2 ( background : #008159 ; ) #header3 ( background : #006077 ; ) #col1 ( background : #EBE0C5 ; ) #col2 ( background : #BBE1C4 ; ) #col3 ( háttér #ADD0D9 ;

#header1 ( háttér: #B38541; ) #header2 ( background: #008159; ) #header3 ( background: #006077; ) #col1 ( háttér: #EBE0C5; ) #col2 ( háttér: #BBE1C4; ) #col3 ( háttér: #ADD0D9;

Nézzük a köztes eredményt:

Rizs. 4. Köztes eredmény

3. A tárolók stílusának beállítása

Most a fejléceket és az oszlopokat külön tárolórétegekbe kell egyesítenie, és meg kell adnia nekik a megfelelő stílust - törölje a burkolást (törlés)

.container ( tiszta : mindkettő ; /* Megszakítja a float burkolást */ }

Tároló ( tiszta: mindkettő; /* Megszakítja az úszócsomagolást */ )

Most már csak az oszlopok betűtípusának módosítása van hátra a méretének, stílusának és színének megváltoztatásával.

#col1, #col2, #col3 ( font-family: "Times New Roman", Times, serif; /* Serif vagy serif font */ font-size: 100%; /* Betűméret */ font-weight: normal ; /* Normál stílus */ szín: fekete /* Szöveg színe */ )

Végső kód: minden együtt

Jevgenyij Jevtusenko

Valerij Brjuszov

Eduard Aszadov

Egy régi barátról álmodom
aki ellenséggé vált
de nem álmodom ellenségről,
hanem ugyanaz a barát.
Nincs velem
de most mindenhol ott van
és a fej megy
az álmoktól mindenfelé.

A nagy megfoghatatlan a közelben,
Csak távolról nézve ünnepélyes,
Mindannyian elhaladunk a nagyok előtt
És csak egy véletlenszerű linket látunk.

Minden ügyben maximális nehézségekkel
Még mindig van egy megközelítés a problémára:
A vágy lehetőségek sokasága,
A vonakodásnak pedig sok oka van.

Eredmény:

Rizs. 5. Eredmény

Rétegpozicionálás használata háromoszlopos elrendezéshez

Vegyünk példának egy három, elválasztóvonallal határolt oszlopból álló elrendezést (6. ábra).

Rizs. 6. Rétegek elhelyezése elválasztóval ellátott háromoszlopos elrendezéshez

Példa: hozzon létre egy weboldalt háromoszlopos elrendezéssel, elválasztó vonallal, az ábrán látható módon rizs. 6. Használjon rögzített elrendezési technikákat rétegpozicionálással

Teljesítmény:

1. A HTML kódstruktúra létrehozása

Ehhez az elrendezéshez elegendő minden oszlophoz három div réteget létrehozni.

Ezért a szerkezet egyszerű lesz:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<test> <div id= "col1"> Ivan Bunin </ br></ br> </ br> </ br> </ br> </ div> <div id= "col2"> </ br> Az ablak arany színben pompázik. </ br> </ br> Mindent fehér hó borít. </ div> <div id= "col3"> És minden reggel világos és tiszta </ br> </ br> </ br> Krizantém az ablakomon. </ br></ br> 1903 </ div> </ test>

Ivan Bunin

Fagyos ezüst ablakon,
A krizantémok egyik napról a másikra virágoztak.
A felső ablakokban - az ég világoskék
És beleragadni a hóporba.

Felkel a nap, vidáman a hidegtől,
Az ablak arany színben pompázik.
A reggel csendes, vidám és fiatal.
Mindent fehér hó borít.

És minden reggel világos és tiszta
Színeket fogok látni fent,
Délig pedig ezüstök lesznek
Krizantém az ablakomon.

1903

2. Oszlopstílusok hozzáadása

Állítsuk be ugyanazt az oszlopok szélességét (szélesség) és a belső margókat függőlegesen és vízszintesen (padding).

#col1, #col2, #col3 (szélesség: 250px; /* Oszlopszélesség */ kitöltés: 0 6px; )

A rétegek blokkoltságának megszüntetésére, pl. ahhoz, hogy vízszintesen egymás mellé helyezzük őket, be kell állítani a css float tulajdonságát.

#col1, #col2, #col3 { szélesség: 250 képpont; /* Oszlop szélesség */ párnázás: 0 6 képpont; /* Margók függőlegesen és vízszintesen */ úszó: bal; /* Rétegek becsomagolása */ }

#col1, #col2, #col3 (szélesség: 250px; /* Oszlop szélessége */ Kitöltés: 0 6px; /* Függőleges és vízszintes margók */ lebegés: balra; /* Réteg burkolása */ )

Mivel az elválasztó szegélynek csak a rétegek belső oldalán kell lennie, csak az egyik oldalon (szegély) két réteghez kell keretet hozzáadni.

#col1, #col2 { határ-jobbra: 1 képpont szilárd #000 ; /* Margók függőlegesen és vízszintesen */ úszó: bal; /* Rétegek becsomagolása */ } #col1, #col2 { határ-jobbra: 1 képpont szilárd #000 ; /* Sorparaméterek a szövegtől jobbra */ }

#col1, #col2, #col3 (szélesség: 250px; /* Oszlop szélessége */ kitöltés: 0 6px; /* Függőleges és vízszintes margók */ lebegés: balra; /* Réteg burkolása */ ) #col1, #col2 (szegély -jobbra: 1px solid #000 /* A szövegtől jobbra található sorok */ )

</ stílus> </ fej> <test> <div id= "col1"> Ivan Bunin </ br></ br> Fagyos ezüst ablakon, </ br> A krizantémok egyik napról a másikra virágoztak. </ br> A felső ablakokban - az ég világoskék </ br> És beleragadni a hóporba. </ div> <div id= "col2"> Felkel a nap, vidáman a hidegtől, </ br> Az ablak arany színben pompázik. </ br> A reggel csendes, vidám és fiatal. </ br> Mindent fehér hó borít. </ div> <div id= "col3"> És minden reggel világos és tiszta </ br> Színeket fogok látni fent, </ br> Délig pedig ezüstök lesznek </ br> Krizantém az ablakomon. </ br></ br> 1903 </ div> </ test>

Ivan Bunin

Fagyos ezüst ablakon,
A krizantémok egyik napról a másikra virágoztak.
A felső ablakokban - az ég világoskék
És beleragadni a hóporba.

Felkel a nap, vidáman a hidegtől,
Az ablak arany színben pompázik.
A reggel csendes, vidám és fiatal.
Mindent fehér hó borít.

És minden reggel világos és tiszta
Színeket fogok látni fent,
Délig pedig ezüstök lesznek
Krizantém az ablakomon.

1903

Elkészült a háromoszlopos terv!

Hello barátok!

Továbbra is tanulmányozzuk az elrendezést, és ma áttérünk a legérdekesebb részre.

Biztosan hallottad már a koncepciót "blokk elrendezés". De egy tudatlan ember számára ez a fogalom semmit sem jelent. Ezért: ki tudja - jól sikerült! Aki nem ismeri, olvassa el figyelmesebben.

A blokk elrendezés egy weboldal kódjának elrendezése univerzális tárolócímkék használatával

Erről írtam egy kicsit a „” cikkben. Itt részletesebben és konkrétan fogunk beszélni.

1. Miért blokkolja az elrendezést?

Réges-régen, az ókorban távoli őseink táblázatok segítségével készítették el a weboldalakat. Minden oldalelem külön cellában helyezkedett el, a cellák más, nagyobb cellákba csoportosultak, ezek pedig a legfontosabb cellában, magában a webhelyoldalban helyezkedtek el.

Ez nagyon kényelmetlen volt, mert a kód túlterheltnek és nehezen érthetőnek bizonyult, mivel minden cellát több címkével kellett leírni.

Ma már szinte senki sem használ táblázatelrendezést, bár egyes oldalelemek táblázatok felhasználásával készülnek.

Ne hozzuk fel a régi dolgokat. Térjünk át a blokk elrendezésére.

A blokk elrendezés lehetővé teszi oldalszerkezet felépítését egyedi blokkok (tárolók

). Olyanok, mint a téglák, amelyek a webhely vázát alkotják.

A blokk elrendezés előnyei a táblázatos elrendezéssel szemben:

Minden blokkot egy címke ír le;
A konténerek egymásba ágyazott szerkezete kényelmesen nyomon követhető;
Konténerek
nem csak a szülőkön belül pozícionálhatja, hanem más módon is (például abszolút pozicionálás) - erről később beszélünk;
A weboldalak betöltési sebessége jelentősen megnő. Egyes becslések szerint a sebesség három-négyszeresére nő a táblázathoz képest;
A blokk elrendezés lényegesen kisebb mennyiségű kódot tartalmaz a táblázatos elrendezéshez képest. Ez azt jelenti, hogy a szerver terhelése is csökken;
a blokk-elrendezésű webhelyek minden böngészőben teljesen helyesen jelennek meg, bármilyen képernyőfelbontás mellett;
Könnyen integrálható bármilyen CMS-be, anélkül, hogy problémákat okozna.

2. A blokk elrendezés alapja a konténer

A blokk elrendezésnél az összes oldalelem blokkokból áll (logikus, nem?).

Blokk

egy téglalap alakú terület. Alapértelmezés szerint egy blokk a szülőelem teljes szélességét elfoglalja, a blokk magassága a tartalmától függ. A blokkok függőlegesen vannak elrendezve, vagyis ha az oldal kódjába egymás után több blokkot írunk, akkor azok egymás alatt jelennek meg a böngészőben.

Ha több blokkot vízszintesen kell elrendeznünk, akkor tulajdonságaikban beállítjuk a „ körbefolyni” (úszó). De erről majd később.

Bármely blokk fő tulajdonságai a következők: párnázás, szegély és margók.

Sok sikert kívánok a webmesteri készségek elsajátításához!

A div blokkokkal történő elrendezés régóta szabványossá vált, és számos előnnyel rendelkezik a táblázatos elrendezéssel szemben. A valóságban azonban a kezdő fejlesztők zavarban vannak ugyanezen blokkok viselkedését illetően.

Nézzük meg a blokk elrendezésének főbb pontjait. Most nem vesszük figyelembe a html5 szabványt, hanem egyszerűen megnézzük a div blokkokkal való elrendezés alapjait, amelyeket elrendezés vagy egyes oldalelemek létrehozásakor használunk.

Mit tekintünk blokk elemnek?

Egy ilyen elem területe az oldalon alapértelmezés szerint téglalappal van ábrázolva, a teljes elérhető szélességet elfoglalja, és egy új sorban kezdődik.
A blokk-elrendezésben leggyakrabban használt elem az univerzális elem

Tehát az egyszerűtől a bonyolultig. Nézzük meg, hogyan jelennek meg a divek alapértelmezés szerint anélkül, hogy a stílusok befolyásolnák a pozíciójukat. Az egyértelműség kedvéért stílusokat adunk hozzá az elemekhez a stílus attribútum segítségével.

1. blokk

2. blokk

3. blokk

Adjunk hozzá egy szélességi értéket minden blokkhoz:

1. blokk

2. blokk

3. blokk

Látható, hogy minden blokk a specifikáció szerint új vonalon helyezkedik el. Ez a normális viselkedésük.

Most felmerül a kérdés, hogyan kell pozícionálni div blokkok egy sorban, egyik a másik után?

Erre a célra van egy tulajdonság, amely meghatározza, hogy a blokk melyik oldalon lesz kénytelen igazodni. Ugyanakkor a másik élről más elemek körül áramolhat.

A float tulajdonság jelentése a következő:

balra - a blokk a bal szélhez igazodik, jobbra folyik
jobb - a blokk a jobb szélhez igazodik, balra folyik
nincs – nincs megadva burkolt, a blokk alapértelmezés szerint az előző példákhoz hasonlóan viselkedik.

Adjuk hozzá a float:left-et a blokkjainkhoz, hogy a blokkok balra legyenek igazítva:

1. blokk

2. blokk

3. blokk

Ennek eredményeként a blokkok egy sorban sorakoztak fel. Oké, tegyük fel, hogy egy másik divet akartunk hozzáadni az aljára, és megtesszük a float tulajdonság megadása nélkül:

1. blokk. Lorem ipsum dolor sit amet, consectetur adipisicing elit

2. blokk. Lorem ipsum dolor sit amet, consectetur adipisicing elit

3. blokk. Lorem ipsum dolor sit amet, consectetur adipisicing elit

4. egység. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1. blokk. Lorem ipsum dolor sit amet, consectetur adipisicing elit

2. blokk. Lorem ipsum dolor sit amet, consectetur adipisicing elit

3. blokk. Lorem ipsum dolor sit amet, consectetur adipisicing elit

4. egység. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Miért történt ez? Röviden, ez azért történik, mert a lebegtetett elemek kiesnek a dokumentum folyamából. Ez azonban egy külön cikk témája. Itt megismerkedünk az új tulajdonsággal, amely a lebegő elemek viselkedését szabályozza:

balra - letiltja a tördelést a bal oldalon, minden elem új sorban jelenik meg (az elem alatt)
rigth - megakadályozza, hogy az elem a jobb oldalon beburkolódjon
mindkettő - tiltja egy elem mindkét oldalát körbetekerni, akkor ajánlott használni, ha egyértelműen új sorban kell megjeleníteni az elemet, vagy nem ismert, hogy melyik oldalon lehet körbefonni más elemeket;

Adjuk hozzá a clear:left tulajdonságot a 4. blokkhoz, amely megakadályozza, hogy ez az elem a bal oldalon lévő többi lebegő elem körül áramoljon.