Úplné základy webovej stránky založenej na Div: 7 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 12:02

Tento návod vám ukáže úplné základy toho, ako vytvoriť webovú stránku s divmi. Pretože tabuľky použité na rozloženie sú zlé!: p Aby ste pochopili tento návod, budete potrebovať základný html a css. Ak niečomu nerozumiete, pokojne sa pýtajte. Moja osobná domovská stránka tiež používa tento druh štruktúry div.

Krok 1: Vytvorte základné súbory

Najprv vytvorte svoj html súbor. Pridáme k tomu úplné základy. Súbor css bude zatiaľ prázdny. Súbor html teraz obsahuje: test Uložte súbor html ako niečo.html. Názov si môžete vybrať sami. Váš súbor css musí byť uložený ako.css. Uistite sa, že mu dáte rovnaký názov, ako je uvedené v súbore html. V tomto prípade „style.css“. Teraz máme pri zobrazení ukážky v našom prehliadači čistú prázdnu stránku html.

Krok 2: Upravte hlavnú značku pre základné farby, písma,…

Html súbor necháme tak, ako je, a upravíme iba súbor css. Do súboru css pridajte nasledujúci kód: body {background: #444444; rodina fontov: verdana, arial, sans-serif; farba: #444444; veľkosť písma: 12px; margin: 0px;} Týmto kúskom kódu definujeme všetky vlastnosti tagu body. Pretože je všetok obsah v značke body, tieto nastavenia ovplyvnia celú stránku. Farba pozadia a farba písma (farba) boli nastavené na tmavošedú. Rodina písem (rodina písem) bola nastavená na verdanu. Ak počítač používaný na prezeranie našich webových stránok nemá písmo „verdana“, zobrazí naše webové stránky písmom „arial“. Do zoznamu môžete pridať ďalšie písma. „Bezpatkový“je generický typ, ktorý sa použije, ak nebolo k dispozícii žiadne zadané písmo. Veľkosť písma (veľkosť písma) bola nastavená na 12 pixelov. Toto je absolútna hodnota. Ak chcete upraviť iné veľkosti písma (napríklad hlavičky, odseky, položky ponuky, …), môžete namiesto „px“použiť relatívnu jednotku „em“. Ak teda chcete zmeniť veľkosť svojho webu, budete musieť zmeniť iba veľkosť písma. Okraj bol nastavený na 0 pixelov pre všetky štyri strany značky tela. To sa robí tak, aby sa zabezpečilo, že sa web prilepí k hornej časti okna.

Krok 3: Pridanie kontajnera s hlavičkou a obsahom

Teraz pridáme kontajner. Toto je jednoducho div v strede, ktorý bude obsahovať celú našu webovú stránku. V tomto kontajneri pridáme ďalšie dve divy; div obsahu a hlavička div. Náš html súbor bude teraz vyzerať takto: test Content Header Do nášho css súboru pridáme nasledujúci kód: div#container {width: 800px; okraj: 0px auto; pozadie: #FFFFFF; vypchávky: 0 pixelov;} div#obsah {šírka: 800 pixlov; vypchávka: 100 pixelov; pozadie: žlté;} div#hlavička {šírka: 800px; výška: 100px; pozadie: modré; poloha: absolútna; hore: 0px;}. clearfix: po {content: "."; displej: blok; výška: 0; jasné: oboje; viditeľnosť: skrytá;}. clearfix {display: inline-block;}/* Skryť pred IE Mac \*/. clearfix {display: block;} div#kontajner znamená, že máme značku div s ID „kontajner“. Pridáme niekoľko farieb a „margin: 0px auto;“aby sme sa uistili, že náš kontajner je v strede stránky. Musíme obsahu dať výplň a hlavičke absolútnu hodnotu s „top: 0px“, aby sme sa uistili, že je hlavička umiestnená nad iným obsahom. Nevadí škaredé farby. Ide len o to, aby bolo jednoduchšie čítať farby a zobrazovať rôzne divy. Tento podivný kód clearfix budeme potrebovať, aby sme zaistili, že naše navigačné a obsahové divy (pridané v nasledujúcom kroku) nevypadnú z okolitého div.

Krok 4: V obsahu Div vytvorte dve divy pre navigáciu a skutočný obsah

Teraz do obsahu div pridáme dve ďalšie divy. Jeden pre navigáciu a jeden pre skutočný obsah. Medzi tagom content; pridáte nový kód:

Navigácia Hlavný obsah Pridáme nejaký css kód na zobrazenie divov navigácie a hlavného obsahu; div#nav {šírka: 200 pixlov; plavák: vľavo; pozadie: oranžová;} div#maincontent {šírka: 600px; float: vpravo; pozadie: ružové;} Všimnite si skutočnosti, že tieto dva divy plávajú. Ak by sme v predchádzajúcom kroku nezadali extra kód clearfix, div by sa vznášali mimo okolitého div. Metódou clearfix zaistíme, aby sa to nestalo.

Krok 5: Pridajte niekoľko ďalších divov pre štruktúru v navigácii

Teraz do divu „nav“pridáme niekoľko ďalších divov, aby sme na našej webovej stránke vytvorili nejaký druh štruktúry. Zmeňte nasledujúci bit kódu:

• Foo
• Bar

Teraz vložíme kus kódu, ktorý definuje, ako sa má div „navblock“zobrazovať. Upozorňujeme, že navblock má triedu, nie ID. Dôvod je jednoduchý; divs s id sú zobrazené iba raz (navigačný blok, hlavička, päta, …). Divy s triedami je možné zobraziť viac ako raz. Tu použijeme triedu. Pre prípad, že by sme neskôr chceli pridať ďalší navigačný blok na.div.navblock {width: 180px; okraj: 5px auto; border: 1px solid red;} Ak chceme pridať ďalší blok navigácie, stačí pridať novú … štruktúru. Váš kód bude teraz vyzerať takto;

• Foo
• Bar
• Boo
• Ďaleko

Krok 6: Pridajte do hlavného obsahu niekoľko ďalších divov pre štruktúru

Teraz urobíme to isté pre maincontent div. Kód teraz vyzerá takto:

Lorem ipsum dolor sit amet,…

Do nášho súboru css opäť pridáme kus kódu, aby sme určili, ako sa má div zobrazovať: div.contentblock {width: 580px; okraj: 5px auto; border: 1px full white;} Teraz môžeme pridať ďalší blok obsahu pridaním ďalšieho „…“do diváka maincontent takto;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Krok 7: Urobte stránku o niečo menej škaredou

Teraz zábavná časť; farby. Teraz, keď máme hlavnú div štruktúru, môžeme farby zmeniť na niečo menej chaotické/škaredé/… Len sa pohrajte s farbami v súbore css. Tu je kompletný html súbor webovej stránky zobrazený na obrázku: test

• Foo
• Bar
• Boo
• Ďaleko

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Hlavička A toto je kompletný súbor css: body {background: #444444; rodina fontov: verdana, arial, sans-serif; farba: #444444; veľkosť písma: 12px; okraj: 0px;} div#kontajner {šírka: 800px; okraj: 0px auto; pozadie: #FFFFFF; vypchávky: 0 pixelov;} div#obsah {šírka: 800 pixlov; polstrovanie: 100 pixlov; pozadie: #FFFFFF;} div #hlavička {šírka: 800px; výška: 100px; pozadie: #888888; poloha: absolútna; hore: 0 pixelov;} div#nav {šírka: 200 pixlov; plavák: vľavo; pozadie: #FFFFFF;} div #maincontent {šírka: 600px; float: vpravo; pozadie: #DDDDDD;} div.navblock {šírka: 180px; okraj: 5px auto; orámovanie: 1px plné #DDDDDD;} div.contentblock {šírka: 580px; okraj: 5px auto; orámovanie: 1px plné #FFFFFF;}. clearfix: po {content: "."; displej: blok; výška: 0; jasné: oboje; viditeľnosť: skrytá;}. clearfix {display: inline-block;}/* Skryť pred IE Mac \*/. clearfix {display: block;} Teraz máte základy. Samozrejme, stále je čo upravovať, napríklad farby, veľkosti písma, lepšie vyzerajúci navigačný blok, … Tento návod je však len o štruktúre div. Ak by ste chceli vidieť ďalšie súvisiace pokyny, môžete sa kedykoľvek opýtať. Uvidím, či si nájdem čas.