Povedzme si pár slov o značke div. Ako vytvoriť blok v HTML a šikovne sa naučiť, ako ho umiestniť na webovú stránku Príklady webových stránok z div blokov

Layout začína svoju cestu od čias, keď bol kód napísaný v HTML a značkovanie sa vykonávalo pomocou tabuliek. Postupom času sa od toho vzdialili a značkovanie sa prenieslo do CSS. Teraz existuje niekoľko spôsobov rozloženia. Medzi tie moderné patrí Flex-box, sada nástrojov Bootstrap, ako aj najnovšie Grids, ktoré poskytujú tvorcom obrovské možnosti. Jednou z prechodných možností pri vývoji webu je blokové rozloženie. Predtým sa používal na vytváranie značiek celej stránky, teraz sa považuje za zastaraný, no napriek tomu stále nachádza široké využitie v špeciálnych prípadoch.

Čo je rozloženie bloku?

Nahradila zastaranú a nedokonalú tabuľkovú. Stránka sa skladá z takzvaných vrstiev alebo blokov a ako stavebné kamene slúži uzatváracia značka

. Toto je bloková značka, ktorá zaberá celú šírku nadradeného prvku a výšku, aby sa zmestila do obsahu. Neskôr sa takéto usporiadanie začalo nazývať „úžasné“. Základom pre orientáciu stránky sú triedy tzv.

V súčasnosti je tento typ rozloženia výrazne zastaraný a samotný tag

sa musí používať iba na určený účel. Objavilo sa množstvo sémanticky správnych značiek, ktoré uľahčujú navigáciu v kóde. Napríklad existuje špeciálna značka pre navigačné menu

Kvôli prehľadnosti môže byť rozloženie bloku znázornené takto:

obsahu

Div s obalom triedy predstavuje nadradený kontajner alebo inými slovami obal. Prvky s triedou prvkov sú jedinečné „stavebné kamene“ našej komplexnej štruktúry. Upozorňujeme, že rozdielny okraj od okraja v porovnaní s nadradeným prvkom je v kóde použitý kvôli prehľadnosti, aby bolo jednoduchšie určiť štruktúru a hierarchiu prvkov.

Pomocou tabuliek

Tabuľkové rozloženie webových stránok už dlho trápilo všetkých programátorov. Po prechode na blokový model webových stránok sa nejaký čas vôbec nepodporovalo používanie tabuliek, dokonca ani na ich zamýšľaný účel.

Tento prístup je určite nevhodný a dokonca škodlivý. Núti robiť jednoduché veci zložitejšími a nepohodlnejšími spôsobmi. Teraz tabuľka slúži len na zobrazenie relevantných údajov. Inými slovami - na zamýšľaný účel.

Rozdelenie rolí

Ak sa predtým všetka konštrukcia robila v HTML, rozloženie blokov so sebou prinieslo úplné oddelenie rolí. V súčasnosti sa HTML používa iba na označenie, logické formátovanie a vytváranie rámca stránky. Štýly sú úplne odstránené a sú zahrnuté v samostatnom súbore, ktorý je súčasťou dokumentu. CSS sa používa na rozloženie prvkov a vytvorenie atraktívneho a responzívneho dizajnu. Na prístup k bloku sa používajú triedy, ktoré majú názov prvku. Napríklad pre blok hlavičky priradíme hlavičku triedy. To tiež uľahčuje navigáciu v kóde. Teraz je to čiastočne dosiahnuté špecializovanými značkami, ktoré sa objavili v HTML5.

Používanie blokov

V blokovom usporiadaní sa značka aktívne používa

. Pri stavbe budovy je to podobné ako s tehlou. Hoci tvorí základ a dizajn stránky, nie je to jediné. Podobne ako dvere, okná, vetranie, balkóny a podobne, aj iné HTML prvky slúžia na rozloženie. Sú to odkazy, formuláre, obrázky, zoznamy a tabuľky.

Použitie značky

nám umožnil urobiť kód kompaktnejším a prehľadnejším. Prechod na blokové usporiadanie umožnil zbaviť HTML nepotrebných vecí, konkrétne štýlov. Umožnil úplne odstrániť preťažené a ťažko orientovateľné rozloženie tabuľky.

Aktívne používa rozloženie blokov CSS. Pomocou dostupných nástrojov môžete vytvoriť ľubovoľné rozloženie stránky s pixelovou presnosťou. Toto rozloženie sa nazýva pixel perfect. Znamená to dokonalú zhodu medzi stránkou a rozložením. Vyššie uvedená fotografia ukazuje, že s rozložením blokov nie je všetko také jednoduché. Spočiatku to jednoducho nebolo možné bez stolov. Tie slúžili na vytvorenie hlavného rozloženia stránok a na jednotlivé prvky boli použité bloky. Bolo to tak, kým sa nenaučili nastavovať výšku blokov.

Výhody

Blokové rozloženie webových stránok má nasledujúce výhody:

Ďalší vývoj

V súčasnosti je rozloženie block div zastarané a má len obmedzené použitie, iba ako špeciálny prípad pre určité situácie. V dispozičnom riešení bolo nahradené polohovaním a prietokom. Mali veľa nedostatkov, ale celkovo umožňovali viac ako blokové usporiadanie.

Nasledovala konštrukcia pomocou prvkov inline-block. To značne uľahčilo prácu programátorov. Táto metóda využíva výhody oboch typov blokov a umožňuje vám vytvoriť citlivejší a prispôsobivejší dizajn. Stojí za zmienku, že všetky tieto metódy tak či onak pozostávali z prvku div, ktorý mu dal názov „úžasné rozloženie“.

V súčasnosti sa na vytvorenie stránky používa Flex-box a bootstrap. Výrazne redukujú kód a zrýchľujú a zjednodušujú vytváranie vysokokvalitného responzívneho dizajnu. Umožňujú vám presúvať bloky bez rozbitia celej stránky.

V popredí pokroku je nová technológia – Grids. Umožňuje vám veľmi rýchlo a jednoducho vytvoriť dizajn akejkoľvek zložitosti. A bloky, tok, polohovanie, ako sa to stalo pri stoloch naraz, sa používajú iba na určený účel.

Rozloženie Div je aktuálny model na vytváranie webových stránok.

Na internete sa neustále objavujú nové stránky – spravodajské portály, blogy a osobné stránky. Takmer každý z nich je vytvorený na základe blokového modelu, ktorého základom sú DIV bloky. Dnes pochopíme túto technológiu, zvážte hlavné nuansy rozloženia div.

Prúd dokumentov HTML

Ak si pamätáme, že jazyk HTML vám umožňuje štruktúrovať hypertextové informácie, je jasné, že každá stránka je vo svojom jadre množinou blokov: obrázkov, textu, odkazov atď. Teraz nehovoríme konkrétne o DIV, ale sú to úzko súvisiace témy.

Máme teda určitý prúd údajov, z ktorých sa skladá stránka HTML. V súčasnosti existujú dva typy konštrukčných prvkov: blokové a inline. Bloky blokov v bežnom prúde HTML sú umiestnené jeden po druhom vo vertikálnom poradí. Zároveň v predvolenom nastavení zaberá šírka bloku všetok dostupný priestor vzhľadom na stránku alebo nadradený prvok. Inline prvky sú zase usporiadané jeden po druhom v horizontálnom poradí.

Hlavnými predstaviteľmi týchto dvoch kategórií sú značky div a span.

Ak teda hovoríme o normálnom toku HTML, všetky bloky div budú umiestnené pod sebou a rozpätie bude v rade.

Ako viete, nebudete môcť vytvoriť normálne označenie pre webovú stránku pomocou vložených prvkov. Preto sa pred niekoľkými rokmi, aby nahradili rozloženie tabuľky, rozhodli použiť rozloženie založené na blokoch DIV.

Rozloženie webovej stránky DIV

Na označenie stránky sa teda začali používať bloky DIV. Pomocou nich bolo možné nakresliť hlavné rozloženie a vytvoriť ďalšie bloky pre všetky potrebné typy obsahu.

Pozrime sa na tento proces na príklade štandardnej stránky, ktorá obsahuje hlavičku, blok obsahu, bočný panel a pätu.

Toto je klasická možnosť. Logo sa najčastejšie nachádza v hlavičke stránky a navigačné odkazy v bočnom bloku. Hlavný blok slúži na zobrazenie informácií – článkov, popisov firiem, fotoarchívov a pod. Do spodného bloku môžete vložiť adresu, kontakty a ďalšie servisné informácie.

Ako môžete vidieť na obrázku, na rozloženie rozloženia používame nasledujúce hlavné bloky:

hlavička
obsahu
päta

Hlavný blok sa používa ako kontajner pre všetok obsah. Hlavička – hlavička stránky. Nav - navigačný blok. Obsah – základné informácie a obsah. Footer – päta stránky.

Každý z týchto blokov je kontajner DIV. Ale na základe teórie by bloky mali na seba nadväzovať. Musíme získať rozloženie diskutované vyššie, aby bloky mali nasledujúcu štruktúru:

HLAVNÁ
- hlavička
- obsahu
- päta

A navyše by boli umiestnené na stránke rovnakým spôsobom, ako to vidíme na šablóne. Ako to môžeme dosiahnuť? Na tento účel použijeme vlastnosti pre bloky DIV, ktoré nám umožnia umiestniť ich požadovaným spôsobom voči sebe navzájom a voči stránke ako celku.

Najprv však vytvorte základ HTML nášho rozloženia a pomenujte bloky, aby sme mohli pracovať so štýlmi.

HTML rámec

Ak preskočíme všetky servisné značky, potom bude kostra našej stránky vyzerať takto.

Obsah

Navigácia

Pre každý blok máme pridelenú triedu. S jeho pomocou nastavíme štýly pre blok – to nám pomôže dosiahnuť požadované umiestnenie na stránke.

Je čas zoznámiť sa so štýlmi a vlastnosťami, ktoré sa používajú na rozloženie div stránok.

CSS štýly

Ak niekto ešte nevie, CSS štýly sa pri vývoji webových stránok používajú už dlho. S ich pomocou môžete zmeniť akýkoľvek prvok na stránke. Týka sa to ako vizuálneho stvárnenia bloku, tak aj jeho umiestnenia a mierky.

Plavák

Najprv sa pozrime na vlastnosť, ktorá vám umožňuje umiestniť prvok DIV napravo alebo naľavo od stránky alebo vzhľadom na jej nadradený kontajner.

Malý ústup. Vždy, keď bloku priradíme štýl, zmení svoje vlastnosti (veľkosť, umiestnenie) vzhľadom na nadradený kontajner.

Vlastnosť float má štyri hodnoty: none, right, left, inherit.

Zaujíma nás význam „vľavo“ a „vpravo“.

Hodnota float označuje, na ktorej strane bude náš blok zobrazený. Všetky ostatné bloky budú obtekať z opačnej strany.

V našom prípade musíme pre navigačný blok zadať hodnotu left , a pre hlavný obsah hodnotu right . Takto to bude vyzerať v súbore štýlu:

Nav ( float:left; ) .content ( float:right; )

Mimochodom, vlastnosť môžete nastaviť len pre navigačný blok. Blok obsahu bude automaticky umiestnený napravo od navigácie. To sa dosiahne vďaka float, ktorý sa získa nastavením vlastnosti float.

Okraje v CSS: okraj a výplň

Teraz pochopme dve dôležité vlastnosti používané v rozložení založenom na div. Sú zodpovedné za odsadenie. Najjednoduchší spôsob, ako pochopiť podstatu ich práce, je na príklade.

Predstavme si, čo musíme urobiť, aby náš hlavný blok MAIN mal mierne odsadenie od hlavičky stránky. Dá sa to dosiahnuť priradením vlastnosti margin k div s hlavnou triedou. Je zodpovedný za vonkajšie čalúnenie bloku.

Vlastnosť margin má nasledujúce hodnoty: [value | úrok | auto] (1,4) | dediť.

Môžete teda určiť posun v pixeloch, v percentách, pre každú stranu v poradí.

Je možné nastaviť len určité odsadenie, napríklad na vrchnej strane. Toto je presne náš prípad. Postup implementácie:

Hlavné ( margin-top: 10px; )

Teraz bude mať náš hlavný blok hornú výplň 10 pixelov.

Teraz navrhnime blok s navigáciou a obsahom. Predstavte si, že už máme hotový web. Všetky odkazy v navigácii sú umiestnené blízko ľavého okraja stránky. A text v bloku obsahu, naopak, tesne susedí s pravou stranou. Dosť nepríjemný dizajn. Musíme urobiť vnútornú výplň.

Je za to zodpovedná vlastnosť padding, ktorá má nasledujúce hodnoty: [value | percent] (1, 4) | dediť

Princíp je tu rovnaký ako pri vlastnosti margin – odsadenie môžete nastaviť pre každú stranu samostatne.

Nav ( float:left; padding-left: 15px; ) .content ( float:right; padding-right: 20px; )

Pomocou týchto základných vlastností môžete dosiahnuť požadované rozloženie blokov DIV. V dôsledku toho dostanete hotový vzhľad webovej stránky a zostáva už len naplniť ho potrebnými informáciami.

Video k článku:

Záver

Uvažovali sme len o základných vlastnostiach. V skutočnosti je ich oveľa viac. V každom prípade sa však poskytnuté informácie vždy použijú v rozložení div.

Prečo hľadať informácie na iných stránkach, ak je všetko zhromaždené tu?

Autorova séria článkov venovaná základy blokového rozloženia webovej stránky. Toto je prvé miesto, kde začať študovať tému. tvorba webových stránok. Lekcie budú užitočné pre tých, ktorí sa chcú naučiť základy HTML a CSS nielen teoreticky, ale aj prakticky.

Keď si tému naštudujeme, vytvoríme webovú stránku, bežnú webovú stránku, bez špeciálnych zvončekov a píšťaliek, ale celkom peknú.

V lekciách jednoducho a jasne hovorím o blokovom rozložení webových stránok a ďalších. Ak chcete rýchlo pochopiť základy rozloženia webových stránok, potom bude táto séria článkov presne to, čo potrebujete.

Čo je rozloženie bloku?

Čo sa stalo blokovať rozloženie webovej stránky a s čím to jedávaš?

Predtým boli webové stránky navrhnuté pomocou tabuliek. Každý prvok stránky, či už ide o nadpis, text alebo obrázok, bol umiestnený vo vlastnej bunke. Tieto bunky sa hemžili v iných, väčších bunkách a tie zase ležali v hlavnej bunke, teda na samotnej stránke webu.

Tabuľkové rozloženie je už zastarané, hoci ho mnohí webmasteri naďalej používajú. Jeho veľkou nevýhodou je ťažký kód. Koniec koncov, každá malá bunka musí byť označená určitými značkami.

Rozloženie bloku- úplne iná pesnička. Tu sú všetky prvky stránky umiestnené v špeciálnych blokoch nazývaných div. Vo svojom jadre sú trochu podobné tým istým stolom. Krabica je krabica aj v Afrike. Bloky sú však oveľa pohodlnejšie, jednoduchšie a funkčnejšie.

Blokovať v rozložení webovej stránky je to pravidelná obdĺžniková oblasť, ktorá má množstvo vlastností, ako napríklad: rám, okraje a zarážky. Obsah bloku môže byť čokoľvek – text, obrázok, zoznam, formulár na vyplnenie, navigačné menu atď.

Rám- toto je obrys bloku, pre ktorý môžete nastaviť také vlastnosti, ako je hrúbka, farba a typ (bodkovaný, plný, bodkovaný).

Polia (vyplnenie)- oddeľte obsah bloku od jeho rámčeka tak, aby napríklad text nebol „nadoraz“ k stenám bloku.

Okraje- toto je prázdny priestor medzi rôznymi blokmi, ktorý umožňuje umiestniť dva bloky voči sebe v danej vzdialenosti.

Bloky, podobne ako tabuľky, sú na stránke vždy usporiadané vertikálne. To znamená, že ak sú v kóde stránky napísané dva bloky za sebou, zobrazia sa v prehliadači pod sebou. Ak potrebujeme usporiadať niekoľko blokov vodorovne do jedného riadku, potom v ich vlastnostiach nastavíme parameter ako „ prúdiť okolo"(plavák). Ale o tom neskôr.

Blokové rozloženie stránky. Tagy

Tag je špeciálna konštrukcia jazyka HTML. Rozlišovať otvorenie A zatváranie značky. Nemýľte si ich s hashtagmi zo sociálnych sietí, či tagmi na weboch, to sú iné veci!

V najjednoduchšom prípade je visačka ako súčasť detskej stavebnice, ktorá má svoj striktný účel: hrazdička znamená hrazdičku, koliesko koliesko a nič iné. Napríklad značka odseku:

Text odseku.

sa vždy označuje písmenom p a ničím iným. Tak sa volá.

Štítky sú vždy uzavreté v lomených zátvorkách. Ako vidíte z príkladu, existuje otváracia a zatváracia značka. Záverečná značka má pred názvom pridanú lomku - lomka / .

Nie všetky značky majú uzatvárací pár. Napríklad img image tag ho vôbec nemá. Aby však vyhovovali moderným štandardom a požiadavkám špecifikácie XHTML, stále pridávajú medzeru s lomkou pred uzatváraciu uhlovú zátvorku. Vyzerá to asi takto:

div tag

Značka div je základom rozloženia bloku. Sú to práve kocky, z ktorých je postavená celá lokalita. Táto značka je neutrálna. Na rozdiel od štandardných HTML tagov, ktoré sú striktne viazané na ich obsah (p - na odseky, a - na odkazy, img - na obrázky), tag div môže obsahovať čokoľvek a toľko, koľko chcete. Považujte to za veľkú krabicu, kde sú všetky hračky vyhodené.

Na definovanie sa používa značka div funkčné oblasti na stránke. Napríklad ako: „hlavička“, navigačný blok, blok hlavného obsahu, „päta“ alebo päta podľa nášho názoru.

Značka div, ako každá iná značka, má svoje vlastné atribúty.

Atribút- popisná charakteristika značky. Teda čo a ako dokáže. Vezmime si napríklad značku obrázka:

V tomto prípade sú atribúty tagu src, width, height, alt. V úvodzovkách (a to je tiež povinná požiadavka moderných noriem) sú uvedené hodnoty atribúty.

Rozlúštiť takúto nahrávku nie je ťažké. Značka označuje, že na toto miesto stránky je potrebné pripojiť obrázok risunok.jpg z priečinka obrázky. Šírka obrázka je 200 pixelov, výška je 50 pixelov. A do hromady bol pridaný aj alternatívny text, ktorý vysvetľuje, čo je na obrázku.

Mimochodom, alternatívny text nie je rozmar, ale aj nevyhnutná požiadavka. Nie všetci obyvatelia siete majú dobrý zrak. Niekto používa program na rozpoznávanie a čítanie textu. A niektorí ľudia jednoducho vypnú zobrazovanie obrázkov v prehliadači. Preto existujú alternatívne popisky pre kresby.

Ak nemá zmysel ich podpisovať (napríklad značka zoznamu alebo nejaký druh šípky), v atribúte alt zostane medzi úvodzovkami prázdne miesto.

atribúty tagu div

Značka div má iba dva atribúty:

id - atribút, ktorý vám umožňuje priradiť jedinečný hodnotu, teda tú, ktorá je použitá na stránke len raz. Napríklad hlavička alebo päta.

Takto môžeme ďalej nastaviť niektoré nastavenia v šablóne štýlov pre značku div s atribútom id a hodnotou hlavičky a úplne iné pre pätu. A prehliadač správne rozpozná, že tento kus textu patrí do „hlavičky“ a bude napísaný napríklad veľkým a červeným písmom, ale tento patrí do „päty“ a bude napísaný malým a sivým písmom. A žiadny zmätok!

class je atribút, ktorý umožňuje priradiť rovnakú hodnotu viacerým prvkom. Ku všetkým obrázkom na stránke pridajte napríklad rám rovnakej hrúbky a farby. Keďže obrázkov je viacero, atribút id sa už nedá použiť, preto použijeme class .

Prvýkrát si myslím, že to stačí. Ak je niečo nejasné o blokovom usporiadaní webových stránok, opýtajte sa v komentároch.

Pokračovanie nabudúce. Zostať v kontakte!

Usporiadanie s blokmi div sa už dlho stalo štandardom a má množstvo výhod oproti tabuľkovému usporiadaniu. V skutočnosti sú však začínajúci vývojári zmätení v správaní týchto rovnakých blokov.

Pozrime sa na hlavné body rozloženia bloku. Teraz nebudeme brať do úvahy štandard html5, ale jednoducho sa pozrieme na základy rozloženia s blokmi div, ktoré sa používa pri vytváraní rozloženia alebo nejakého samostatného komponentu stránky.

Čo sa považuje za blokový prvok?

Oblasť takéhoto prvku na stránke je reprezentovaná obdĺžnikom, v predvolenom nastavení zaberá celú dostupnú šírku a začína na novom riadku.
Najbežnejším prvkom používaným v blokovom usporiadaní je univerzálny prvok

Takže od jednoduchých po zložité. Pozrime sa, ako sa prvky div zobrazujú v predvolenom nastavení bez toho, aby štýly ovplyvňovali ich pozíciu. Pre prehľadnosť pridáme štýly k prvkom inline, prostredníctvom atribútu style.

Blok 1

Blok 2

Blok 3

Pridajme hodnotu šírky pre každý blok:

Blok 1

Blok 2

Blok 3

Je vidieť, že každý blok sa podľa špecifikácie nachádza na novom riadku. Toto je ich normálne správanie.

Teraz vyvstáva otázka, ako umiestniť div bloky na jednom riadku, jeden po druhom?

Na tento účel existuje vlastnosť, ktorá určuje, na ktorú stranu bude blok nútený zarovnať. Zároveň z druhého okraja môže obtekať ďalšie prvky.

Vlastnosť float má nasledujúce významy:

vľavo - blok je zarovnaný k ľavému okraju, tečie doprava
vpravo - blok je zarovnaný k pravému okraju, tečie doľava
žiadne - nie je zadané žiadne zalamovanie, blok sa chová štandardne, ako v predchádzajúcich príkladoch.

Pridajme float:left k našim blokom tak, aby boli bloky zarovnané doľava:

Blok 1

Blok 2

Blok 3

V dôsledku toho sa bloky zoradili do jednej línie. Dobre, povedzme, že sme chceli pridať ďalší div naspodok a urobíme to bez zadania vlastnosti float:

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

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

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

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

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

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

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

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

Prečo sa to stalo? Skrátka sa to stane, pretože plávajúce prvky vypadnú z toku dokumentu. Toto je však téma na samostatný článok. Tu sa zoznámime s novou vlastnosťou, ktorá riadi správanie plávajúcich prvkov:

vľavo - zakáže zalamovanie na ľavej strane, všetky prvky sa zobrazia na novom riadku (pod prvkom)
vpravo - zabraňuje ovíjaniu prvku na pravej strane
oboje - zakazuje obtekanie prvku na oboch stranách; odporúča sa ho použiť, keď jasne potrebujete zobraziť prvok na novom riadku alebo nie je známe, na ktorú stranu je možné obtekať iné prvky

Do bloku 4 pridáme vlastnosť clear:left, ktorá zabráni obtekaniu tohto prvku okolo iných plávajúcich prvkov na ľavej strane.